実践Flutter

Flutterでスマホを中心にアプリ制作していきます。

Flutterアプリの基本構成要素・ウィジェット

はじめに

Flutterをはじめるに当たり、最も基本的な要素について簡単に述べておきます。

FlutterのアプリはWidget(ウィジェット)というパーツの組み合わせでできています。下の図で一番トップに書いてあるのがルートのWidgtetで、その子Widgetが1つあるいは複数あってツリー構造を形成しています。

f:id:linkedsort:20211107114245p:plain

このWidgetをブロック細工のように組み合わせていくのがFlutterアプリ開発です。

Widgetには大きく分けて2種類:

  • GUIのパーツを構成する、目に見えるもの
  • レイアウトを構成する、目に見えない空間を制御するもの

があります。

GUIパーツはボタンだとかテキストを入力するフィールドなどです。見えない部分はパーツを縦に並べる、横に並べる、空白を作るといったものです。

これってHTML/CSSによるウェブページ構成とほとんど変わらない考え方ですよね。

ある意味、HTML/CSSを超リッチな表現力を持つプログラミング言語で記述していくようなイメージになります。かなりリッチなものになるので全然違うように見えるかも知れませんが、本質的にはあまり変わりません。気楽に書いていく感じでOKです。





Widget(ウィジェット)

Flutterで作成されたアプリケーションの画面に出力されている全てはWidgetです。ボタンやテキストフィールドなどのUIパーツや、これらパーツを置く基盤となるページも全てWidgetです。

プロジェクトを新規に作ったときにデフォルトでmain.dartに書かれる雛形は下記のコードから始まります。

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    ...
    ...

main()関数がエントリポイントですが、そのなかでrunAppという関数が呼ばれ、そのパラメタとしてアプリのルートとなるWidgetを与えます。

ここではMyAppクラスのコンストラクタを渡していますが、MyAppはStatelessWidgetというWidgetクラスを継承していますので、MyAppもWidgetということですね。

もうこの後の記述はすべてWidgetのパーツの組み合わせとその動作の記述でFlutterプロジェクトは基本的に成り立っています。

この重要な感覚だけをお伝えして、今回は終わりにしましょう。


おわりに

長いエントリの多い本ブログですが、はじめから飛ばしすぎても重たくなりすぎるので、いちばん重要なポイントだけをお伝えして一回区切りにします。

上で上げたコードや、Flutterプロジェクトを最初に作ったときにデフォルトでmain.dartに書かれているコードの意味がまだよくわからなくても、あまり気にしなくて大丈夫です。全部徐々に、もっと簡単な形に変えていきながら使います。そのなかで最小限のところを抑えていきましょう。

それにしてもmain.dartにデフォルトで書かれる内容は、ちょっと書きすぎではないかと思うのですけれどもね。皆さんはどう思われますでしょうか。

親切で書かれていると思うのですが、若干威圧感があり、かつ大概の人が自分のスタイルを構築していくので、あのデフォルトのmain.dartで提示されるスタイルを貫く人がそんなに多いのかというと、そうでもない気がします。

そうなると多くの人は、一旦あれを全選択→全削除してからがスタート、みたいになりますよね。

かの名著というか原点「プログラミング言語C」からの伝統で、プログラミング言語は最初に画面に「Hello, world」という文字列を出力するところから大体入門が始まります。そんなコードがデフォルトでもよいのでは、と思いますが、ずいぶん欲張っていますよね。

f:id:linkedsort:20211107122419j:plain