CodeZine(コードジン)

特集ページ一覧

Flutterアプリの画面構成を理解しよう

Flutterで始めるモバイルアプリ開発 第8回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/05/11 11:00

 Dart言語についてこれまで紹介してきましたが、今回からはFlutterアプリ開発についての紹介を再開します。また、第3回でFlutterアプリ構造の概要を説明しました。今回はその続きとなる内容で、Flutterアプリでの画面を作るためのUIを中心に説明します。

目次

標準画面の構成を理解する

 今回は、個々の画面を作っていく際の標準的な管理ウィジェットである、Scaffold関連のウィジェットについて中心に説明します。

Scaffoldの画面構成

 Scaffoldウィジェットを使って生成できる画面要素を、以下の図にまとめます。よく利用するようなものが用意されているので、最低限のコーディングで素早く典型的なモバイルアプリが作れます。

図1:Scaffoldと各ウィジェットとの関係
図1:Scaffoldと各ウィジェットとの関係

 以下にウィジェットとScaffoldのプロパティとの関係をまとめます。

表1:Scaffoldが管理できる主なUI部品
Scaffoldのプロパティ 一般的に該当するウィジェットクラス 説明
appBar AppBar
画面上部に表示するタイトルやアイコンなど
body 任意のウィジェット メインとなる画面
bottomNavigationBar BottomNavigationBar
画面の下部に表示するメニューボタンなど
drawer/endDrawer Drawer
ドロワーメニュー。必要時に左もしくは右側から表示されるメニュー領域。表示する際にはopenDrawer/openEndDrawerメソッドを使う。
floatingActionButton FloatingActionButton
画面下部などに表示するショートカットボタン
bottomSheet BottomSheet
画面下部から必要時に表示される領域。通常は、必要時に表示するので、プロパティを使わずshowBottomSheetメソッドを使う。
- SnackBar
画面下部などに表示する通知表示領域

 これらのウィジェットを組み合わせつつ、また、カスタマイズすることで、モバイルアプリとして標準的な機能と画面構成を実現しつつ、望むデザインのアプリをすぐに作ることができます。

AppBarウィジェット

 AppBarは、高さが固定のメニューです。スクロールしていくと高さが変わるメニューを作成することも可能で、その場合にはSilverAppBarというウィジェットを利用します。こちらのウィジェットの使い方は少々、複雑になるので本連載では扱いませんが、アプリ作成になれてきたタイミングで挑戦してみてもよいでしょう。

 AppBarの表示例と各子ウィジェットを設定できる場所とプロパティ名の関係を示したものが図2です。

図2:AppBarの各プロパティと位置の関係
図2:AppBarの各プロパティと位置の関係

 これらのプロパティに実際に値を設定した例がリスト1です。

[リスト1] AppBarクラスの利用例(lib/pages/AppBarSample.dartの抜粋)
appBar: AppBar(
  //  (1) タイトルの指定
  title: Text("タイトル"),
  centerTitle: true,
  // (2) 背景色の指定
  backgroundColor: Colors.lightGreen,
  // (3) 左アイコン
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: (){},
  ),
  // (4) 右アイコン
  actions: [
    IconButton(icon: Icon(Icons.list_alt), onPressed: (){}),
    IconButton(icon: Icon(Icons.add_shopping_cart), onPressed: (){})
  ],
  //  (5) 下部の設定
  bottom: TabBar(
    //  省略
    tabs: [
      Tab(icon: Icon(Icons.agriculture_rounded)),
      Tab(icon: Icon(Icons.cake)),
      Tab(icon : Icon(Icons.settings))
    ],
  ),
)

 (1)でタイトルを指定します。centerTitleでfalseを指定すると左よせに、trueで中央寄せになります。(2)のbackgroundColorで背景色を変更します。そして、leadingプロパティでメニュー左のウィジェットを指定し、actionsプロパティで右側に配置するウィジェットを指定します。

 ヘッダメニューでは一般的にアイコンを使ってメニューを作成すると思います。Flutterではあらかじめアイコンが用意されているので、こちらから選択することができます。

 これらのアイコンを使うと簡単にメニューを作成可能です。また、アイコンのみのボタンを利用するには、IconButtonを使います。そしてボタンが押された時の処理はonPressedで指定した関数がコールバックされます。

 簡単なヘッダメニューであれば、これで十分ですが、メニュー下部にもウィジェットを配置したい場合には、bottomプロパティを利用します。bottomプロパティには好きなウィジェットを配置できますが、一般的にはTabBarウィジェットがよく利用されます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:Flutterで始めるモバイルアプリ開発

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5