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.

Create Your First Reusable Widget Pro

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.

Break down the widget’s design and start coding up the different parts that would make up the custom widget.

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

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),

Reviews

Comments