こんな感じのが作れます
パッケージのインストール
flutter pub add cupertino_sidemenu
サンプル
-
CupertinoApp
を使用します
import 'package:cupertino_sidemenu/cupertino_sidemenu.dart';
import 'package:flutter/cupertino.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _SidebarPageState();
}
class _SidebarPageState extends State<MyApp> {
int _selectedIndex = 0;
final List<String> _items = [
"Home",
"Profile",
"Settings",
"Help",
];
@override
Widget build(BuildContext context) {
final controller = CupertinoSidemenuController();
return CupertinoApp(
title: 'Flutter Demo',
theme: CupertinoThemeData(
primaryColor: CupertinoColors.activeBlue,
),
home: CupertinoSidemenu(
controller: controller,
centerPage: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: const Text("Cupertino Sidemenu"),
trailing: CupertinoButton(
padding: const EdgeInsets.all(8.0),
onPressed: controller.openRightMenu,
child: const Icon(
CupertinoIcons.sidebar_right,
size: 25,
color: CupertinoColors.black,
),
),
),
child: MyHomePage(),
),
rightMenu: CupertinoPageScaffold(
navigationBar: CupertinoNavigationBar(
middle: Text("Right Page"),
),
child: ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
return CupertinoListTile(
title: Text(_items[index]),
leading: Icon(
CupertinoIcons.circle_fill,
color: _selectedIndex == index
? CupertinoColors.activeBlue
: CupertinoColors.systemGrey,
),
onTap: () {
setState(() {
_selectedIndex = index;
});
},
);
}),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text('You have pushed the button this many times:'),
Text(
'$_counter',
style:
CupertinoTheme.of(context).textTheme.navLargeTitleTextStyle,
),
const SizedBox(height: 20),
CupertinoButton.filled(
onPressed: _incrementCounter,
child: const Icon(CupertinoIcons.add),
),
],
),
),
);
}
}
CupertinoSidemenu 設定項目
プロパティ | 型 | デフォルト値 | 説明 |
---|---|---|---|
centerPage |
Widget |
- | 中央に配置されるメインページ |
leftMenu |
Widget? |
null |
左側のメニューコンテンツ(省略可) |
rightMenu |
Widget? |
null |
右側のメニューコンテンツ(省略可) |
menuWidthOfScreen |
double |
0.80 |
画面の幅に対するサイドメニューの割合 [0.0,1.0]
|
hapticFeedback |
bool |
true |
スワイプ時の触覚フィードバックを有効にするか |
animationSpeed |
int |
300 |
アニメーションの速度(ミリ秒単位) |
animationCurves |
Curves |
Curves.easeOutCubic |
アニメーション遷移のカーブを指定 |
centerBackgroundOpacity |
double |
0.25 |
メニューが開いているときの中央ページの透明度 [0.0,1.0]
|
controller |
CupertinoSidemenuController? |
- | ボタンを使用してメニューを開閉するためのコントローラー |
参考