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

スポンサーリンク

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

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

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 short, sweet and simple…

Stack、SizedBox、SafeAreaなど

実装イメージ

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

アプリUIデザインで使ってるツールまとめ。

アプリUIデザインで使ってるツールまとめ。|あゆみ|note
こんにちは、あゆみ( ayumiueda_)です。 2月から、実践型デザイン学習サービス『Cocoda!』で、毎日1つ出されるお題に沿ってアプリUIなどのデザインをするDaily Cocoda!にチャレンジしています。(今日までで25日連続ー!) Webデザインも昨年からやっているレベルなのですが、UIデザインは...

ICOOON MONOのアイコンとか個人的に好み
https://icooon-mono.com/

なお、公式のアイコンも充実しているので十分かもしれないです。
https://api.flutter.dev/flutter/material/Icons-class.html

アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ
https://qiita.com/sho5nn/items/3a2293e3549ba698a71c

あとで、確かめる

コメント

タイトルとURLをコピーしました