Creating Custom Reusable Widgets in Flutter

Sep 14 2022 · Dart 2.18.0, Flutter 3.3.0, Android Studio Chipmunk 2021.2.1 & VS Code 1.70.2 Universal

Part 1: Creating Custom Reusable Widgets in Flutter

03. Make the Widget Reusable

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: 02. Create Your First Reusable Widget Next episode: 04. Setup the Audio Widget

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.

Notes: 03. Make the Widget Reusable

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.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now
  • 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),