DEV Community

Cover image for A month of Flutter: rendering network images
Abraham Williams
Abraham Williams

Posted on • Originally published at bendyworks.com

3 1

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)
Enter fullscreen mode Exit fullscreen mode

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more