Creating Custom Reusable Widgets in Flutter
Notes: 04. Setup the Audio Widget
const keyword is used to create a constant value, be it a variable or a widget. The Text value is going to remain the same throughout the widget’s lifecycle. Hence we add a const keyword so that the widget is not rebuilt every time. This helps in improving performance. SizedBox widget is used to add space between widgets. The value won’t be changed in the widget’s lifecycle so we add a const keyword.
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
In previous episodes, we learnt how to create a custom reusable widget. Now, there are different types of custom reusable widgets. The episode card we just created was reused where we wanted a different UI layout but the UI still displayed the same data. This is design centric and mainly for reusing designs. These type of reusable widgets are common in UI libraries where we reuse and customize the design for the provided widgets.
Demo
Inside Android Studio, create a new file inside the widgets folder and name it audio_widget.dart.
First create a stateless widget named AudioWidget.
Then enter the following code:
class AudioWidget extends StatelessWidget {
const AudioWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Row(
children: [
IconButton(icon: const Icon(Icons.play_arrow), onPressed: () {}),
// Const keyword is used to create a constant value, be it a variable or a widget.
// The Text value is going to remain the same throughout the widget's lifecycle.
// Hence we add a const keyword so that the widget is not rebuilt every time.
// This helps in improving performance.
const Text('00:37'),
Slider(value: 0, onChanged: (double value) {}),
const Text('01:15'),
],
),
);
}
}
Slider(
value: 0.5,
activeColor: Theme.of(context).textTheme.bodyText2.color,
inactiveColor: Theme.of(context).disabledColor,
onChanged: (value){},
),
...
// SizedBox widget is used to add space between widgets. The value wont
// be changesd in the widget's lifecycle so we add a const keyword.
const SizedBox(width: 16),