[Flutterパッケージ紹介]iOSの横からニュッと出るCupertinoデザインのWidget

こんな感じのが作れます

パッケージのインストール

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?	-	ボタンを使用してメニューを開閉するためのコントローラー

参考