A month of Flutter: rendering network images

Originally published on bendyworks.com.

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,
    ),
  ],
);
~~~{% endraw %}

{% raw %}`Column`{% endraw %}s 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 {% raw %}`SizedBox`{% endraw %}es. These simply add a little space between the widgets. [{% raw %}`CrossAxisAlignment.start`{% endraw %}](https://docs.flutter.io/flutter/rendering/CrossAxisAlignment-class.html) is used to left align the text.

The image is wrapped in a [{% raw %}`ClipRRect`{% endraw %} widget](https://docs.flutter.io/flutter/widgets/ClipRRect-class.html) with a {% raw %}`borderRadious` to give it nice round corners. The `Text` widgets are using the [parent theme styling](https://flutter.io/docs/cookbook/design/themes) 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](https://github.com/abraham/birb/issues/34) and [on device caching](https://github.com/abraham/birb/issues/35).

To add some space around all the `PostItems`, I'm updating {% raw %}`PostsList`{% endraw %} to use a [{% raw %}`Container`{% endraw %} widget](https://docs.flutter.io/flutter/widgets/Container-class.html) with some padding. I'm not putting the padding inside `PostItem` because it's the parents responsibility to position `PostItem`s in relation to each other. [`EdgeInsets.fromLTRB`](https://docs.flutter.io/flutter/painting/EdgeInsets/EdgeInsets.fromLTRB.html) will pad the left, top, right, and bottom edges respectively.

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

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](https://thepracticaldev.s3.amazonaws.com/i/k8nr5qh8a5g2emadv2xr.png)

Flutter doesn't load images in tests, so those will have to be stubbed. There is an [easy to follow guide](https://iirokrankka.com/2018/09/16/image-network-widget-tests/) with instructions on using the [{% raw %}`image_test_utils` package](https://pub.dartlang.org/packages/image_test_utils) though.

## Code changes

- [#31 Render images and text](https://github.com/abraham/birb/pull/31)