A month of Flutter: a list of posts

Originally posted on bendyworks.com.

Yesterday I created a widget to display when there are no images available. Today I'm going to create the PostsList widget that will be displayed when there are images.

The widget will use a ListView, in part because I plan to use Firebase Cloud Firestore as a datastore and that's the pattern cloud_firestore uses.

For now I'm going to replace the hardcoded NoContent widget with the new PostsList. NoContent will temporarily go unused until #13 load sample data and render homepage list items is implemented.

For this initial list I'm going to iterate over a finite list and create a static Material Card for each list item. The card will have a fixed height and some simple Text.

class PostsList extends StatelessWidget {
  const PostsList();

  static const List<int> _items = <int>[0, 1, 2];

  @override
  Widget build(BuildContext context) {
    return ListView(
        children: _items.map((int index) {
      return Card(
        child: Container(
          height: 300.0,
          child: const Center(
            child: Text('Prim Birb'),
          ),
        ),
      );
    }).toList());
  }
}

I'll also create a simple test to make sure that PostsList renders two Cardwidgets and the expected text. You might notice that the test checks for two of each while the _items implementation should actually render three cards. But the screen size is not large enough to display all three cards so one of them is offscreen. When testing I only care about what's rendered to the user.

testWidgets('Renders list of posts', (WidgetTester tester) async {
  // Build our app and trigger a frame.
  await tester.pumpWidget(const MaterialApp(
    home: PostsList(),
  ));

  expect(find.byType(Card), findsNWidgets(2));
  expect(find.text('Prim Birb'), findsNWidgets(2));
});

The result is a simple list of cards:

Code changes

• #18 Add PostsList widget