Creating Custom Reusable Widgets in Flutter
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’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as 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
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),