[Flutter] Use Drawer component to set a sidebar

If we are developing an App by Flutter, maybe sometimes we can build a simple sidebar to let users configure their settings.

Just like this.

So today I will record how to use Drawer component in Flutter to make this UI.

If you want to read some official document, you can refer:

那我今天就簡單紀錄一下該怎麼使用這樣子的側邊欄。 https://flutter.dev/docs/cookbook/design/drawer

Drawer

Building a sidebar is so easy in Flutter; We just need to set a drawer component is Scaffold.

My setting’s order is build by a column layout ([Flutter] How to use Column and Row to design layout):

DrawerHeader
ListView
…
More component you want to show

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          title: Text('Drawer Test'),
        ),
        drawer: Drawer(
          child: Column(
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.orange,
                ),
                child: ListView(
                  children: <Widget>[
                    Text('Personal Information', textAlign: TextAlign.center,),
                  ],
                ),
              ),
              ListTile(
                title: Text('Name'),
                leading: Icon(Icons.people),
              ),
              Divider(),
              ListTile(
                title: Text('Age'),
                leading: Icon(Icons.calendar_view_day),
              ),
              Divider(),
            ],
          )
          ),
        ),
      );
  }
}

import ‘package:flutter/material.dart’;
import ‘package:flutter/rendering.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          title: Text(‘Drawer Test’),
        ),
        drawer: Drawer(
          child: Column(
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.orange,
                ),
                child: ListView(
                  children: <Widget>[
                    Text(‘Personal Information’, textAlign: TextAlign.center,),
                  ],
                ),
              ),
              ListTile(
                title: Text(‘Name’),
                leading: Icon(Icons.people),
              ),
              Divider(),
              ListTile(
                title: Text(‘Age’),
                leading: Icon(Icons.calendar_view_day),
              ),
              Divider(),
            ],
          )
          ),
        ),
      );
  }
}

Output:

Click the left-top option icon:

As you can see, we show a simple sidebar in our main page and do not need to navigate to any other page.

Or create a sidebar by yourself

But if you want a sidebar no need to click, you can create it by Container component. (or try mobile_sidebar package)

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          title: Text('Drawer Test'),
        ),
        body: sideBar(),
      ),
    );
  }
}


class sideBar extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width/5*2,
      color: Colors.orange,
      child: Column(
        children: <Widget>[
          Text('Personal Information', textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white)),
          Divider(),
          ListTile(
            title: Text('Name'),
            leading: Icon(Icons.people),
          ),
          Divider(),
          ListTile(
            title: Text('Age'),
            leading: Icon(Icons.calendar_view_day),
          ),
          Divider(),
        ],
      ),
    );
  }
}

import ‘package:flutter/material.dart’;
import ‘package:flutter/rendering.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.orange,
          title: Text(‘Drawer Test’),
        ),
        body: sideBar(),
      ),
    );
  }
}


class sideBar extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width/5*2,
      color: Colors.orange,
      child: Column(
        children: <Widget>[
          Text(‘Personal Information’, textAlign: TextAlign.center,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white)),
          Divider(),
          ListTile(
            title: Text(‘Name’),
            leading: Icon(Icons.people),
          ),
          Divider(),
          ListTile(
            title: Text(‘Age’),
            leading: Icon(Icons.calendar_view_day),
          ),
          Divider(),
        ],
      ),
    );
  }
}

Output:

It should be noted that the interface may conflict when the phone is rotated.

[Flutter] Use Drawer component to set a sidebar

Drawer

Or create a sidebar by yourself

Share this:

Leave a ReplyCancel reply