MDC-101 Flutter: マテリアル コンポーネントの基本

1. はじめに

マテリアル デザインとマテリアル Flutter ライブラリとは何ですか？

マテリアル デザインは、人の目に留まる美しいデジタル プロダクトを作成するためのシステムです。一貫した一連の基本原則とコンポーネントに基づいてスタイル、ブランディング、インタラクション、モーションの統一を行うことにより、プロダクト チームは、デザインの可能性を最大限に発揮できます。

マテリアル Flutter ライブラリには、マテリアル デザイン コンポーネント（略して MDC）のデザインを実装し、アプリとプラットフォーム全体で一貫したユーザー エクスペリエンスを実現する Flutter ウィジェットが含まれています。マテリアル デザイン システムの進化に伴って、これらのコンポーネントは、Google のフロントエンド開発標準に準拠した一貫したピクセル パーフェクトな実装を実現するために更新されます。

この Codelab では、マテリアル Flutter のコンポーネントを使用してログインページを作成します。

作業内容

この Codelab は、衣類や生活雑貨を販売する e コマースアプリ Shrine の作成手順を説明する 4 つの Codelab のうちの最初の Codelab です。マテリアル Flutter を使用してコンポーネントをカスタマイズし、ブランドやスタイルを反映する方法を紹介します。

この Codelab では、次のもの含む Shrine 用ログインページを作成します。

• Shrine のロゴ画像
• アプリ名「Shrine」
• テキスト フィールド 2 つ（ユーザー名用とパスワード用）
• ボタン 2 つ

Android	iOS

この Codelab は、スクリーンショットを除き、マテリアル 3 に更新されています。それでも、同じ情報を伝えることができます。

これは、Shrine というプロダクトのアプリを作成する 4 つの Codelab のうちの 1 つ目の Codelab です。これらの Codelab すべてを順番どおりに学習し、順を追ってタスクを実行することをおすすめします。関連する Codelab は次の場所にあります。 MDC-102 Flutter: マテリアルの構造とレイアウト MDC-103 Flutter: カラー、シェイプ、高度、タイプによるマテリアルのテーマ設定 MDC-104 Flutter: マテリアルの高度なコンポーネント

この Codelab で Flutter のコンポーネントとサブシステムをマテリアルにする

• テキスト フィールド
• ボタン
• インクの波紋（タッチイベントに対する視覚的なフィードバック）

この Codelab では、マテリアル Flutter によって提供されるデフォルトのコンポーネントを使用します。カスタマイズ方法については、MDC-103: 色、形状、高度、タイプによるマテリアル デザインのテーマ設定で学習します。

Flutter 開発のご経験についてお答えください。

初心者 中級者 上級者

2. Flutter の開発環境をセットアップする

このラボを完了するには、Flutter SDK とエディタの 2 つのソフトウェアが必要です。

この Codelab は、次のいずれかのデバイスを使って実行できます。

• パソコンに接続され、デベロッパー モードに設定された物理デバイス（Android または iOS）
• iOS シミュレータ（Xcode ツールのインストールが必要）
• Android Emulator（Android Studio でセットアップが必要）
• ブラウザ（デバッグには Chrome が必要）
• Windows、Linux、macOS のデスクトップ アプリケーション。開発はデプロイする予定のプラットフォームで行う必要があります。たとえば、Windows のデスクトップ アプリを開発する場合は、適切なビルドチェーンにアクセスできるように Windows で開発する必要があります。オペレーティング システム固有の要件については、docs.flutter.dev/desktop に詳しい説明があります。

3. Codelab のスターター アプリをダウンロードする

スターター プロジェクトをダウンロード

スターター プロジェクトは material-components-flutter-codelabs-101-starter/mdc_100_series ディレクトリにあります。

GitHub からクローンを作成する

GitHub からこの Codelab のクローンを作成するには、次のコマンドを実行します。

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

参考情報: GitHub からリポジトリのクローンを作成する

適切なブランチ

Codelab MDC-101 から 104 は互いに基づき連続しています。そのため、101 のコードが完成すると、それが 102 のスターター コードになります。コードはさまざまなブランチに分割されています。すべてのブランチをリストするには、次のコマンドを使用します。

