2020/10/31 MDC-102 Flutter:Material Structure and Layout (Flutter)の訳パート2

Contents

1. Introduction

マテリアルコンポーネント（MDC）は、開発者がマテリアルデザインを実装するのに役立ちます。 GoogleのエンジニアとUXデザイナーのチームによって作成されたMDCは、美しく機能的なUIコンポーネントを多数備えており、Android、iOS、ウェブ、Flutter.material.io / developで利用できます。

codelab MDC-101では、2つのマテリアルコンポーネントを使用してログインページを作成しました。テキストフィールドとインクの波紋のあるボタンです。それでは、ナビゲーション、構造、およびデータを追加して、この基盤を拡張してみましょう。

What you’ll build

このコードラボでは、衣料品や家庭用品を販売するeコマースアプリであるShrineというアプリのホーム画面を作成します。

含まれるもの：

トップアプリバー
製品でいっぱいのグリッドリスト

MDC components in this codelab

Top app bar
Grids
Cards

4. Add a top app bar

現在、「Next」ボタンをクリックすると、「I did it！」というホーム画面が表示されます。それは素晴らしいことです！

しかし、今では、ユーザーは実行するアクションや、アプリ内のどこにいるかについての感覚がありません。それを助けるために、ナビゲーションを追加する時が来ました。

ナビゲーションとは、ユーザーがアプリ内を移動できるようにするコンポーネント、インタラクション、視覚的な手がかり、および情報アーキテクチャを指します。コンテンツと機能を見つけやすくするのに役立つため、タスクを簡単に完了できます。

navigationとは、簡単にいうとページ遷移機能のことです。

詳細については、マテリアルガイドラインのナビゲーション記事を参照してください。

マテリアルデザインは、高度なユーザビリティを保証するナビゲーションパターンを提供します。最も目に見えるコンポーネントの1つは、上部のアプリバーです。

一番上のアプリバーは、iOSでは「ナビゲーションバー(Navigation Bar)」として、または単に「App Bar」または「ヘッダー(Header)」として知られているかもしれません。

ナビゲーションを提供し、ユーザーが他のアクションにすばやくアクセスできるようにするために、上部のアプリバー(App Bar)を追加しましょう。

home.dartで、AppBarウィジェットをScaffoldウィジェットに追加します。

  appBar: AppBar(
    // TODO: Add buttons and title (102)
  ),

AppBarをScaffoldのappBar：フィールドに追加すると、完全なレイアウトが無料で提供され、AppBarがページの上部に、本文が下に表示されます。

Scaffoldは、MaterialAppsの重要なウィジェットです。

引き出し(drawers)、スナックバー(snack bars)、ボトムシート(bottom sheets)などのあらゆる種類の一般的なマテリアルコンポーネントを表示するための便利なAPIを提供します。フローティングアクションボタンのレイアウトにも役立ちます。

Scaffoldの詳細については、Flutterのドキュメントをご覧ください。

プロジェクトを保存します。 Shrineアプリが更新されたら、[Next]をクリックしてホーム画面を表示します。

AppBartが表示されていますが、タイトルが必要です。

アプリが更新されない場合は、もう一度[再生]ボタンをクリックするか、[停止]をクリックしてから[再生]をクリックしてください。

home.dartで、AppBarにtitle(タイトル)を追加します。

プロジェクトを保存してください(command+S)

これまでに、「プラットフォームの差異」と呼ばれるものに気付いたかもしれません。 Materialは、Android、iOS、Webの各プラットフォームが異なることを認識しています。

そして、そのユーザーは彼らに対して異なる期待を持っています。

たとえば、iOSでは、タイトルはほとんどの場合中央に配置され、これがUIKitによって提供されるデフォルトの動作です。

Androidでは、左揃えになっています。したがって、Androidエミュレーターまたはデバイスを使用している場合は、タイトルを左揃えにする必要があります。 iOSシミュレーターまたはデバイスの場合、中央に配置する必要があります。

詳細については、クロスプラットフォーム適応に関する資料の記事を参照してください。

