2024 最新 Flutter 教學 - Flutter 終極指南: 連結
從零開始學 Dart 程式設計: 連結
Flutter 程式設計入門實戰 30 天: 連結
哈囉~大家好,我是 KT ,今天【iT邦幫忙鐵人賽】挑戰第二十二天,KT 將為大家來介紹,Drawer 抽屜頁面導航元件。
可以從側邊欄彈出功能選單,也可以顯示用戶相關資訊,如:大頭照、用戶名稱和 mail等。
在 lib 資料夾下新增一個 page 資料夾,在 page 此資料夾,新增三個簡單頁面,畫面中間顯示該頁面名稱,無任何功能,單純呈現是否切換到該頁面。
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("首頁"),
);
}
}
import 'package:flutter/material.dart';
class ChatPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("聊天室頁"),
);
}
}
import 'package:flutter/material.dart';
class AccountPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text("個人資料頁"),
);
}
}
import 'package:flutter/material.dart';
import 'account.dart';
import 'chat.dart';
import 'home.dart';
void main() => runApp(
new MaterialApp(
home: new MyApp(),
),
);
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
//目前選擇頁索引值
int _currentIndex = 0; //預設值
final pages = [HomePage(), ChatPage(), AccountPage()];
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('HKT線上教室'),
),
drawer: Drawer(
child: ListView(
children: <Widget>[
//設定用户名稱
UserAccountsDrawerHeader(
accountName: new Text(
"HKT線上教室",
),
//設定Email
accountEmail: new Text(
"thishkt@gmail.com",
),
//設定大頭照
currentAccountPicture: new CircleAvatar(
backgroundImage: new AssetImage("assets/images/logo.png"),
),
),
//選單
ListTile(
leading: new CircleAvatar(child: Icon(Icons.chrome_reader_mode)),
title: Text('從零開始學 Java 程式設計'),
onTap: () {
_onItemClick(0);
},
),
ListTile(
leading: new CircleAvatar(child: Icon(Icons.code)),
title: Text('從零開始學 Kotlin 程式設計'),
onTap: () {
_onItemClick(1);
},
),
ListTile(
leading: new CircleAvatar(child: Icon(Icons.computer)),
title: Text('從零開始學 Flutter 程式設計'),
onTap: () {
_onItemClick(2);
},
),
],
),
),
body: pages[_currentIndex],
);
}
void _onItemClick(int index) {
setState(() {
_currentIndex = index;
Navigator.of(context).pop();
});
}
}
那今天【iT邦幫忙鐵人賽】就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉!!!掰掰~
HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com