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.

Setup the Audio Widget Pro

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.

Break down the design and interaction of our second reusable widget which is an audio widget and start building it.

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.

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

Reviews

Comments