多くのアプリバー(AppBar)には、タイトルの横にボタンがあります。アプリにメニューアイコンを追加しましょう。

(3)Add a leading IconButton

home.dartで、AppBarのleading：フィールドにIconButtonを設定します。（titleフィールドの前に置きます：レイアウトと同様に「メニュー」「タイトル」「アイコンボタン」の順番でフィールドを記述しましょう。）

    leading: IconButton(
      icon: Icon(
        Icons.menu,
        semanticLabel: 'menu',
      ),
      onPressed: () {
        print('Menu button');
      },
    ),

プロジェクトを保存してください。(command+S)

IconButtonクラスは、アプリにマテリアルアイコンを組み込むための便利な方法です。

Iconウィジェットが必要です。 Flutterには、Iconsクラスにアイコンのコレクション全体があります。 Icon型の定数値を指定すると、対応するアイコンが自動的に選択できるようになっています。

Iconsクラスの詳細については、Flutterのドキュメントをご覧ください。また、Flutterドキュメントでアイコンウィジェットの詳細を確認してください。

タイトルの末尾(右側)にボタンを追加することもできます。 Flutterでは、これらは「actions」と呼ばれます。

先頭と末尾は方向を表す用語であり、言語に依存しない方法でテキスト行の開始と終了を指します。英語のようなLTR（左から右）言語で作業する場合、先頭は左を意味し、末尾は右を意味します。アラビア語のようなRTL（右から左）言語では、先頭は右を意味し、末尾は左を意味します。

(4)Add actions

さらに2つのIconButtonの場所があります。

AppBarインスタンスのタイトルの後ろ(今回は右側)にアイコンを追加します。

プロジェクトを保存します。ホーム画面は次のようになります。

これで、アプリの右側に先頭のボタン、タイトル、2つのアクションが表示されます。

アプリバーには、コンテンツとは異なるレイヤー上にあることを示す微妙な影を使用して標高(elevation)も表示されます。

Iconクラスでは、SemanticLabelフィールドはFlutterにアクセシビリティ情報を追加する一般的な方法です。これは、AndroidのコンテンツラベルやiOSのUIAccessibilityaccessibilityLabelによく似ています。あなたは多くのクラスでそれを見つけるでしょう。

このフィールドの情報は、スクリーンリーダーを使用する人々にこのボタンが何をするかをよりよく説明しています

SemanticLabel：フィールドを持たないウィジェットの場合、Semanticsウィジェットでラップできます。セマンティクスウィジェットの詳細については、Flutterドキュメントをご覧ください。

ここまでのコード↓

//home.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  // TODO: Make a collection of cards (102)
  // TODO: Add a variable for Category (104)
  @override
  Widget build(BuildContext context) {
    // TODO: Return an AsymmetricView (104)
    // TODO: Pass Category variable to AsymmetricView (104)
    return Scaffold(
      //↓(1)Add an AppBar widgetで追加。
      appBar:AppBar(
        leading: IconButton(  //←(3)Add a leading IconButtonで追加。
          icon: Icon(
            Icons.menu,
            semanticLabel: 'menu',
          ),
          onPressed: () {
            print('Menu button');
          },
        ),
        title: Text('SHRINE'),  //←(2)Add a Text widgetで追加。
        actions: <Widget>[  //←(4)Add actionsで追加。
          IconButton(
            icon: Icon(
              Icons.search,
              semanticLabel: 'search',
            ),
            onPressed: () {
              print('Search button');
            },
          ),
          IconButton(
            icon: Icon(
              Icons.tune,
              semanticLabel: 'filter',
            ),
            onPressed: () {
              print('Filter button');
            },
          ),
        ],
      ),
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      //↓(3)popで追加。
      resizeToAvoidBottomInset: false,
    );
  }
}

次のページ(5. Add a card in a grid)へ>>

参考

https://codelabs.developers.google.com/codelabs/mdc-102-flutter

1. Introduction

What you’ll build

MDC components in this codelab

4. Add a top app bar

(1)Add an AppBar widget

(2)Add a Text widget

(3)Add a leading IconButton

(4)Add actions

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル