Flutter開発入門13 Materialデザイン

Daichi Mizuno

4か月前

はじめに

　Flutterは、Googleが提供するマテリアルデザインに基づいたフレームワークで、直感的で美しいUIを簡単に構築できるのが特徴です。Materialデザインを活用することで、ユーザーに一貫性のある使いやすいアプリを提供できます。本記事では、Flutterで使用される主要なMaterialデザインコンポーネントについて解説し、それらをどのように活用すれば良いのかを紹介します。

Materialデザインとは
主なMaterialデザインコンポーネント
まとめ

Materialデザインとは

　Materialデザインは、Googleが提唱するデザインシステムで、現実の物理的な世界にインスピレーションを得て、デジタル環境でも自然で直感的なユーザー体験を提供することを目指しています。Flutterでは、このMaterialデザインに基づいた豊富なUIコンポーネントが用意されており、これを利用することで簡単に統一感のあるアプリを作成できます。

主なMaterialデザインコンポーネント

　Flutterには多くのMaterialデザインコンポーネントが用意されていますが、ここでは特に頻繁に使用されるものを紹介します。

AppBar

　AppBarは、アプリのトップに表示されるツールバーで、タイトルやナビゲーション、アクションボタンを配置するために使用されます。一般的にアプリのヘッダー部分を構成します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Material Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App'),
          actions: [
            IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                // 検索ボタンが押された時の処理
              },
            ),
          ],
        ),
        body: const Center(
          child: Text("Hello Tech Grow Up!"),
        ),
      ),
    );
  }
}

　この例では、AppBarにタイトル「My App」と検索アイコンを配置しています。

Scaffold

　Scaffoldは、Materialデザインアプリの基本的なレイアウト構造を提供するコンポーネントで、AppBarやDrawer、BottomNavigationBarなどの主要な要素を含むUIの基盤となります。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Material Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Home Page'),
        ),
        body: const Center(
          child: Text('Hello, Tech Grow Up!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // FABが押された時の処理
          },
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}

　ここでは、AppBar、中央にテキストを配置したbody、および右下に表示されるFloatingActionButtonを持つ基本的なレイアウトを構築しています。

FloatingActionButton

　FloatingActionButton（FAB）は、画面の一番目立つ場所に表示されるボタンで、主にアクションを促すために使用されます。例えば、アイテムの追加や新規作成など、特定の操作を強調したい場合に利用します。

FloatingActionButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Icon(Icons.add),
  backgroundColor: Colors.blue,
)

　この例では、青色の背景色と「追加」を意味する「+」アイコンを持つFABを作成しています。

Drawer

　Drawerは、アプリの左端または右端からスワイプして表示されるナビゲーションメニューです。アプリのページ遷移や設定へのアクセスを提供するためによく使用されます。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Material Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Drawer Example'),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text(
                  'Menu',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              ListTile(
                leading: const Icon(Icons.home),
                title: const Text('Home'),
                onTap: () {
                  // ホームが選択された時の処理
                },
              ),
              ListTile(
                leading: const Icon(Icons.settings),
                title: const Text('Settings'),
                onTap: () {
                  // 設定が選択された時の処理
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Content goes here'),
        ),
      ),
    );
  }
}

　この例では、Drawerを使って簡単なナビゲーションメニューを構築しています。DrawerHeaderでメニューのヘッダー部分を設定し、ListTileを使って各メニュー項目を追加しています。

BottomNavigationBar

　BottomNavigationBarは、アプリの画面下部に表示されるナビゲーションバーで、タブ形式で複数のページにアクセスできるようにするために使用されます。アプリ全体のナビゲーションをシンプルかつ直感的に提供します。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Material Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bottom Navigation Example'),
        ),
        body: const Center(
          child: Text('ページ'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              label: 'ビジネス',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              label: '学校',
            ),
          ],
          currentIndex: 0, // 現在選択されているタブのインデックス
          selectedItemColor: Colors.amber[800],
          onTap: (index) {
            // タブが押された時の処理
          },
        ),
      ),
    );
  }
}

　このコードでは、BottomNavigationBarを使用して、ホーム、ビジネス、スクールの3つのタブを提供しています。ユーザーがタブを選択することで、対応するページが表示されます。

まとめ

　FlutterのMaterialデザインコンポーネントを活用することで、シンプルで一貫性のある美しいUIを手軽に作成することができます。AppBarやScaffold、FloatingActionButton、Drawer、BottomNavigationBarなどの基本コンポーネントを理解し、適切に組み合わせることで、ユーザーにとって使いやすく直感的なアプリケーションを作成できるでしょう。これらのコンポーネントを活用して、あなたのアプリに統一感とプロフェッショナルな仕上がりをもたらしてください。