iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
Mobile Development

Flutter 從零開始,Android、iOS一次搞定,重新挑戰。系列 第 7

[Day7] Flutter Drawer 側邊導覽列。

我想在我的待辦清單加上群組的概念,讓我可以加上代辦清單加上群組功能。
讓我們可以分類我們的選項。

未來也有想做使用者登入,與同步資料相關功能,所以把使用者畫面留在側欄。

新增檔案在 lib/widgets/app_drawer.dart

import 'package:flutter/material.dart';

class AppDrawer extends StatefulWidget {
  @override
  _AppDrawerState createState() => _AppDrawerState();
}

class _AppDrawerState extends State<AppDrawer> {
  final List<Map<String, dynamic>> group = [
    {
      'icon': Icons.important_devices,
      'name': 'important',
      'color': Colors.redAccent,
    },
    // ...
  ];

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          Container(
            child: UserAccountsDrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blueGrey,
              ),
              accountName: Text("Kevin Fan"),
              accountEmail: Text("kevinypfan@gmail.com"),
              currentAccountPicture: CircleAvatar(
                backgroundImage: NetworkImage(
                  "https://...",
                ),
              ),
            ),
          ),
          MediaQuery.removePadding(
            context: context,
            removeTop: true,
            child: Expanded(
              child: ListView.builder(
                itemCount: group == null ? 0 : group.length,
                itemBuilder: (ctx, i) {
                  return ListTile(
                    leading: Icon(group[i]['icon']),
                    title: Text(
                      group[i]['name'],
                      style: TextStyle(
                        color: group[i]['color'],
                        fontSize: 16,
                      ),
                    ),
                    onTap: () {},
                  );
                },
              ),
            ),
          )
        ],
      ),
    );
  }
}

渲染截圖:

把源碼附上:https://github.com/kevinypfan/ithome-todo-project


上一篇
[Day6] Flutter 將我們的專案全面套上 Provider。
下一篇
[Day8] Flutter 移動端儲存方案 SQLite。
系列文
Flutter 從零開始,Android、iOS一次搞定,重新挑戰。12
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言