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

04. Setup the Audio 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: 03. Make the Widget Reusable Next episode: 05. Implement the Play Button

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: 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 obfuscated text.

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

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