UI・デザイン - 1m-llc/Flutter-KtoK GitHub Wiki

• Flutter Studio

  • FlutterのUIをドラッグ&ドロップでデザインして、ソースコードも見ることができます。
  • https://flutterstudio.app/

• Widget catalog

  • Flutterでは、UIを全部Widgetで表現します。公式でたくさんのWidgetがサポートされています。
  • https://flutter.dev/docs/development/ui/widgets

• Flutter Gallery

  • MATERIAL、CUPERTINO、スタイルなどのデモとコードを確認できます。
  • https://gallery.flutter.dev/

• cupertino_icons

  • Material Design準拠のMaterial Iconの場合であれば、公式のIcon一覧から気に入ったアイコンの名前を使えば良いので楽ですが、十分とは言えない。
    • https://pub.dev/packages/cupertino_icons

Icon(
  IconData(
    0xf394,
    fontFamily: CupertinoIcons.iconFont,
    fontPackage: CupertinoIcons.iconFontPackage,
  ),
),

• タブレット（レスポンシブ）対応
  • LayoutBuilderクラスを使用する
    • maxWidthが幅のブレークポイントより大きい場合は、左側にリストがある行を持つScaffoldオブジェクトを返すことができます。またユーザーが電話を回転させたりすると、ビルド機能が実行されます。MediaQuery.of（）メソッドを使用することで、現在のアプリのサイズ、向きなどがわかります。
  • https://flutter.dev/docs/development/ui/layout/responsive