こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- 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行目: 各ページの具体的な実装を行います。ここではシンプルに中央にテキストを表示するだけですが、実際のアプリケーションではより複雑なレイアウトや機能が実装されることが想定されます。
動作確認
それでは、動作を確認してみましょ〜
フッターメニューを簡単に実装し、切り替える方法にもご興味がある読者様。以下の記事がオススメですので、ぜひご一読いただけますと幸いです。
まとめ
いかがでしたでしょうか?今回は、簡単にサイドメニュー(ドロワー)を実装し切り替える方法を解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただきました。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
ヘッダーメニューを簡単に実装し、切り替える方法にもご興味がある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
コメント
コメント一覧 (3件)
[…] […]
[…] […]
[…] […]