Flutterで売れるアプリを作ってみようPart15　キャラクターの枠のデザインに奥行きを作ってみた

小さなデザインの変更をしました

ちょっとずつゲームっぽくなって来ていて楽しいです

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

今できているもの

今回できたものはこちらです

• 文字のフォントを変えた
• 文字に影をつけた
• コマに目を書いた
• キャラクターの枠のデザインを替えた

ニューモーフィズムのUIかっこいい

Flutterで売れるアプリを作ってみようPart15　キャラクターの枠のデザインに奥行きを作ってみた https://t.co/qh4jSnc0ov pic.twitter.com/yguHLZffDD

— おとぼう (@otobou0320) August 13, 2021

学んだこと

Flutter-Neumorphic

flutter_neumorphicライブラリは奥行き感のあるデザインが作れます

こちらにサンプルがたくさんあります

Neumorphic(
  style: NeumorphicStyle(
  shape: NeumorphicShape.concave,
  boxShape:
      NeumorphicBoxShape.roundRect(BorderRadius.circular(12)),
  depth: -5,
  intensity: 10,
  lightSource: LightSource.topLeft,
  color: Theme.of(context).primaryColor,
),
child: Container(
  child: RiveAnimation.asset(
    player.playerImage.src,
    animations: const [Constants.ASSET_ANIMATION_IDLE],
  ),
),

ライセンスはApache-2.0 Licenseです

次にやること

ゲームのUIをよくする