個人的にFlutterで何回も調べがちなことまとめ #iOS

個人的な備忘としてまとめておきます
最近弊社で開発してるAndroidアプリがFlutter製ということもあり、
開発する中で何度も調べることがもっと増えてくると思うので逐次更新していきます。

環境

Flutter 1.17.4
Dart 2.8.4

Container の装飾周り

角丸にする


Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(4.0),
  ),
);

枠線を描く

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
);

影をつける

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 0,
        blurRadius: 4,
        offset: Offset(0, 2),
      ),
    ],
  ),
);

Navigator での画面遷移周り

画面遷移

Flutter 画面遷移 でいつも調べてます
Navigator は iOS と同じならスタック（後のせ先取り）なので push はお皿を積むイメージ

Navigator.push(
  context,
  MaterialPageRoute<Null>(
    settings: RouteSettings(name: "/detail"),
    builder: (BuildContext context) => Container();
  )
);

前の画面に戻る

pop はお皿を取るイメージ
一枚だけ上からとります

Navigator.pop(context);

rootまでpopする

積んだお皿全部退けます

Navigator.popUntil(context, ModalRoute.withName('/'));

TextField の装飾周り

枠線を描く

iOS ちっくなTextFieldにしたいときよく使う


TextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
);

ラベルとヒントをつける

プレースホルダー的なやつを設定したいときあるけどよく忘れる

TextField(
  decoration: InputDecoration(
    labelText: 'ラベル',
    hintText: 'ヒント',
  ),
);