初心者がFlutterを１から書く時のTips

今回は、「Flutterを学び始めて、いろんなWidgetがあるのは分かったけど、覚えきれない、、、」
「いちいちFlutter公式のウィジェットカタログ見るのがめんどくさい」人向けの記事です。

Ctrl + Space を使い倒す

Flutterでは、Ctrl + Space で、ウィジェットの中で使える機能の候補を出してくれます。

これを使って、候補に出てきたものを試し続けていくうちにどんどんFlutter に慣れていくことができます。

中身を入れたい機能にマウスオーバーして、引数を確認

先程の、Ctrl + Spaceを使って、title を入れてみました。
しかし、次に何を書けば良いのかわかりません。。。

そこで有効なのが、title の上でマウスオーバーすることです。すると、title:に使うことができる引数や具体例などを見ることができます。

これを見ると、{Widget? title} とあるので、title: のあとにはなんらかのwidgetが来れば良いことが分かります。

よりわかりやすい例を見てみます。

今度は、Text()の中身を見てみました。すると、

Text(String data,
	{Key? key,
	TextStyle? style,
	StrutStyle? strutStyle,
	TextAlign? textAlign,
	TextDirection? textDirection,
	Locale? locale,
	bool? softWrap,
	TextOverflow? overflow,
	double? textScaleFactor,
	int? maxLines,
	String? semanticsLabel,
	TextWidthBasis? textWidthBasis,
	TextHeightBehavior? textHeightBehavior})

と書いてあります。
これの通常の（）内、今回で言うと、一番最初に書いてある"String data"は、必須の引数になります。従って、String型のデータを入れることになります。
さらに、{}内の項目に関しては、任意で入れることができます。
基本的には、２つ並んでいる値の右側が「入れたい要素の指定」、左側が「具体的なデータ型の定義」だと思ってください。
実際に、入れるときには、

style : TextStyle(...),
textAlign : TextAlign.center,

のようになります。

#Flutterのアプリはこれの繰り返し
Flutterでのアプリ作成は、見た目だけを作るなら、以上の工程を繰り返せばできます。
見た目はこのように作成し、Statefulにしたいものや、特殊な動きや入力を加えたい部分だけ調べるという方法で書いていくのが良いと思います。