[Flutter]Drawer

閱讀時間約 3 分鐘
class MyApp extends StatefulWidget {
@override
myAppState createState() => myAppState();
}

class myAppState extends State<MyApp> {
//目前選擇頁索引值
int currentIndex = 0; //預設值

final pages = [One(), Two(), Three()];

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('DrawerDemo'),
),
drawer: Drawer(
child: ListView(
children: <Widget>[
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text('Drawer Header'),
),
//選單
ListTile(
leading: new CircleAvatar(child: Icon(your_icon)),
title: Text('第一頁'),
onTap: () {
itemClick(0);
},
),
ListTile(
leading: new CircleAvatar(child: Icon(your_icon)),
title: Text('第二頁'),
onTap: () {
itemClick(1);
},
),
ListTile(
leading: new CircleAvatar(child: Icon(your_icon)),
title: Text('第三頁'),
onTap: () {
itemClick(2);
},
),
],
),
),
body: pages[currentIndex],
);
}

void itemClick(int index) {
setState(() {
currentIndex = index;
Navigator.of(context).pop();
});
}
}




8會員
119Content count
嗨,我是一名程式設計師,會在這分享開發與學習紀錄。
留言0
查看全部
發表第一個留言支持創作者!
小黑與程式的邂逅 的其他內容
class MyApp extends StatelessWidget { final List<Tab> myTabs = <Tab>[ Tab(text: '第一頁'), Tab(text: '第二頁'), Tab(text: '第三頁'), ]; fina
屬性 items:底部頁面導航項目。 currentIndex:目前頁面。 onTap:點擊按鈕後觸發事件。 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Te
用來顯示訊息提示用戶。 屬性 title:訊息對話框視窗標題 content:訊息對話框視窗內文 actions:訊息對話框視窗,按鈕觸發事件 AlertDialog( title: Text('Alert'), content: const Text('Alert
屬性 onPressed:按下後觸發的方法。 elevation:陰影大小值。 foregrnundColor:前景色。 foregroundColor: Colors.amber, backgroundColor:背景色。 backgroundColor: Colors.red,
下一頁 沒傳資料 Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage())); 有傳資料 Navigator.push(context, MaterialPageRoute(builder: (c
方法 asset:載入此APP指定資料夾內的資源圖片。 Image.asset('assets/images/logo.png') file:載入手機指定路徑位置圖片。 Image.file('your_image_path') network:載入網路指定網址圖片。 Image
class MyApp extends StatelessWidget { final List<Tab> myTabs = <Tab>[ Tab(text: '第一頁'), Tab(text: '第二頁'), Tab(text: '第三頁'), ]; fina
屬性 items:底部頁面導航項目。 currentIndex:目前頁面。 onTap:點擊按鈕後觸發事件。 Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Te
用來顯示訊息提示用戶。 屬性 title:訊息對話框視窗標題 content:訊息對話框視窗內文 actions:訊息對話框視窗,按鈕觸發事件 AlertDialog( title: Text('Alert'), content: const Text('Alert
屬性 onPressed:按下後觸發的方法。 elevation:陰影大小值。 foregrnundColor:前景色。 foregroundColor: Colors.amber, backgroundColor:背景色。 backgroundColor: Colors.red,
下一頁 沒傳資料 Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage())); 有傳資料 Navigator.push(context, MaterialPageRoute(builder: (c
方法 asset:載入此APP指定資料夾內的資源圖片。 Image.asset('assets/images/logo.png') file:載入手機指定路徑位置圖片。 Image.file('your_image_path') network:載入網路指定網址圖片。 Image
你可能也想看
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
今天來寫點FLutter的筆記吧 如果我們想要在APP中限制使用者的畫面顯示方向,不支持使用者橫放造成畫面佈局異常,或是想要在全螢幕顯示強制變橫向顯示,該怎麼做呢?
Thumbnail
前一篇我們介紹了遊戲模板的基本架構,在這篇文章中會記錄目前的開發進度,主要先把遊戲核心邏輯寫完,再慢慢完成其他功能,在這系列的文章中,我不會太聚焦於寫程式的部分,如果想看程式內容的話,可以到我的 github 上看喔,讓我們開始吧!
Thumbnail
前一篇說到遊戲開發的契機以及介紹了開發工具與官方提供的遊戲模板,在這一篇文章中,會開始進行遊戲的設計與製作,目標是上架到 Google Play 與 App Store 平台上,讓我們開始吧!
Thumbnail
前言 當今時代,遊戲已經不再只是單純的娛樂,更成為人們生活中不可或缺的一部分。隨著技術的發展,遊戲也從單機遊戲轉變成網路遊戲、手機遊戲、虛擬實境(VR)遊戲等多種形式。Flutter 作為一種跨平台的開發框架,正逐漸成為開發遊戲的一個重要工具。本系列文章將以「輕鬆入門 Flutter 遊戲開發」為題
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
因為自己最近迷上了釣魚,但卻常常苦於不知道該去哪裡釣魚才能安全又有魚,因此想做個讓大家可以分享自己釣點以及釣況的App,讓大家都能找到適合自己的地方釣魚! 此篇是在介紹專案基本架構以及獲取使用者的地理位置。
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
今天來寫點FLutter的筆記吧 如果我們想要在APP中限制使用者的畫面顯示方向,不支持使用者橫放造成畫面佈局異常,或是想要在全螢幕顯示強制變橫向顯示,該怎麼做呢?
Thumbnail
前一篇我們介紹了遊戲模板的基本架構,在這篇文章中會記錄目前的開發進度,主要先把遊戲核心邏輯寫完,再慢慢完成其他功能,在這系列的文章中,我不會太聚焦於寫程式的部分,如果想看程式內容的話,可以到我的 github 上看喔,讓我們開始吧!
Thumbnail
前一篇說到遊戲開發的契機以及介紹了開發工具與官方提供的遊戲模板,在這一篇文章中,會開始進行遊戲的設計與製作,目標是上架到 Google Play 與 App Store 平台上,讓我們開始吧!
Thumbnail
前言 當今時代,遊戲已經不再只是單純的娛樂,更成為人們生活中不可或缺的一部分。隨著技術的發展,遊戲也從單機遊戲轉變成網路遊戲、手機遊戲、虛擬實境(VR)遊戲等多種形式。Flutter 作為一種跨平台的開發框架,正逐漸成為開發遊戲的一個重要工具。本系列文章將以「輕鬆入門 Flutter 遊戲開發」為題
Thumbnail
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
Thumbnail
因為自己最近迷上了釣魚,但卻常常苦於不知道該去哪裡釣魚才能安全又有魚,因此想做個讓大家可以分享自己釣點以及釣況的App,讓大家都能找到適合自己的地方釣魚! 此篇是在介紹專案基本架構以及獲取使用者的地理位置。
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面