Flutter: Creating Drawers

Flutter: Creating Drawers

Flutter is a mobile App SDK by Google which helps in creating modern mobile apps for iOS and Android using a single(almost) code base. It’s a new entrant in the cross platform mobile application development and unlike other frameworks like React Native, it doesn’t use JavaScript but DART as a Programming Language.

It’s highly recommended to read my first post “Flutter: From Zero To Comfortable” to get a good sense of how Flutter widgets work and what’s going on here in this post.

What is a Drawer?

A drawer is an invisible side screen which generally contain menu items and occupies around half of the screen when displayed. If you’ve ever used apps like Twitter and/or GMail, you already know what I’m talking about.

Creating Empty Drawer

Let’s first create an empty drawer. As with other flutter applications with material design, we’ll be creating a basicMaterialApp , the home of which shall contain a Scaffold with Drawer

Here is how the code for basic MaterialApp shall look like

class MyApp extends StatelessWidget {
  @override
  Widget build (BuildContext ctxt) {
    return new MaterialApp(
      home: new DWidget()
    );
  }
}

The DWidget here is the widget which will contain drawers. It should be noted that drawers are part of Scaffold along with appBar and body . Once we add drawer to the Scaffold, it generates a three line menu item on the top left corner of the application bar, which on clicking displays the drawer screen.

Here is how the basic code shall look like.

class DWidget extends StatelessWidget {
  @override
  Widget build (BuildContext ctxt) {
    return new Scaffold(
      drawer: new Drawer(
        child: new Text("\n\n\nDrawer Is Here"),
      ),
      appBar: new AppBar(
        title: new Text("Drawer Demo"),
      ),
      body: new Text("Drawer Body"),
    );
  }
}

This will create an app with a bare minimum drawer as displayed below.

As you might have noticed that drawer, takes child: and not children: , which means at any point of time we can have only one widget inside drawer.