SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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


  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

 今回は、個々の画面を作っていく際の標準的な管理ウィジェットである、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ウィジェットがよく利用されます。

次のページ
BottomNavigationBarウィジェット

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Flutterで始めるモバイルアプリ開発連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/14064 2022/09/05 20:12

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング