GridView
First, use a FutureBuilder to load the collection query.
Second, use a Flutter GridView to display the topics from Firestore in a scrollable two-column grid.
topics.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:quizapp/services/services.dart';
import 'package:quizapp/shared/shared.dart';
import 'package:quizapp/topics/topic_item.dart';
class TopicsScreen extends StatelessWidget {
const TopicsScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return FutureBuilder<List<Topic>>(
future: FirestoreService().getTopics(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const LoadingScreen();
} else if (snapshot.hasError) {
return Center(
child: ErrorMessage(message: snapshot.error.toString()),
);
} else if (snapshot.hasData) {
var topics = snapshot.data!;
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.deepPurple,
title: const Text('Topics'),
),
body: GridView.count(
primary: false,
padding: const EdgeInsets.all(20.0),
crossAxisSpacing: 10.0,
crossAxisCount: 2,
children: topics.map((topic) => TopicItem(topic: topic)).toList(),
),
bottomNavigationBar: const BottomNavBar(),
);
} else {
return const Text('No topics found in Firestore. Check database');
}
},
);
}
}