git branch --list

完成版のコードを表示するには、102-starter_and_101-complete ブランチをチェックアウトします。

プロジェクトを開いてアプリを実行する

1. お使いのエディタでプロジェクトを開きます。
2. エディタで Get Started: Test drive を開き、「Run the app」セクションの指示に従います。

完了しました。使用するには、Shin's ログインページのスターター コードがデバイスで実行されている必要があります。Shrine ロゴと、その真下に「Shrine」という名前が表示されます。

Android	iOS

コードを見てみましょう。

コードの TODO には数字（101、102 など）が含まれており、それらは変更を実装する Codelab の番号を表します。

login.dart のウィジェット

login.dart を開きます。以下が含まれているはずです。

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

これには import ステートメントと 2 つの新しいクラスが含まれています。

• import ステートメントを使用すると、このファイルにマテリアル ライブラリを使用できます。
• LoginPage クラスは、シミュレータに表示されるページ全体を表します。
• _LoginPageState クラスの build() 関数は、UI 内のすべてのウィジェットを作成する方法を制御します。

Flutter UI の基本とウィジェットの詳細については、Flutter ウィジェット フレームワークのツアーか、Codelab の初めての Flutter アプリを作成する（パート 1）をご覧ください。

4. TextField ウィジェットを追加する

まず、ログインページにテキスト フィールドを 2 つ追加して、ユーザーがユーザー名とパスワードを入力できるようにします。フローティング ラベルを表示してタッチリップルをアクティブにする、TextField ウィジェットを使用します。

マテリアルのテキスト フィールドが一段と改善され、ブランドの柔軟性が向上しました。また、ユーザー エクスペリエンス（UX）に関する広範な研究に基づく改善がなされ、ユーザビリティと視覚的なデザインが改善されています。

新しいテキスト フィールドの詳細については、マテリアル ガイドラインの記事をご覧ください。

このページは主に、スクロール可能な列に子を配置する ListView で構成されています。テキスト フィールドを以下に表示しましょう。

TextField ウィジェットを追加する

const SizedBox(height: 120.0) の後に、2 つの新しいテキスト フィールドとスペーサーを追加します。

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 12.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

各テキスト フィールドには、InputDecoration ウィジェットを受け取る decoration: フィールドがあります。filled: フィールドは、テキスト フィールドのタップ ターゲット エリアを認識しやすくするために、テキスト フィールドの背景が薄く塗りつぶされていることを意味します。2 つ目のテキスト フィールドの obscureText: true 値は、ユーザーが入力した内容を自動的に点に置き換えます。これはパスワードに適しています。

ホットリロードを実行するプロジェクトを保存します（キー入力: Command+S キー）。

これで、「Username」と「Password」という 2 つのテキスト フィールドを備えたページが表示されます。フローティング ラベルのアニメーションを確認します。

Android	iOS

TextField の特長は次のとおりです。

• TextField ウィジェットの外観は簡単に変更できます。decoration フィールドに InputDecoration 値を指定します。
• テキスト フィールドには、デフォルトで「タッチフィードバック」（リップル）が表示されます。
• FormField は、フォームにフィールドを埋め込む特別な機能を持つ類似のウィジェットです。
• TextField クラスのドキュメント

5. ボタンを追加する

次に、ログインページに「Cancel」と「Next」という 2 つのボタンを追加します。TextButton と ElevatedButton の 2 種類のボタン ウィジェットを使用します。

テキストボタンか昇格ボタンかの選択

単純に 2 つのエレベーション ボタンを表示するのはどうでしょうか。ボタンタイプはそれぞれ、どのアクションが他より重要であるかを示します。

レイアウトには目立つボタンを 1 つ含める必要があります。これにより、他のボタンの重要度が低いことが明確になります。この目立つボタンは、ユーザーにアプリを使ってもらいたいアクションを示します。

ログインをキャンセルしてください。エレベーションを施すと目立ちやすいため、より重要な操作に使用します。これに比べて、その左側にあるプレーン テキストボタンは強調されていないように見えます。

ボタン階層の詳細については、マテリアル ガイドラインのボタンに関する記事をご覧ください。

オーバーフロー バーを追加する

