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

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

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

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/