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

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('メニューを表示'),
        ),
      ),
    );
  }
}

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),
          ),
        ],
      ),
    );
  },
);