0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@tomarino080

【第1回】Flutter初心者向け：Widgetの基本と画面の土台を理解する

0
Posted at

【第1回】Flutter初心者向け：Widgetの基本と画面の土台を理解する

この記事は「Flutter初心者向け：Widgetの使い所と仕組み」シリーズの第1回です。
全6回で、Flutterでよく使うWidgetの使い所・仕組み・使用例を整理していきます。

このシリーズで扱う内容

回 テーマ 主なWidget
第1回 Widgetの基本と画面の土台 Scaffold / AppBar / Widgetツリー
第2回 表示Widget Text / Image / Icon
第3回 配置・余白Widget Column / Row / Padding / SizedBox / Center / Align
第4回 レイアウト調整・装飾Widget Expanded / Flexible / Spacer / Stack / Container / Card / ClipRRect / CircleAvatar
第5回 ボタン・入力フォームWidget ElevatedButton / TextButton / OutlinedButton / IconButton / FloatingActionButton / TextField / TextFormField / Form / Checkbox / Radio / Switch / DropdownButton
第6回 一覧・スクロール・状態表示Widget SingleChildScrollView / ListView / ListView.builder / GridView / PageView / GestureDetector / InkWell / Visibility / Opacity / FutureBuilder / StreamBuilder / CircularProgressIndicator / LinearProgressIndicator

今回は、第1回：Widgetの基本と画面の土台 についてまとめます。

はじめに

Flutterを学び始めた時に、まず出てくるのが Widget という言葉です。

最初は、

「Widgetって何？」
「画面の部品のこと？」
「ScaffoldとかAppBarって何のためにあるの？」

となりやすいと思います。

この記事では、Flutterの画面作りの土台として、

  • Widgetとは何か
  • Widgetツリーとは何か
  • Scaffold
  • AppBar

について整理します。

まずはここを押さえると、Flutterの画面作りの見通しがかなり良くなります。

FlutterのWidgetとは？

Flutterでは、画面に表示されるものは基本的にすべてWidgetです。

文字もWidget、画像もWidget、ボタンもWidget、余白もWidgetです。

例えば、以下のようなコードがあります。

Column(
  children: [
    Text('タイトル'),
    Text('説明文'),
  ],
)

これは構造として見ると、こうなっています。

Column
 ├─ Text
 └─ Text

Column の中に Text が2つ入っている状態です。

Flutterでは、このようにWidgetを入れ子にして画面を作っていきます。

Widgetツリーとは？

Flutterの画面は、Widgetが木のような構造になっています。

例えば、以下のコードを見てみます。

Scaffold(
  appBar: AppBar(
    title: Text('ホーム'),
  ),
  body: Center(
    child: Text('こんにちは'),
  ),
)

この構造を図にすると、以下のようになります。

Scaffold
 ├─ AppBar
 │   └─ Text
 └─ Center
     └─ Text

このような親子関係の構造を、Widgetツリーと呼びます。

Flutterでは、

親Widgetが、子Widgetをどう配置するか決める

という考え方がとても大事です。

例えば、

  • Column は子Widgetを縦に並べる
  • Row は子Widgetを横に並べる
  • Center は子Widgetを中央に置く
  • Padding は子Widgetの周りに余白を作る

という役割を持っています。

画面作りは「小さい部品を組み合わせる」イメージ

Flutterの画面作りは、1つの大きな部品で全部を作るというより、役割の小さいWidgetを組み合わせて作っていくイメージです。

例えば、タイトルと説明文とボタンを縦に並べたい場合は、以下のように書きます。

Column(
  children: [
    Text('ログイン'),
    Text('メールアドレスとパスワードを入力してください'),
    ElevatedButton(
      onPressed: () {},
      child: Text('ログインする'),
    ),
  ],
)

この場合、

  • Column が縦に並べる
  • Text が文字を表示する
  • ElevatedButton がボタンを表示する

というように、それぞれのWidgetが役割を分担しています。

Scaffold

使い所

Scaffold は、1画面の基本構造を作る時に使います。

Flutterでアプリ画面を作る時の土台になるWidgetです。

例えば、以下のように使います。

Scaffold(
  appBar: AppBar(
    title: Text('ホーム'),
  ),
  body: Center(
    child: Text('本文エリア'),
  ),
)

アプリの画面には、よく以下のような要素があります。

  • 上部のタイトルバー
  • 本文エリア
  • 右下の追加ボタン
  • 下部のナビゲーション

これらを配置しやすくしてくれるのが Scaffold です。

