We have completed implementation of Navigation Drawer and Routing in the previous article. In this article we will see implementation of Dynamic Drawer List, Stateful Widgets, Forms and Validation. see video 2.01 for Final snapshot

video 2.01 Dynamic Drawer List, Forms and Validation

Index

Flutter 1: Navigation Drawer and Routing

Flutter 2: Dynamic Drawer List, Stateful Widgets, Forms and Validation

In previous article, we changed the lib/main.dart itself. But it will be tedious to do all the work in single file for large projects. so I have divided them into respective files. And below is my lib directory(image 2.02).

image 2.02 split files

We will focus on keeper_drawer.dart and label_form.dart .

Tip: I recommend you to checkout my Github Repo at https://github.com/Aravind99/keeper.

2.1 Dynamic Drawer List

Let’s see what lies in KeeperDrawer.

snippet 2.01 Dynamic Drawer List

On line no. 11 KeeperDrawer constructor accepts the labels as a List<String>. So, that we can iterate through them to build our dynamic drawer list. visit here(https://www.dartlang.org/resources/dart-tips/dart-tips-ep-11) to know more about constructor viz. explained by Seth Ladd.

Then in KeeperDrawer#_buildLabelWidgets (see line no. 112, snippet 2.01), we iterate through the labels passed to constructor to build List<Widget> .

In KeeperDrawer#_buildDrawerList we add widgets to build our list.

2.2 Stateful Widgets

A widget that has mutable state.

State is information that

(1) can be read synchronously when the widget is built.

(2) Might change during the lifetime of the widget. It is the responsibility of the widget implementer to ensure that the State is promptly notified when such state changes, using State.setState . Refer docs here.

Lets’s see LabelForm Stateful Widget

snippet 2.02 Label Form

we will discuss on Keypoints rather how it is implemented.

_scaffoldKey (a specific widget key for Scaffold in #build at line no. 23)

Defining key for the widget provides the following features or may be more.

i. currentContext

_scaffoldKey has a field named currentContext,with which you can access current context of the Scaffold widget and perform operations which are based on context.

Example:

Navigator.of(_scaffoldKey.currentContext).pushNamed(routeName);

ii. currentState

_scaffoldKey has a field named currentState, with the use of currentState we can show Snackbar or close Drawers and many more.

Example:

a. _scaffoldKey.currentState.openDrawer()

b. _scaffoldKey.currentState.closeDrawer()

2. initState() (must call super.initState())

The framework will call this method exactly once for each State object it creates.

Override this method to perform initialization of objects that are relevent to State of the given Widget in Widget tree.

3. setState()

Notify the widget that the State of objects changes in setState callback.

_editLabelAt(index) {

setState(() {

_updateController.clear(); // clears text and sets to empty text

updateError = null; // error set to null

_buildLabels(index); // Rebuild the labels

});

}

4. dispose()

Called when object is removed from widget tree that never build again.

2.3 Forms and Validation

Here I have used only TextField . To build complex forms with validators(as callbacks) consider Form widget, to know more you can visit https://flutter.io/widgets/input/.

I have created methods for CRUD operations to update the label value. Since, labels is a Global Variable (not recommended for use in production) we can directly change it’s values. Based on index(replaced with SQL id in future) we are performing CRUD operations. The code snippet 2.02 can be improved by using ListTile as Stateful Widget by which we can toggle between Text and TextField widget. Using ListTile Stateful widget we can avoid iterate through each label in LabelForm#_buildLabels.

To apply theme for any widget, pass the target widget as a child to Theme widget.

new Theme(

data: new ThemeDate(...),

child: new Text(...)

)

Summary

Prompting user what went wrong while doing CRUD operations makes the app intuitive and user friendly. Dynamic Drawer List provides easy way to filter out content which is most frequently done by user.

In next article we will implement SQLite Database using sqflite plugin and Form Widget.

If you have any suggestions, improvements or found any mistakes do drop a comment.

If you like the article please click the clap 👏 button as a appreciation.