Flutterで売れるアプリを作ってみようPart16 デザインを統一してみた

ほのぼのリバーシ

デザインを統一したのでそれっぽくなってきました

最初はこちら、前回はこちら、次回はこちらを参照してください

今できているもの

背景、文字、ボタンのデザインを統一しました

フルスクリーンに対応しました

学んだこと

文字のスタイルなどはTheme.ofで共通の設定を使う

文字のスタイルをすべてTheme.ofで取得することで、

後からデザインの変更することが容易になります

Text(
  'ほのぼのリバーシ',
  style: Theme.of(context).textTheme.headline1,
),

FittedBoxで画面サイズに合わせた文字にする

画面サイズによって2行になることを防ぐため、

FittedBoxで画面サイズに合わせた文字サイズにできます

FittedBox(
  fit: BoxFit.fitWidth,
  child: Text(
    'ほのぼのリバーシ',
    style: Theme.of(context).textTheme.headline1,
  ),
),

GridViewのスクロール禁止

NeverScrollableScrollPhysicsを設定するとスクロールしなくなります

physics: NeverScrollableScrollPhysics()

次にやること

ゲームの結果画面をおしゃれにしたい

コメント

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