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

02. Create Your First Reusable Widget

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: 01. Get Introduced to Custom Widgets Next episode: 03. Make the Widget Reusable

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: 02. Create Your First Reusable Widget

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've reached locked video content where the transcript will be shown as obfuscated text.

  • 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

Inside Android Studio, open up the episode_card.dart file inside the widgets folder. It is a stateless widget that displays the title of the podcast episode in a Text widget. This text widget is a child of the container and the container has the box shadow effect. The container is wrapped with a GestureDetector widget which is used to add a click interaction to the widget. Clicking on it takes us to the corresponding podcast episode page.

child: Column(
    children: [
        Stack(
            children: [
                Container(
                    height: 200,
                    child: Icon(Icons.mic, size: 64),
                ),
            ],
        ),
        Container(
            height: 120,
            padding: const EdgeInsets.all(16),
            color: Colors.white,
            child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                    Text(
                        episode.title,
                        style: Theme.of(context).textTheme.headline6,
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                    ),
                    Row(
                        children: [
                        Text("Host: ${episode.host}"),
                        Spacer(),
                        Text("Episode: ${episode.id}"),
                        ],
                    ),
                ],
            ),
        ),
    ],
)

Demo

The card detail section starts from this Container here. Go ahead and click on it then select extract widget and then name it CardDetail. It is now a separate widget that we can use for the two designs we’re creating.

Container(
    height: 120,
    width: 100,
...
// child: TallCard(episode: episode),
child: WideCard(episode: episode),