Amazon.co.uk Widgets

This is the eighth part of a journey to build and publish a Flutter™ based app using Material Components for Flutter (MDC-Flutter).

Adding all the Material Components widgets to our app page

Lets finish exploring the rest of the components. Then we can move on with a view to making our app real rather than a non functional demonstration swiss army knife type app.

  • Progress indicators
  • Selection controls (Radio buttons, checkboxes and switches)
  • SnackBar via a Global Key
  • Bottom Navigation Bar
  • Text fields

Progress indicators

Progress indicators express an unspecified wait time or display the length of a process, in a way that lets the end user know that the app is doing something and hasnt simply stopped.

The first kind of progress indicator, LinearProgressIndicator, shows progress along a line. There are two variations, 'Determinate' and 'Indeterminate'. Determinate progress indicators have a specific value at each point in time, and indeterminate progress indicators do not. The second kind is called a CircularProgressIndicator, and shows progress along a circular arc. Below is the text for this expansion tile. Note the setting of backgroundColor: Colors.primaries[16], which gives the contrasting colour but is not from the theme. Of course these progress indicators are not wired up to any functionality yet


 ExpansionTile(
  leading: Icon(Icons.refresh),
  title: Text('Progress Indicators'),
  subtitle: Text('LinearProgressIndicator, CircularProgressIndicator'),
  children: [
    Text(
      'Linear',
      style: Theme.of(context).textTheme.bodyText1,
    ),
      LinearProgressIndicator(
        backgroundColor: Colors.primaries[16],
      value: 0.8,
    ),
    Text(
      'Circular',
      style: Theme.of(context).textTheme.bodyText1,
    ),
    CircularProgressIndicator(
      backgroundColor: Colors.primaries[16],
    ),
  ],
),

Flutter Material Components Progress indicators   Flutter Material Components Progress indicators

They look fine and very Material!

Selection controls (Radio buttons, checkboxes and switches)

These are the out of the box widgets for selection control.


  ExpansionTile(
  leading: Icon(Icons.radio_button_checked),
  title: Text('Selection controls'),
  subtitle: Text('RadioListTile,'),
  children: [
    Text(
      'RadioListTile',
      style: Theme.of(context).textTheme.bodyText1,
    ),
      RadioListTile(
        title: const Text('A radio button in a RadioListTile'),
        value: true,
        onChanged: null,
        groupValue: null,
      ),
    Text(
      'CheckboxListTile',
      style: Theme.of(context).textTheme.bodyText1,
    ),
    CheckboxListTile(
        title: Text("A checkbox in a CheckboxListTile"),
        value: true,
        onChanged: null),
    Text(
      'SwitchListTile',
      style: Theme.of(context).textTheme.bodyText1,
    ),
    SwitchListTile(
        title: Text("A switch in a SwitchListTile"),
        value: true,
        onChanged: null)
  ],
),

Flutter Material Components Progress indicators - iOS   Flutter Material Components Progress indicators - android

Following the same approach a simple Slider can be added.

Flutter Material Components Progress indicators - iOS   Flutter Material Components Slider - android

These look identical on iOS and Android which may not be desirable, and are not yet picking up theme colours. Theres a lot more that can be done here for good looking themed contols in Flutter.

SnackBar via a Global Key

A SnackBar is a lightweight message with an optional action which briefly displays at the bottom of the screen. According to the documentation you can display a snack bar, calling Scaffold.of(context).showSnackBar(), passing an instance of SnackBar that describes the message and optionally specifying a duration.

For this demo app this Scaffold.of(context) would not work for me as Im still just learning. Instead, we can create a GlobalKey to uniquely identify the Scaffold to provide access to other objects that are associated with it.

Hat tip to this Medium article by Katarina Sheremet which also explains why this is a bad idea for production apps.

//
class FirstScreen extends StatelessWidget {
  final GlobalKey _scaffoldKey = new GlobalKey();
//
...
 return Scaffold(
      key: _scaffoldKey,
...
_scaffoldKey.currentState.showSnackBar(
  SnackBar(
    content: Text('Hello SnackBar'),
    duration: Duration(seconds: 3),
  ));

Flutter Material Components SnackBar   Flutter Material Components SnackBar

Looks good.

Bottom Navigation Bar

Lets add a tab bar at the bottom of the app for selecting among a small number of views. BottomNavigationBar is a built in complent which consists text labels and/or icons, to provide quick navigation between the top-level views of an page.


bottomNavigationBar: BottomNavigationBar(
    currentIndex: 0, // this will be set when a new tab is tapped
    items: [
      BottomNavigationBarItem(
        icon: new Icon(Icons.new_releases),
        title: new Text('New'),
      ),
      BottomNavigationBarItem(
        icon: new Icon(Icons.track_changes),
        title: new Text('Track'),
      ),
      BottomNavigationBarItem(
          icon: Icon(Icons.person_add), title: Text('Add'))
    ]
),

It doesnt really do anything yet, and it isn't themed. But already it provides some additional structure to the screen.

Flutter Material Components Bottom Navigation Bar - iOS   Flutter Material Components Bottom Navigation Bar - android

Text fields

Flutter has lovely text field support. It has recently been the subject of an extensive redesign and looks beautiful and works well on mobile devices.


ExpansionTile(
  leading: Icon(Icons.input),
  title: Text('Text fields'),
  subtitle: Text('TextField'),
  children: [
    Text(
      'obscureText for example for passwords',
      style: Theme.of(context).textTheme.bodyText1,
    ),
    TextField(
      obscureText: true,
      decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: 'Password',
      ),
    ),
  ],
),

Flutter Material Components Text fields - iOS   Flutter Material Components Text fields - android

That concludes the part of this journey looking at the basics of each of the main listed and documented Material Components for Flutter (MDC-Flutter). Lets turn now to how to make this into a useful app and publish it in the App Store and Google Play.