Flutter:底部導航列換頁(Bottom Navigation)

How to use Flutter to build an app with bottom navigation

Step 1. 定義進入點

開啟lib/main.dart。刪除所有程式碼,在首行寫下:

import 'package:flutter/material.dart';

新增Main方法:

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

添加以下方法

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My Flutter App',
home: Home(),
);
}
}

上面程式新增了叫作 App 的stateless widget。
並且設定home 作為APP的首頁屬性,我們設定 Home作為首個出現的畫面

Step 2. 建立home頁面

lib資料夾中,新增home_widget.dart

import 'package:flutter/material.dart';class Home extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomeState();
}
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Flutter App'),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 0, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
BottomNavigationBarItem(
icon: new Icon(Icons.mail),
title: new Text('Messages'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
Title: Text('Profile')
)
],
),
);
}
}

回到main.dart,在第二行寫下:

import 'home_widget.dart';

APP目前的樣子:

Step 3. 準備Navigation

回到 home_widget.dart

class _HomeState extends State<Home> {
int _currentIndex = 0;
final List<Widget> _children = [];
...
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Flutter App'),
),
body: _children[_currentIndex], // new
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped, // new
currentIndex: _currentIndex, // new
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('Messages'),
),
new BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('Profile')
)
],
),
);
}

新增的程式用// new來表示

Step 4. 處理 navigation

_HomeState 的底部新增以下內容:

void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}

Step 5. 新增child widgets

在lib資料夾中新增placeholder_widget.dart. 這個檔案負責管理背景顏色(以展示我們確實切換到不同的頁面。

import 'package:flutter/material.dart';

class PlaceholderWidget extends StatelessWidget {
final Color color;

PlaceholderWidget(this.color);

@override
Widget build(BuildContext context) {
return Container(
color: color,
);
}
}

回到 home_widget.dart 新增以下內容:

import 'placeholder_widget.dart';

_children中新增下面list內容

class _HomeState extends State<Home> {
int _currentIndex = 0;
final List<Widget> _children = [
PlaceholderWidget(Colors.white),
PlaceholderWidget(Colors.deepOrange),
PlaceholderWidget(Colors.green)
];
...

Written by

Machine Learning / Deep Learning / Python / Flutter cakeresume.com/yanwei-liu

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store