どう機能するのか

Scaffold は、アプリ画面の基本的な枠組みを用意してくれます。

代表的なプロパティは以下です。

プロパティ 役割
appBar 画面上部のバーを表示する
body 画面のメイン部分を表示する
floatingActionButton 右下の浮いたボタンを表示する
bottomNavigationBar 画面下部のナビゲーションを表示する
drawer 左側から開くメニューを表示する

イメージとしては以下です。

┌────────────────────┐
│ AppBar              │
├────────────────────┤
│ body                │
│                     │
│             FAB     │
├────────────────────┤
│ BottomNavigationBar │
└────────────────────┘

1画面を作る時は、まず Scaffold を置いて、その中に画面の中身を作っていくことが多いです。

使用例

Scaffold(
  appBar: AppBar(
    title: Text('顧客一覧'),
  ),
  body: Center(
    child: Text('ここに顧客一覧を表示します'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('追加ボタンが押されました');
    },
    child: Icon(Icons.add),
  ),
)

この例では、

  • appBar に画面タイトル
  • body に本文
  • floatingActionButton に追加ボタン

を配置しています。

実際に配置して試した例

実際に動かしてみると、Scaffold の中に appBar、body、floatingActionButton を分けて書けるので、画面全体の役割が整理しやすいと感じました。

業務アプリでも、一覧画面や詳細画面の土台としてかなりよく使います。

AppBar

使い所

AppBar は、画面上部にタイトルや操作ボタンを表示したい時に使います。

AppBar(
  title: Text('詳細画面'),
)

よく使う場面は以下です。

  • 画面タイトルを表示する
  • 戻るボタンを表示する
  • 右上に編集ボタンや設定ボタンを置く
  • メニューを表示する

どう機能するのか

AppBar は、基本的に Scaffold の appBar に指定して使います。

Scaffold(
  appBar: AppBar(
    title: Text('詳細画面'),
  ),
  body: Text('本文'),
)

画面遷移で前の画面がある場合は、戻るボタンが自動で表示されることもあります。

また、actions を使うと右側にボタンを配置できます。

AppBar(
  title: Text('詳細画面'),
  actions: [
    IconButton(
      icon: Icon(Icons.edit),
      onPressed: () {
        print('編集ボタンが押されました');
      },
    ),
  ],
)

使用例

Scaffold(
  appBar: AppBar(
    title: Text('商材詳細'),
    actions: [
      IconButton(
        icon: Icon(Icons.edit),
        onPressed: () {
          print('編集画面へ遷移');
        },
      ),
    ],
  ),
  body: Center(
    child: Text('商材の詳細情報を表示します'),
  ),
)

実際に配置して試した例

actions に IconButton を入れるだけで右上に操作ボタンを追加できるので、詳細画面の編集ボタンなどで使いやすそうだと感じました。

このように、詳細画面で「編集ボタン」を右上に置くような使い方ができます。

業務アプリでは、

  • 一覧画面
  • 詳細画面
  • 編集画面
  • 申請画面

など、画面名を表示するためによく使います。

ScaffoldとAppBarの関係

Scaffold は画面全体の土台です。
AppBar はその中の上部バーです。

Scaffold(
  appBar: AppBar(
    title: Text('ホーム'),
  ),
  body: Text('本文'),
)

関係としては以下のような感じです。

Scaffold
 ├─ AppBar
 └─ body

最初は、

画面を作るならScaffold
上のタイトルバーはAppBar

くらいの理解で大丈夫です。

最小構成の画面例

最後に、Flutterの画面としてかなり基本的な形を見てみます。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ホーム'),
      ),
      body: Center(
        child: Text('こんにちは'),
      ),
    );
  }
}

実際に配置して試した例

このコードでは、

  • HomePage が1つの画面
  • Scaffold が画面の土台
  • AppBar が上部バー
  • Center が中央寄せ
  • Text が文字表示

という役割になっています。

まとめ

この記事では、FlutterのWidgetの基本と、画面の土台になるWidgetを整理しました。

内容 役割
Widget Flutterの画面を構成する部品
Widgetツリー Widgetの親子構造
Scaffold 1画面の基本構造を作る
AppBar 画面上部のバーを作る

Flutterでは、Widgetを組み合わせて画面を作っていきます。

最初はWidgetの数が多く感じるかもしれませんが、

親Widgetが子Widgetをどう配置するか決める

という考え方を持っておくと、かなり理解しやすくなります。

次回は、Text、Image、Icon など、画面に情報を表示するためのWidgetを整理します。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?