Flutter UI Widgets

Nov 9 2021 · Dart 2.14, Flutter 2.5, VS Code 1.61

Part 1: Flutter UI Widgets

04. Work with Images

Episode complete

Play next episode

Next
About this episode

Leave a rating/review

See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 03. Build Layouts Next episode: 05. Create Scrollable Contents

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

Let’s replace the Placeholder widget with an image. Enter the following code:

...
SizedBox(
  height: 200,
  width: double.infinity,
  child: Image.network(
    imageUrl!,
    fit: BoxFit.cover,
  ),
),
...
ClipRRect(
  borderRadius: const BorderRadius.only(
    topLeft: Radius.circular(4),
    topRight: Radius.circular(4),
  ),
  child: SizedBox(
    height: 200,
    width: double.infinity,
    child: Image.network(
      imageUrl,
      fit: BoxFit.cover,
    ),
  ),
);
...
loadingBuilder: (context, child, progress) {
  if (progress == null) return child;
  return const Center(child: CircularProgressIndicator());
},
...
...
title: Image.asset(
  'assets/images/logo.png',
  width: 180,
),
...
---
assets:
  - assets/images/