[Flutter]デザイン周りの参考情報

Twitter などでFlutter開発に参考になる情報がたくさん流れてきてありがたいのですが、
いざ、自分が実装しようと思ったときに、あれ、あの情報ってどこだっけ？と探すのが結構きつくなったので、ここにまとめていきます。

Flutterでの開発をスムーズに行うためのTips集
1. 実装イメージ
Icons class
1. 実装イメージ
FlutterLogo
1. 実装イメージ
Flutter Layout Cheat Sheet
1. 実装イメージ
アプリUIデザインで使ってるツールまとめ。

Flutterでの開発をスムーズに行うためのTips集

以下のドキュメントにかぶる内容も含まれていますが、僕が良いなと思っているやり方を共有します。

全体的に参考になる情報ばかりですが、後回しの個所に使うPlaceholderとか参考になりました。

実装イメージ

Widget pendingWidget(String message, double pendingHeight) {
  return SizedBox(
    height: pendingHeight,
    child: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Placeholder(
            color: Colors.red,
            ),
        Text(message, style: TextStyle(fontSize: 24)),
      ],
    ),
  );
}

Icons class

Icons class - material library - Dart API

API docs for the Icons class from the material library, for the Dart programming language.

使えるアイコンが並んでいます。使えるのが多い。
モック作成とかはここの画像で十分かなと。

実装イメージ

  child: Container(
    margin: EdgeInsets.all(8.0),
    child: Icon(
      Icons.photo_camera,
      color: Colors.pink,
      size: 48.0,
      semanticLabel: 'Text to announce in accessibility modes',
    ),
  ),

FlutterLogo

FlutterLogo class - material library - Dart API

API docs for the FlutterLogo class from the material library, for the Dart programming language.

FlutterLogoが使える。

実装イメージ

  child: Container(
    margin: EdgeInsets.all(32.0),
    child: FlutterLogo(
      size: 120,
    ),
  ),

Flutter Layout Cheat Sheet

Flutter Layout Cheat Sheet

Do you need simple layout samples for Flutter? I present you my set of Flutter layout code snippets. I will keep it shor...

Stack、SizedBox、SafeAreaなど

実装イメージ

      body: Stack(
        children: <Widget>[
          Align(
・・・
          ),
          Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
・・・
              ],
            ),
          ),
          Align(
・・・
          ),
        ],
      ),