導(dǎo)航是大多數(shù)app應(yīng)用的重要組成方面。挑選pinterest.com的設(shè)計(jì)來完成開發(fā)

image.png

flutter create texty_navigation
cd texty_navigation

本文代碼會(huì)完全寫在lib/main.dart文件中。清除原有代碼后加入以下行

import 'package:flutter/material.dart';

void main() => runApp();

應(yīng)用采用材料設(shè)計(jì)時(shí)需要導(dǎo)入material的包替梨。定義main(主)函數(shù)設(shè)用runApp組件啟動(dòng)應(yīng)用。增加以下代碼至runAPP組件中

MaterialApp(
      title: 'Texty Navigation',
      theme: new ThemeData(
        primaryColor: Color.fromRGBO(55, 113, 170, 1.0),
      ),
      home: new TextyNavigation(),
)

MaterialApp組件定義了應(yīng)用程序使用材料設(shè)計(jì)舒帮，該組件包含兩個(gè)屬性：title屬性用來在設(shè)備上鑒別app儿惫，theme屬性定義應(yīng)用程序組件的顏色。定義一個(gè)primaryColor屬性列荔，值為rgba(55,113,170,1);home屬性定義app默認(rèn)路由敬尺。
創(chuàng)建狀態(tài)為statefulWidget的TextyNavigation()函數(shù)，返回Scaffold組件贴浙。

class TextyNavigation extends StatefulWidget {
  @override
  _TextyNavigationState createState() => _TextyNavigationState();
}

class _TextyNavigationState extends State<TextyNavigation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(...);
  }
}

Scaffold繼承了基本的材料設(shè)計(jì)的布局砂吞，用來創(chuàng)建應(yīng)用的標(biāo)題欄、抽屜(側(cè)邊菜單/導(dǎo)航)崎溃，底部sheet頁等蜻直。本文僅需要AppBar和抽屜。修改代碼片段如下

class TextyNavigation extends StatefulWidget {
  @override
  _TextyNavigationState createState() => _TextyNavigationState();
}

class _TextyNavigationState extends State<TextyNavigation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Texty Navigation"),
      ),
      drawer: Drawer(
        child: Container(
          decoration: BoxDecoration(color: Color.fromRGBO(55, 113, 170, 1.0)),
        ),
      ),
    );
  }
}

scaffold的AppBar組件顯示水平banner在其中設(shè)置title屬性值為Text("Texty Navigation")。drawer屬性增加抽屜組件概而，默認(rèn)水平顯示在scaffold組左邊唤殴，隱藏情況下通過滑動(dòng)設(shè)備屏幕顯示。Drawer中包含一個(gè)Container的子組件到腥，通過BoxDecoration組件設(shè)置顏色悼潭。BoxDecoration被用來繪制或修飾四邊形邊框，如：定義邊線撤嫩、增加圖像生年、繪制角度等。
運(yùn)行程序如下圖

image.png

flutter:
  assets:
   - image-name.png

創(chuàng)建makeProfileAvatar()函數(shù)供組件profile使用霸饲。

  makeProfileAvatar() {
    return Column(
      children: <Widget>[
        // SizedBox(height: 10.0),
        CircleAvatar(
          radius: 60.0,
          backgroundImage: new AssetImage('assets/shubie2.png'),
        ),
        SizedBox(height: 20.0),
        Center(
          child: new Text("Shuaib Afegbua",
              style: new TextStyle(
                  fontSize: 20.0,
                  color: Colors.white,
                  fontWeight: FontWeight.bold)),
        ),
        Center(
          child: new Text("Abuja, Nigeria",
              style: new TextStyle(
                  fontSize: 18.0,
                  color: Colors.white70,
                  fontWeight: FontWeight.normal)),
        )
      ],
    );
  }

該組件通過Column組件包含了多個(gè)組件厚脉，包括CircleAvatar用來顯示簡介照片傻工，SizedBox組件用來加組件間間距，高度設(shè)為10.0鸯匹，兩個(gè)Center組件居中顯示名字和地址泄伪。
接著創(chuàng)建菜單項(xiàng)組件臂容，使用icon圖標(biāo)和文本做為參數(shù)；返回一個(gè)Column組件糟秘。

 Column makeMenuItem(icon, title) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisSize: MainAxisSize.min,
      verticalDirection: VerticalDirection.down,
      children: <Widget>[
        Center(
            child: Icon(
          icon,
          size: 80.0,
          color: Colors.white,
        )),
        SizedBox(height: 10.0),
        new Center(
          child: new Text(title,
              style: new TextStyle(
                  fontSize: 18.0,
                  color: Colors.white,
                  fontWeight: FontWeight.bold)),
        )
      ],
    );
  }

代碼相當(dāng)簡潔尿赚，該組件返回Children多組件：Center顯示菜單圖標(biāo)，SizedBox和Center組件顯示菜單標(biāo)簽悲龟。對icon和字體設(shè)置大小尺寸冰寻。
使用Flutter有GridView組件在網(wǎng)格中放入菜單項(xiàng)。創(chuàng)建menuGrid()組件返回菜單項(xiàng)的GridView.count斩芭，代碼如下：

  GridView menuGrid() {
    return GridView.count(
      crossAxisCount: 2,
      children: <Widget>[
        makeMenuItem(Icons.message, "Messages"),
        makeMenuItem(Icons.phone_forwarded, "Calls"),
        makeMenuItem(Icons.dialpad, "Dial"),
        makeMenuItem(Icons.contacts, "Contacts"),
        makeMenuItem(Icons.more_horiz, "More"),
        makeMenuItem(Icons.settings, "Settings")
      ],
    );
  }

設(shè)置crossAxisCount值為2顯示兩列column網(wǎng)絡(luò)划乖。調(diào)用makeMenuItem(Icon,text)加入Children組件中.
最后把makeProfileAvatar()和menuGrid()方法加入抽屜中。修改Scaffold組件Drawer抽屜child組件為Container琴庵，Container的child為Column，Column的children中使用Expanded包含Row儿礼、Column或Flex贪庙，flex元素產(chǎn)生children中組件的隔離空間止邮。如下代碼

    return Scaffold(
      appBar: AppBar(
        title: Text("Texty Navigation"),
      ),
      drawer: Drawer(
        child: Container(
          padding: EdgeInsets.only(top: 60.0),
          decoration: BoxDecoration(color: Color.fromRGBO(55, 113, 170, 1.0)),
          child: Column(
            children: <Widget>[
              Expanded(
                child: makeProfileAvatar(),
                flex: 1,
              ),
              Expanded(
                child: menuGrid(),
                flex: 3,
              )
            ],
          ),
        ),
      ),
    );

保存并運(yùn)行代碼导披，如下圖

image.png