[Flutter] 使用 Drawer 元件設定側邊欄

Last Updated on 2021-05-18 by Clay

在使用 Flutter 開發 App 的時候，有時我們會希望能有個『側邊欄』來方便我們進行各式各樣的設定：

像這樣。

那我今天就簡單紀錄一下該怎麼使用這樣子的側邊欄。

若是想要參考官方的教學，可以參考這個網站： https://flutter.dev/docs/cookbook/design/drawer

Drawer

若要直接使用 Flutter 設定的側邊欄，我們只需要在 Scaffold 當中設定 drawer 即可。

設置的順序是使用一個 Column 元件建立縱向的元件排序（關於 Column 的教學可以參考我之前寫過的《Flutter 當中的 Column 跟 Row 兩種版面模式》這篇），先設定 “DrawerHeader”，再設定各種想要的其他元件，比如按鈕、文字……。

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: [
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.orange,
                ),
                child: ListView(
                  children: [
                    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:

點擊左上角的選項欄位：

下面其實就是相當單純的 ListTile 元件。(關於 ListView 這樣的元件可以參考我之前寫過的《在 Flutter 中使用 ListView 元件建立清單》)

自己實作側邊欄

不過，其實上面這種『點擊展開側邊欄』的設計並不是我想要的，我想的是打從一開始就位於側邊的各種選項。找了找沒有找到我想要的模組（也許 mobile_sidebar 有點類似我想要的界面），最後，決定自己使用 Container 來寫寫看。

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: [
          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:

說實在的，這樣的側邊欄好像還行嘛。當然，我覺得要讓手機翻轉才常駐比較好。

[Flutter] 使用 Drawer 元件設定側邊欄

Drawer

自己實作側邊欄

分享此文：

Leave a Reply取消回覆