0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

こんな感じのが作れます

side menu.gif

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

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

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?