テキスト フィールドの後、OverflowBar を ListView の子に追加します。

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

OverflowBar は、その子を並べます。

ボタンを追加する

次に、OverflowBar の children のリストにボタンを 2 つ追加します。

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101)
      },
    ),

onPressed: フィールド に 空のブロックがあるのはなぜですか？

null を渡した場合や、フィールドを含めなかった場合（デフォルトで null に設定）、ボタンは無効になります。これではタップのフィードバックを得られず、有効な動作について正確に把握できません。空のブロックを使用すると、ボタンが無効になりません。

ボタンとその操作の詳細については、アプリにインタラクティビティを追加するをご覧ください。

プロジェクトを保存します。最後のテキスト フィールドの下に、ボタンが 2 つ表示されます。

Android	iOS

OverflowBar はレイアウト処理を自動的に行います。ボタンが横並びになるように配置されます。

ボタンをタップすると、他に何も発生させずにインクの波紋のアニメーションが開始されます。CANCEL ボタンでテキスト フィールドをクリアし、NEXT ボタンで画面を閉じるように、匿名の onPressed: 関数に機能を追加してみましょう。

TextEditingControllers を追加する

テキスト フィールドの値をクリアできるようにするため、TextEditingControllers を追加してテキストを制御します。

_LoginPageState クラスの宣言の直下に、コントローラを final 変数として追加します。

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

最初のテキスト フィールドの controller: フィールドで、_usernameController を設定します。

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

2 つ目のテキスト フィールドの controller: フィールドで、今度は _passwordController を設定します。

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

onPressed を編集する

TextButton 関数 onPressed: で各コントローラをクリアするコマンドを追加します。

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

プロジェクトを保存します。これで、テキスト フィールドに何かを入力したとき、[CANCEL] を押すと各フィールドがクリアされるようになりました。

ログイン フォームはうまくできました。それでは、ユーザーに Shrine アプリの残りの部分に進んでもらいましょう。

ポップ

このビューを閉じるには、このページ（Flutter ではルートといいます）をナビゲーション スタックからポップ（削除）します。

Navigator は、iOS の UINavigationController と同様、ルートのスタックを保持します。ルートをプッシュすると、スタックの一番上に配置されます。スタックをポップすると、最後に追加されたルートが削除されます。アプリの app.dart で、initialRoute: '/login', を呼び出すと、ナビゲータにログイン画面が追加されます。

ルートとナビゲーションについては、ナビゲーションの基本をご覧ください。

ElevatedButton ボタンの onPressed: 関数で、ナビゲータから最新のルートをポップします。

        // TODO: Show the next page (101)
        Navigator.pop(context);

最後に、home.dart を開き、Scaffold で resizeToAvoidBottomInset を false に設定します。

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

これにより、キーボードの表示によってホームページやウィジェットのサイズが変更されることがなくなります。

これで、プロジェクトを保存します。[Next] をクリックします。

以上で終了です。

Android	iOS

この画面は、MDC-102 で取り組む次の Codelab の出発点となります。

ボタンについて

• TextButton や ElevatedButton 以外にも、OutlinedButton、FloatingActionButton IconButton などがあります。

6. 完了

テキスト フィールドとボタンを追加しましたが、レイアウト コードを考慮する必要はほとんどありませんでした。Flutter のマテリアル コンポーネントには多くのスタイルがあり、かなり簡単に画面上に配置できます。

完成形の MDC-101 アプリは 102-starter_and_101-complete ブランチにあります。

ブランチ内のアプリに対して、ご自身のバージョンのアプリをテストできます。

次のステップ

テキスト フィールドとボタンはマテリアル システムの 2 つのコア コンポーネントですが、他にもたくさんあります。残りはマテリアル コンポーネント ウィジェット カタログで確認することもできます。

Flutter の MDC-102 の対象となるコンポーネントについては、MDC-102: マテリアル デザインの構造とレイアウトをご覧ください。

次の Codelab

この Codelab を完了するためにそれなりの時間と労力を必要とした

非常にそう思う そう思う どちらとも言えない そう思わない まったくそう思わない

今後もマテリアル コンポーネントを使用したい

非常にそう思う そう思う どちらとも言えない そう思わない まったくそう思わない