【2024年10月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

【Flutter】下からメニュー表示させる方法とカスタマイズまでの完全ガイド!

【Flutter】下からメニュー表示させる方法とカスタマイズまでの完全ガイド!
いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです

この記事を読んでわかること

  • 下からメニューを表示させる基本的な方法
  • メニューのカスタマイズ方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0
目次

Flutterにおける下からメニュー表示の基本

概要

Flutterでは、BottomSheetウィジェットを使用して、画面の下部からメニューを表示させることができます。これは、ユーザーがアプリ内の追加のオプションにアクセスするための直感的で効果的な方法を提供します。

サンプルコード

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  void _showBottomMenu(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: 200,
            child: Center(
              child: Text('ここにメニュー項目が入ります'),
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('下からメニュー表示デモ'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _showBottomMenu(context),
          child: Text('メニューを表示'),
        ),
      ),
    );
  }
}

サンプルコードの解説

  • 1行目: 必要なパッケージをインポートします。
  • 4行目: アプリケーションのエントリポイントを定義します。
  • 7-14行目: MyAppクラスは、アプリのルートウィジェットを定義します。
  • 16-44行目: MyHomePageクラスでは、UIとしてボタンが中央に配置された画面を作成し、そのボタンを押すことで_showBottomMenuメソッドが呼び出されます。
  • 17-28行目: _showBottomMenuメソッド内でshowModalBottomSheet関数を使用し、BottomSheetを表示します。このContainer内にメニュー項目を配置します。

動作確認

いちの

それでは、動作を確認してみましょ〜

【Flutter】下からメニュー表示させる方法

メニューのカスタマイズ

概要

メニューの見た目や挙動をカスタマイズすることで、アプリのブランドイメージに合わせたデザインを実現できます。例えば、メニューの背景色、項目のフォントスタイル、表示アニメーションなどをカスタマイズできます。

サンプルコード

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 250,
      color: Colors.blueGrey, // 背景色のカスタマイズ
      child: Column(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.access_alarm),
            title: Text('アラーム'),
            onTap: () => Navigator.pop(context),
          ),
          ListTile(
            leading: Icon(Icons.accessibility_new),
            title: Text('アクセシビリティ'),
            onTap: () => Navigator.pop(context),
          ),
          ListTile(
            leading: Icon(Icons.account_balance),
            title: Text('バランス'),
            onTap: () => Navigator.pop(context),
          ),
        ],
      ),
    );
  },
);

サンプルコードの解説

  • Containercolorプロパティを使用して背景色をカスタマイズしています(6行目)。
  • Columnウィジェット内にListTileウィジェットを使用してメニュー項目を配置しています。これにより、アイコンとテキストが含まれたリストアイテムを簡単に作成できます(8-24行目)。
  • ListTileonTapイベントにより、項目をタップしたときの動作を定義しています。ここでは、メニューを閉じる動作をしています(12, 17, 22行目)。

動作確認

いちの

それでは、動作を確認してみましょ〜

【Flutter】下からメニュー表示させる方法とカスタマイズ

サイドメニューを表示させる方法についてご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか?今回は、下からメニュー表示させる方法とカスタマイズする方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (1件)

コメントする

目次