【正社員】還元率83%【フリーランス】マージン一律5万円で案件をご紹介させていただきます。 詳細はこちら

【Flutter】簡単にサイドメニュー(ドロワー)を実装し切り替えるまでの完全ガイド!

【Flutter】簡単にサイドメニュー(ドロワー)を実装し切り替えるまでの完全ガイド!
いちの

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

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

  • Flutterでサイドメニュー(ドロワー)を簡単に実装する方法
  • 商品一覧、検索、マイページへの画面切り替えの実装方法

開発環境

  • Dart 3.0.0
  • Flutter 3.10.0

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

目次

1. Flutterでのサイドメニュー(ドロワー)の実装

概要

Flutterでサイドメニュー(ドロワー)を実装するには、Drawerウィジェットを利用します。このセクションでは、Drawerを使用して、タイトルに「商品一覧」「検索」「マイページ」という三つのメニュー項目を持つサイドメニューを実装する方法を紹介します。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final List<Widget> _pages = [ProductListPage(), SearchPage(), MyPage()];
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('サイドメニューの実装')),
      drawer: Drawer(
        child: ListView(
          children: <Widget>[
            DrawerHeader(child: Text('メニュー')),
            ListTile(
              title: Text('商品一覧'),
              onTap: () => _onItemTapped(0),
            ),
            ListTile(
              title: Text('検索'),
              onTap: () => _onItemTapped(1),
            ),
            ListTile(
              title: Text('マイページ'),
              onTap: () => _onItemTapped(2),
            ),
          ],
        ),
      ),
      body: _pages[_selectedIndex],
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    Navigator.pop(context); // ドロワーを閉じる
  }
}

class ProductListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('商品一覧ページ'));
  }
}

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('検索ページ'));
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('マイページ'));
  }
}

サンプルコードの解説

  • 1行目: Flutterマテリアルデザインのライブラリをインポートします。
  • 5行目: MyAppクラスを定義し、アプリの起点となります。
  • 8-10行目: MaterialAppウィジェットを使用し、アプリのホームページをHomePageに設定します。
  • 19-21行目: HomePageクラスを定義し、ステートフルウィジェットとして実装します。これにより、ウィジェットの状態を管理できます。
  • 29-42行目: 画面遷移に使用するページのリストを定義します。
  • 25-47行目: Scaffoldウィジェットを使用してアプリの基本的なレイアウトを構築します。AppBarでヘッダーを設定し、Drawerでサイドメニューを実装します。
  • 27-45行目: Drawer内でListViewウィジェットを使用し、メニュー項目をリスト表示します。各ListTileがメニュー項目です。
  • 50-55行目: メニュー項目がタップされた時に呼び出される_onItemTappedメソッドを定義します。選択された画面のインデックスに基づいて、表示するページを切り替えます。
  • 58-77行目: 各ページの具体的な実装を行います。ここではシンプルに中央にテキストを表示するだけですが、実際のアプリケーションではより複雑なレイアウトや機能が実装されることが想定されます。

動作確認

いちの

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

【Flutter】簡単にサイドメニュー(ドロワー)を実装し切り替えるまでの完全ガイド

フッターメニューを簡単に実装し、切り替える方法にもご興味がある読者様。以下の記事がオススメですので、ぜひご一読いただけますと幸いです。

まとめ

いかがでしたでしょうか?今回は、簡単にサイドメニュー(ドロワー)を実装し切り替える方法を解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただきました。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!

いちの

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

ヘッダーメニューを簡単に実装し、切り替える方法にもご興味がある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

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

この記事を書いた人

弊社テックブログをご愛読いただきありがとうございます。
当テックブログを運用している株式会社メモリアインクは、
【正社員】還元率83%
【フリーランス】マージン一律5万円で案件のご紹介
と、エンジニアの皆様に分かりやすい形で稼げる仕組みを構築し提供させていただいております。詳しくは弊社お問い合わせページ、プロフィールのQRコードを読み取り、LINEメッセージでお問い合わせいただけますと幸いです。

コメント

目次