🍞

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

6 min read

Flutter してますか?

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

ということで、

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

今日のレシピ

材料

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

作り方

  1. メインの生地を焼きます。大きな丸い形にしてください。焼きすぎて焦げてしまわないように注意しましょう。こんがり色づいたら焼き上がりです。
  2. 左右の頬の生地を焼きます。小さい丸い形にしてください。1の生地よりはしっかりと焼きましょう。美味しそうなオレンジ色になったら焼き上がりです。ツヤがでるととっても仕上がりがよくなりますので、ツヤ出しのバターをお忘れなく。
  3. お鼻の生地を焼きます。頬よりひとまわり小さい丸い形にしてください。1、2の生地と比べてずっとしっかり焼きます。赤色に近いところまで焼いてください。こちらもバターでツヤだしすることをお忘れなく。
  4. 1の上に2と3を乗せます。
  5. 楕円形のチョコレートチップを4の上に乗せていきます。大きすぎたら気持ち悪くなりますし、小さすぎると弱そうに見えるので一番かっこよく見える大きさを見つけてみてください。
  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 {
  
  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);
  }

  
  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 {
  
  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);
  }

  
  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