Zenn
🍞

Flutterで有名なパン🍞をつくってみよう

2021/02/25に公開
Flutter
tech

Flutter してますか？

こんにちは、すぎっとです。
今日は Flutter でアプリのレイアウトを組む練習として私が 暇つぶしで 挑戦した内容にてついて共有しようと思います。

ということで、

(私の知る限り)日本で一番有名なパン を Flutter で焼いてみようと思います。

今日のレシピ

材料

  • メインの生地
  • 左右の頬の生地（ツヤ出し）
  • 立派なお鼻の生地（ツヤ出し）
  • チョコレートチップ（つぶらな瞳）× ２
  • チョコペン（キリリとした眉とニッコリお口）

作り方

  1. メインの生地を焼きます。大きな丸い形にしてください。焼きすぎて焦げてしまわないように注意しましょう。こんがり色づいたら焼き上がりです。
  2. 左右の頬の生地を焼きます。小さい丸い形にしてください。１の生地よりはしっかりと焼きましょう。美味しそうなオレンジ色になったら焼き上がりです。ツヤがでるととっても仕上がりがよくなりますので、ツヤ出しのバターをお忘れなく。
  3. お鼻の生地を焼きます。頬よりひとまわり小さい丸い形にしてください。１、２の生地と比べてずっとしっかり焼きます。赤色に近いところまで焼いてください。こちらもバターでツヤだしすることをお忘れなく。
  4. １の上に２と３を乗せます。
  5. 楕円形のチョコレートチップを４の上に乗せていきます。大きすぎたら気持ち悪くなりますし、小さすぎると弱そうに見えるので一番かっこよく見える大きさを見つけてみてください。
  6. 最後の仕上げです。チョコペンでキリリとした眉を描いてください。続いてニッコリとお口を書いてください。
  7. 完成です

つくってみよう

ではひとつづつ説明します。

1.メインの生地

今回は手軽に Container で用意しようと思います。生地を丸めるには decoration を指定します。BoxDecoration を使いましょう。形を変えるには shape を指定します。生地の焼き上がりは薄い黄色でしたね。color を指定しましょう。

こんな感じです。

    Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
	color: Color(0xFFE7A676), // こんがりとした焼き色
	shape: BoxShape.circle,
      ),
    ),

2.頬の生地

頬の生地もメインの生地と同様に Container を使って decoration で色と形を決めていきます。

Container(
  height: 52,
  width: 52,
  decoration: BoxDecoration(
    color: Color(0xFFDA6B4F), // 美味しそうなオレンジ色に
    shape: BoxShape.circle,
  ),
),

バターでツヤ出しする必要がありましたね。ツヤ出しは白い四角でいいでしょう。これも Container で作ってしまいましょう。頬の生地の上にツヤを出すので Stack を使って重ねましょう。ツヤを中央に置いてしまうと少し美味しそうではないのでライティングの角度を変えて少し上側に配置しましょう。
配置は親の中央を基準にする と考えやすいです。この場合、頬の生地の真ん中を基準にツヤを出す感じですね。いろいろなやり方がありますが、アレコレ考えるのも面倒なのでお手軽に Padding でズラしてしまいましょう。

    Stack(
      alignment: Alignment.center,
      children: [
	Container(
	  height: 52,
	  width: 52,
	  decoration: BoxDecoration(
	    color: Color(0xFFDA6B4F),
	    shape: BoxShape.circle,
	  ),
	),
	Padding(
	  padding: EdgeInsets.only(bottom: 12), // 少し上にずらして…
	  child: Container(
	    height: 10,
	    width: 10,
	    color: Colors.white, // ツヤ出しホワイト
	  ),
	),
      ],
    ),

3.お鼻の生地

お鼻の生地の作り方は頬の生地とまったく同じです。一回り小さくすること、少ししっかりと焼き色をつけることをお忘れなく。

Container(
  height: 50, // ひとまわり小さく
  width: 50,
  decoration: BoxDecoration(
    color: Color(0xFFD45245), // しっかりとした焼き色
    shape: BoxShape.circle,
  ),
),

4.メインの生地(1)の上に頬(2)と鼻(3)をのせる

メインの生地の上にのせるには Stack を使います。左右の頬とお鼻が横一線にのることになりますので、これらは Row でまとめてしまうといいですね！

Stack(
  alignment: Alignment.center,
  children: [
   Container(
    // 下地の生地コンテナ
   ),
　　Row(
  　　mainAxisAlignment: MainAxisAlignment.center,
  　　　children: [
    　　　// 左頬
    　　　// 鼻
    　　　// 右頬
  　　　],
　　　),
   ],
)

5.おめめ

おめめは楕円のチョコチップです。左右は同じ形でいいでしょう。

おめめは Container で楕円を作ります。Container は便利ですね。小麦粉みたいなもんですね。チョコだけど。楕円は Container を ClipOval で囲んで作ってみましょう。

    ClipOval(
      child: Container(
	height: 30,
	width: 15,
	color: Colors.black,
      ),
    ),

メインの生地にのせる方法は頬や鼻と同じように Row を使いましょう。
このまま左右のおめめを配置するとかなり寄り目になってしまうので、SizedBox でラクして余白を入れましょう。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ClipOval(
      child: Container(
	height: 30,
	width: 15,
	color: Colors.black,
      ),
    ),
    SizedBox(width: 30),
    ClipOval(
      child: Container(
	height: 30,
	width: 15,
	color: Colors.black,
      ),
    ),
  ],
),

おめめは頬がある横一線よりは上側にあって欲しいので、メインの生地の Stack に Column をかませておきましょう。Column を使って、目のラインと頬&鼻のラインの 2 段にするってことですね。（あとで眉と口が追加されるので最終的には 4 段です）

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    // おめめゾーン
    // 頬 & 鼻ゾーン
  ],
)

6.まゆとおくち

CustomPaint を使いましょう。
まずはお口から。

CustomPaint で使用する CustomPainter を作ります。

class MousePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTRB(0, 0, size.width, size.height);
    final startAngle = math.pi / 12 * 0;
    final sweepAngle = math.pi / 12 * 12;
    final useCenter = false;
    final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = size.width * 0.03;
    canvas.drawArc(rect, startAngle, sweepAngle, useCenter, paint);
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

startAngle を起点に sweepAngle 分だけ回すようにカーブを描く Painter です。
Paint()のあとに..color や..style がありますが、これは Cascade notation という書き方です。見慣れない方はこちらを参考にしてください。
https://dart.dev/guides/language/language-tour#cascade-notation-

これを使っていい感じのカーブを作れば OK です。

CustomPaint(
  size: Size(80, 20),
  painter: MousePainter(),
),

眉も同様に作ります。
CustomPainter がこんな感じ

class EyebrowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTRB(0, 0, size.width, size.height);
    final startAngle = math.pi / 12 * 12;
    final sweepAngle = math.pi / 12 * 12;
    final useCenter = false;
    final paint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = size.width * 0.1;
    canvas.drawArc(rect, startAngle, sweepAngle, useCenter, paint);
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

Widget ツリーの方はこんな感じです。
2 つの眉を並べるので Row を使って、おめめ同様、SizedBox で余白を作っています。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    CustomPaint(
      size: Size(20, 20),
      painter: EyebrowPainter(),
    ),
    SizedBox(width: 30),
    CustomPaint(
      size: Size(20, 20),
      painter: EyebrowPainter(),
    ),
  ],
),

7. いただきま〜〜す

美味しい！！！

リポジトリ

こちらです。
https://github.com/sugitlab/flutter_anpanman

GitHubで編集を提案

Discussion