A month of Flutter: rendering network images

To finish off week two, I'm going to finally render some prim Unsplash birbs.

In PostItem I'll use a Column widget instead of the previous Card widget. Card creates a nice boarder shape for your material but now I don't want any shadows to draw attention away from the images.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    ClipRRect(
      child: Image.network(post.imageUrl),
      borderRadius: BorderRadius.circular(10.0),
    ),
    const SizedBox(height: 8.0),
    Text(
      post.username,
      style: Theme.of(context).textTheme.headline,
    ),
    const SizedBox(height: 8.0),
    Text(
      post.text,
      style: Theme.of(context).textTheme.body1,
    ),
  ],
);

Columns are used to vertically arrange a number of widgets. In this case the image, the username, and the text. Along with those visible widgets there are also two SizedBoxes. These simply add a little space between the widgets. CrossAxisAlignment.start is used to left align the text.

The image is wrapped in a ClipRRect widget with a borderRadious to give it nice round corners. The Text widgets are using the parent theme styling so they will stay current with future theme changes.

This is only a basic implementation of rendering images but I've planned some future improvements like fading in and on device caching.

To add some space around all the PostItems, I'm updating PostsList to use a Container widget with some padding. I'm not putting the padding inside PostItem because it's the parents responsibility to position PostItems in relation to each other. EdgeInsets.fromLTRB will pad the left, top, right, and bottom edges respectively.

ListView(
  children: items.map((Post post) {
    return Container(
      padding: const EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 8.0),
      child: PostItem(post),
    );
  }).toList(),
);

In the image URLs, I've told Unsplash to return images with a width of 400px. This is simply to avoid downloading multi-megabyte images in development. Once users are uploading images in Birb, there will be more control over image sizes.

Now these are some prim birbs.

Screenshot of images rendering

Flutter doesn't load images in tests, so those will have to be stubbed. There is an easy to follow guide with instructions on using the image_test_utils package though.

Code changes

Posts in this series

  • A month of Flutter
  • A month of Flutter: create the app
  • A month of Flutter: configuring continuous integration
  • A month of Flutter: continuous linting
  • A month of Flutter: upgrading to 1.0
  • A month of Flutter: initial theme
  • A month of Flutter: no content widget
  • A month of Flutter: a list of posts
  • A month of Flutter: extract post item widget
  • A month of Flutter: post model and mock data
  • A month of Flutter: rendering a ListView with StreamBuilder
  • A month of Flutter: Stream transforms and failing tests
  • A month of Flutter: real faker data
  • A month of Flutter: rendering network images
  • A month of Flutter: FABulous authentication
  • A month of Flutter: configure Firebase Auth for Sign in with Google on Android
  • A month of Flutter: configure Firebase Auth for Sign in with Google on iOS
  • A month of Flutter: Sign in with Google
  • A month of Flutter: mocking Firebase Auth in tests
  • A month of Flutter: delicious welcome snackbar
  • A month of Flutter: navigate to user registration
  • A month of Flutter: user registration form
  • A month of Flutter: testing forms
  • A month of Flutter: setting up Firebase Firestore
  • A month of Flutter: awesome adaptive icons
  • A month of Flutter: set up Firestore rules tests
  • A month of Flutter: Firestore create user rules and tests
  • A month of Flutter: WIP save users to Firestore
  • A month of Flutter: user registration refactor with reactive scoped model
  • A month of Flutter: the real hero animation
  • A month of Flutter: a look back

  • Category: Development