Your Second Flutter App

Nov 30 2021 · Dart 2.13, Flutter 2.2.3, Visual Studio Code

Part 3: Navigate & Animate

18. Create a Custom Image Widget

Episode complete

Play next episode

About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 17. Navigate Between Screens Next episode: 19. Complete the Course Details Page

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.

At this point, you have a course detail page with just a course title on it. As you can see, it needs a little work. You’re going to show the course image at the top of the course detail screen.

class ImageContainer extends StatelessWidget {
  final double? width;
  final double? height;
  final Color placeholder;
  final String url;
 const ImageContainer(
      {Key? key,
      this.placeholder = const Color(0xFFEEEEEE),
      required this.url})
      : super(key: key);
Widget build(BuildContext context) {
  return Container(
    width: width,
    height: height,
decoration: BoxDecoration(
  color: placeholder,
  image: url.contains('http')
      ? DecorationImage()
      : null),
image: url.contains("http")
    ? DecorationImage(image: NetworkImage(url))
    : null),