【Flutter】UI構築する際の基本、Widgetついて解説！【サンプルコードあり】

今回はFlutterを語るには欠かせないWidgetについて書いていきます。

初心者の方にもわかりやすいように噛み砕いて書いてみたので、最後まで読んでもらえると嬉しいです。

簡単に言えば、Widgetとは

FlutterでUIを作る時の見た目に関わる全てのパーツ

のことを指します。

WEBアプリでは「見た目に関わる部分」はHTMLとCSS、あとはJavaScriptで表現されますが、Flutterにおいてはこれら全てをDartで書かれたWidgetで表現します。

開発元のGoogleも「Everything is a Widget」言っている様に、Flutterのアプリはほぼ全てがWidgetで構成されています。

https://flutter.dev/docs/resources/architectural-overview

具体的にいうとアプリのテキスト、ヘッダー、フッターそれら以外の見えない部分もほぼ全てWidgetです。

プログラミングが分かる方にはWidgetを「インスタンス」という言葉に置き換えた方がイメージ伝わりやすいかもしれません。

「見た目に関わる部分」という表現が少し分かりにくいかもしれませんが、単に目に見える文字列やボタンだけでなく、ページを遷移したりアニメーションをする処理も見た目に直結する処理なので、Widgetになります。

文字だけでは何言ってるのか分からないと思うので次でよく使われるWidgetの例を上げてみようと思います。

よく使われるWidget

Text

TextWidgetはアプリ内に文字を表示したい時に使う最も一般的なWidgetです。

単一のスタイルを持つテキストで、これを書くだけでアプリ内に「ただのテキスト」と表示されます。

dart

Text('ただのテキスト')

AppBar

AppBarはすなわち液晶上部に表示させるヘッダーです。

先程のText Widgetと組み合わせる事で、ヘッダーに文字を表示させたり、アイコンを設置したり出来ます。

dart

AppBar(title: Text('スクショ！'))

BottomNavigationBar

BottomNavigationBarは液晶下部に表示させるいわゆるフッターです。

アイコンを表示させて、タップした時の処理を記述することで画面遷移などができるようになります。

dart

      BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home2'),
          ),
        ],
      ),

Scaffold

Scaffoldは各画面のレイアウトのベースを作るWidgetです。

イメージとしては白紙のキャンバスです。

ページを1つ作成する時は基本的にこのScaffoldをベースに、上記で紹介したTextやappBarやbottomNavigationBarなどの他のWidgetを配置していく形になります。

dart

    //　上省略
    return Scaffold(
      // ヘッダーを表示
      appBar: AppBar(
        title: Text('スクショ！'),
      ),
      // テキスト（Centerは囲むことで要素を中央に表示できるWidget）
      body: Center(
        child: Text('ただのテキスト'),
      ),
　　　 //　フッターを表示
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home2'),
          ),
        ],
      ),
    );

これまでに紹介したWidgetをベースとなるScaffoldに当てはめるとこんな感じになります。