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(), ], ) ), ), ); } }
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(), ], ), ); } }
Output:
It should be noted that the interface may conflict when the phone is rotated.