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

Take your career further with a raywenderlich.com Pro subscription. 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.

Make the Widget Reusable Pro

As per the new lint rules by Flutter. There is no need mention the type of the variable if the varibale is locally declared. Also final keyword is used if the variable wont be reassigned.

The students materials have been reviewed and are updated as of September 2022.

The update material uses null safety and also proper use of const and final keywords as per the latest Flutter guidelines. This is to encourage the students to use the latest Flutter best practices.

Learn about how we could use parameters of the widget to customize it so that it could be reusable in different parts of our app.

Contributors

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 raywenderlich.com Professional subscription.

  • Design the widget
  • Decompose the design
  • Build the basic widget
  • Customize the look
  • Determine the user interaction
  • Define the dependencies
  • Implement the dependencies
  • Test the widget

Demo

Back in Android Studio, we would switch the type of card to display based on the device orientation. Update your code to the following:

@override
Widget build(BuildContext context) {
    // New code
    // As per the new lint rule by Flutter. There is no need mention the type of the variable if the 
    // varibale is locally declared. Also final keyword is used if the variable wont be reassigned.
    final mediaQuery = MediaQuery.of(context);
    final isLandscape = mediaQuery.orientation == Orientation.landscape;
    ...
        child: isLandscape
            ? WideCard(episode: episode)
            : TallCard(episode: episode),
Container(
    height: 150,
    child: ListView(
      scrollDirection: Axis.horizontal,
      children: [
        ...episodes
            .map((Episode e) => EpisodeCard(
                  episode: e,
                ))
            .toList()
      ],
    ),
),

Demo

Inside the episode card widget, we’ll be defining an isWideCard boolean parameter like so:

...
    final bool isWideCard;

    const EpisodeCard({
      Key? key,
      required this.episode,
      this.isWideCard = false,
    }) : super(key: key);
Container(
    width: isWideCard ? 350 : mediaQuery.size.width,
...
    child: isLandscape || isWideCard
        ? WideCard(episode: episode)
        : TallCard(episode: episode),

Reviews

Comments