【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に当てはめるとこんな感じになります。

なんかそれっぽい画面が完成しましたね。

おわりに

ここで紹介したWidgetはアプリを作る上でかなりの確率で使うことになると思うのでこれだけでも知って帰ってもらえればと思います。

なんとなくWidgetの概念のイメージは伝わったでしょうか?

最初は理解できないのは当然だと思うので、ぜひ実際に手を動かしてアプリを作りながら覚えていくのが一番いいと思います。

最後までご覧いただきありがとうございました。

Flutterを基礎から体系的に学習したい方はこの書籍がおすすめです!

このブログでは様々なWidgetの解説記事も書いているので、よければそちらも見てもらえると嬉しいです!

【Flutter】画面遷移の実装方法【サンプルコードあり】

 

【Flutter】ListViewの使い方【サンプルコードあり】

 

【Flutter】Widgetのサイズを変更できるSizedBoxの使い方【サンプルコードあり】

 

【Flutter】Icon Widgetの使い方【サンプルコードあり】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です