Beginning FlutterFire

Now you will create the screen that contains the list of activities that users will see when they open the app.

In the screens folder of the project, create a new file and call it “activities_screen.dart” This screen will contain a ListView with the list of activities; from there users will also be able to get to the activity detail screen, which will allow creating a new activity, or updating an existing one.

At the top of the file, import material.dart. Then create a Stateful widget, called ActivitiesScreen. In the build method of the State class, return a scaffold, with an appbar, that contains an Appbar widget, whose title is a const Text, with “My Activities”.

In the body of the Scaffold, return a FutureBuilder. Now, we want the listVIew to update when a Future containing the list of Activities completes loading.

So, at the top of the State class, create a late Future of a List containing Activity objects and an instance of FirebaseHelper.

  late Future<List<Activity>> activities; 
  late FirebaseHelper helper = FirebaseHelper(); 

Then override the initState method and set the activities Future to take the result of helper.readActivities. Now we can set the FutureBuilder: it future will be activities. The builder takes the current context and an AsyncSnapshot, that we can just call snapshot.

Inside the builder method, declare a final List of Activity, called activityList: if the snapshot has data, assign to activityList the snapshot.data property, as a List of Activity. Otherwise, just set it to take an empty List.

body: FutureBuilder( 
        future: activities, 
        builder: (context, snapshot) { 
          final List<Activity> activityList = 
              snapshot.hasData ? snapshot.data as List<Activity> 
               : []; 

Now you can return a ListView, with its builder constructor. Its itemCount property takes the length of the activityList. Now, the itemBuilder method takes the corrent context and an index containing each position of the ListView.

Here, return a ListTile widget. Its title takes a Text containgin the current activity description property. In the subtitle of the ListTile, let’s place a Text, containing ‘Date”, and the day of the actvitym then a dash and the From text, then the beginTime of the activity, then “to” and the endTime of the activity.

return ListView.builder( 
  itemCount: activityList.length, 
  itemBuilder: (context, position) { 
    return ListTile( 
      title: Text(activity.description), 
      subtitle: Text( 
          'Date: ${activity.day} - From ${activity.beginTime}' + 
              ' to  ${activity.endTime}'), 

Open the authentication_screen.dart file. In the build method of the AuthenticationScreen stateless widget, when the snapshot has data, return ActivitiesScreen. Let’s run the app. If you need to sign in, insert your email and password.

Once you log in, you should be able to see the ListView containing the Activity that you’ve added through the test method. Well done! Let’s add the screen to insert and update an activity next!