[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();
});
}
}




留言
avatar-img
留言分享你的想法!
avatar-img
小黑與程式的邂逅
8會員
123內容數
嗨,我是一名程式設計師,會在這分享開發與學習紀錄。
2023/12/28
解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
2023/12/28
解析成List List items=json.decode(jsonStr); print(items[0]["your_key"]); 解析成Map Map<String, dynamic> user = json.decode(json); print('${user['your_k
Thumbnail
2023/12/26
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。 連線 final channel = IOWebSocketChannel.connect('wss://echo.websocket.events'); 接收 StreamBui
Thumbnail
2023/12/26
這邊會使用WebSocketChannel去與http://www.websocket.org做連線。 連線 final channel = IOWebSocketChannel.connect('wss://echo.websocket.events'); 接收 StreamBui
Thumbnail
2023/12/26
Dio是一個Dart Http請求庫,支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。 加入 dependencies: dio: ^x.x.x #请使用pub上的最新版本 使用 GET Response response;
Thumbnail
2023/12/26
Dio是一個Dart Http請求庫,支援Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、逾時等。 加入 dependencies: dio: ^x.x.x #请使用pub上的最新版本 使用 GET Response response;
Thumbnail
看更多
你可能也想看
Thumbnail
嶄新的台灣獨立調香師品牌Sunkronizo ,這個名稱源自希臘語「同步」的意思。讓香氛不單純只是氣味調製,更是個人風格的展現與靈魂意志延伸的一種溝通語言。 很適合接下來年底聖誕佳節送禮的試香組,以一星期中的日子來為全系列香氛產品命名, 是品牌創立後首個推出全系列概念作品...
Thumbnail
嶄新的台灣獨立調香師品牌Sunkronizo ,這個名稱源自希臘語「同步」的意思。讓香氛不單純只是氣味調製,更是個人風格的展現與靈魂意志延伸的一種溝通語言。 很適合接下來年底聖誕佳節送禮的試香組,以一星期中的日子來為全系列香氛產品命名, 是品牌創立後首個推出全系列概念作品...
Thumbnail
根據美國電影協會(MPA)主辦的「串流服務如何推動臺灣創意經濟」論壇內容,深入探討串流平臺對臺灣影視產業的影響、數據分析、政府政策建議、內容國際化策略,以及臺灣與「韓流」的差距。文章提出 awwrated 在串流生態系中的潛在角色,強調數據、策略與自信是臺灣影視產業發展的關鍵。
Thumbnail
根據美國電影協會(MPA)主辦的「串流服務如何推動臺灣創意經濟」論壇內容,深入探討串流平臺對臺灣影視產業的影響、數據分析、政府政策建議、內容國際化策略,以及臺灣與「韓流」的差距。文章提出 awwrated 在串流生態系中的潛在角色,強調數據、策略與自信是臺灣影視產業發展的關鍵。
Thumbnail
本文探討串流平臺(VOD)如何徹底改變好萊塢和臺灣影視產業的生態。從美國電影協會(MPA)的數據報告,揭示串流服務在臺灣的驚人普及率與在地內容的消費趨勢。文章分析國際作品如何透過在地化元素開拓新市場。同時,作者也擔憂政府過度監管可能扼殺臺灣影視創新自由,以越南為鑑,呼籲以開放態度擁抱串流時代的新機遇
Thumbnail
本文探討串流平臺(VOD)如何徹底改變好萊塢和臺灣影視產業的生態。從美國電影協會(MPA)的數據報告,揭示串流服務在臺灣的驚人普及率與在地內容的消費趨勢。文章分析國際作品如何透過在地化元素開拓新市場。同時,作者也擔憂政府過度監管可能扼殺臺灣影視創新自由,以越南為鑑,呼籲以開放態度擁抱串流時代的新機遇
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
# 簡介 身為一位專注於 Vue.js 的前端開發者,這是我第一次嘗試構建 Flutter 網頁應用。讓我們開始吧! ## 第一次嘗試 ### 第一步:創建一個 Flutter 應用 首先,通過運行以下命令來創建一個新的 Flutter 項目: ```sh flutter
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
本篇文章將分享手機App設計教學,並往後介紹使用Flutter開發App的相關知識和技巧。透過這系列的分享,讀者將能夠學習如何利用設計和程式開發技能來製作一個App。文章中也提供了一些靈感來源和教學資源,幫助讀者進行設計和開發的思考和學習。
Thumbnail
GestureDetector onTap、onDoubleTap和onLongPress class _GestureTestState extends State<GestureTest> { String _operation = "No detected!"; //事件名稱 @o
Thumbnail
GestureDetector onTap、onDoubleTap和onLongPress class _GestureTestState extends State<GestureTest> { String _operation = "No detected!"; //事件名稱 @o
Thumbnail
新增video_player 在pubspec.yaml中加入video_player。 設置權限 Android 在AndroidManifest.xml檔案中的<application>裡,加入下列代碼。 <uses-permission android:name="androi
Thumbnail
新增video_player 在pubspec.yaml中加入video_player。 設置權限 Android 在AndroidManifest.xml檔案中的<application>裡,加入下列代碼。 <uses-permission android:name="androi
Thumbnail
首先需要在pubspec.yaml文件中添加依賴。 宣告 SharedPreferences record = await SharedPreferences.getInstance(); 寫入 //字串資料 await record.setString(key, value); //
Thumbnail
首先需要在pubspec.yaml文件中添加依賴。 宣告 SharedPreferences record = await SharedPreferences.getInstance(); 寫入 //字串資料 await record.setString(key, value); //
Thumbnail
Container child:可以設定一個子元件 Container(child:Text('child')); color:背景顏色 Container(color: Color.fromARGB(255, 255, 255, 255)); alignment:對齊方式 Co
Thumbnail
Container child:可以設定一個子元件 Container(child:Text('child')); color:背景顏色 Container(color: Color.fromARGB(255, 255, 255, 255)); alignment:對齊方式 Co
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
如果你是剛入門Flutter的工程師,可以參考這篇文章,我會告訴大家自己常用的套件以及如何規劃檔案的分類!
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 模組(Module)專案範例的架構與如何載入Android專案中的流程與執行畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
Thumbnail
說明Flutter 插件(Plugin)專案範例的架構與實際載入並執行在各平台的顯示畫面
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News