我是廣告,點擊一下吧!
標籤
#Flutter (17) 、 #PHP (9) 、 #Laravel (7) 、 #MySQL (5) 、 #Mac (5) 、 #Dart (5) 、 #Android (3) 、 #List (2) 、 #Widget (2) 、 #Carbon (2) 、 #IDE (2) 、 #VS Code (2) 、 #Linux (2) 、 #Shell Script (2) 、 #Cursor Pagination (1) 、 #Pagination (1) 、 #floorMonth (1) 、 #subMonthNoOverflow (1) 、 #資安 (1) 、 #addMonthNoOverflow (1) 、 #subMonth (1) 、 #MySQL 效能 (1) 、 #Mac M1 (1) 、 #個人空間 (1) 、 #Android Splash Screen (1) 、 #Android vector (1) 、 #SVG (1) 、 #Directory Structure (1) 、 #SQL Injection (1) 、 #createFromTimestamp (1)Flutter 製作時遇到需要從側邊彈出的選單時可以使用 Scaffold + Drawer 來實現。

要將 Drawer 加入到 APP 的話需要使用 Scaffold,有分為左邊的 drawer 與右邊的 endDrawer,可依照需求加到你的頁面內。
Scaffold(
drawer: const Drawer(), // 左邊
endDrawer: const Drawer(), // 右邊
) ScaffoldState 內有提供 openDrawer、openEndDrawer、closeDrawer、closeEndDrawer 四種 function 提供外部操作 Drawer 展開/收合。只要在 Scaffold 加上 GlobalKey 即可使用。
延伸 - Flutter 在父 Widget 呼叫子 Widget State Function
final GlobalKey<ScaffoldState> _myKey = GlobalKey();
_myKey.currentState!.openDrawer();
_myKey.currentState!.openEndDrawer();
_myKey.currentState!.closeDrawer();
_myKey.currentState!.closeEndDrawer(); 若有使用 AppBar 那 Flutter 會自動在對應的位置新增一個 menu icon button,如需隱藏 icon button 左右邊有不同的設定:
左邊:AppBar 的 automaticallyImplyLeading 設定為 false。
右邊:AppBar 的 actions 設定為不為空的 List<Widget>。
AppBar(
automaticallyImplyLeading: true, // 左邊的 icon button 可將此設定為 false 即可隱藏
actions: [], // 右邊的 icon button 需要使用非空 List 覆蓋
) import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final GlobalKey<ScaffoldState> _myKey = GlobalKey();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Demo Drawer'),
automaticallyImplyLeading: true, // 左邊的 icon button 可將此設定為 false 即可隱藏
actions: [], // 右邊的 icon button 需要使用非空 List 覆蓋
),
key: _myKey,
drawer: const Drawer(child: Center(child: Text('左邊'))),
endDrawer: const Drawer(child: Center(child: Text('右邊'))),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => _myKey.currentState!.openDrawer(),
child: const Text('< 開啟左邊的 Drawer'),
),
const SizedBox(height: 15),
ElevatedButton(
onPressed: () => _myKey.currentState!.openEndDrawer(),
child: const Text('開啟右邊的 Drawer >'),
),
],
),
),
),
);
}
}
試試看吧:https://dartpad.dev/?id=190b5773f572ccdf88450b6dbde4c6bd