Flutterでうんこ流せたんやで！！[完成]

突然やけど、

StatelessWidgetは静的　StatefulWidgetは動的

って事らしいから、

ボタンでうんこを流す為に、前回までのコードもいくつか変更するんやで！

まず、うんこ画像

//うんこ画像コード

class MyUnko extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Container( alignment: Alignment(0.0, 0.2), child: Image.network('https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200514/20200514210228.png'),

);

}

}

StatelessWidget使ってるや〜ん、、

StatelessWidgetはStatefulWidgetに変えてみるやで。

既存のコードを変えただけやと上手くいかんかったから。

// ここから
class MyToto extends StatefulWidget {
@override
_MyToto createState() => _MyToto();
}
// ここまで

クラス_MyTotoはステートフル（StatefulWidget）やぞって教えてあげて

クリエイトステート(createState)でステート(State)返すんやぞ！

って感じにするんやで。

※ここは妄想も入ってるから、とりあえず今はスルーしてや。

要するにクラスの_MyTotoの中に全部放り込んだんやで。

class _MyToto extends State<MyToto>

// これは下で説明
with SingleTickerProviderStateMixin {

// ここまで

• SingleTickerProviderStateMixin:
  一つのクラスで使うAnimationControllerが1つのとき
• TickerProviderStateMixin:
  一つのクラスで使うAnimationControllerが2つ以上のとき

で、画像のコード箇所はこれ

child: Stack(
alignment: Alignment.center,
children: <Widget>[

SizedBox(
// アニメーションの状態をみて描画処理を実行
width: animation.value,
height: animation.value,

child: Stack(
children: <Widget>[
Align(
child: Image.network('https://cdn-ak.f.st-hatena.com/images/fotolife/b/bon_programming/20200514/20200514210228.png'),
),
]
),
),

],
),

で、最後にどーーーーん！

//アニメーションの操作（メソッド）
Animation<double> animation;
AnimationController controller;
final tween = Tween(begin: 300.0, end: 0.0);

// Stateを初期化する
initState() {
super.initState();

// アニメーションの時間
controller = AnimationController(
duration: const Duration(milliseconds: 1000), vsync: this);

// 状態が書き換わると描画を更新
animation = tween.animate(controller)
..addListener(() {
setState(() {});
});
}

// アニメーションの状態を見て、再生か逆再生の判断
nagasu() {
switch (animation.status) {
case AnimationStatus.dismissed:
case AnimationStatus.reverse:
controller.forward();
break;
case AnimationStatus.completed:
case AnimationStatus.forward:
controller.reverse();
break;
}
}

 うんこ流れたやーーーーーん！！涙

今回はさすがにスムーズにはいかず、参考にさせていただいたWeb備忘録さまのおかげでなんとか半ば強引なとこもあるけど完成まで持ち込めたんやで。ありがとうございます！m(_  _)m

Flutter アニメーション入門 │ Web備忘録

まだ、自分でもよくわからん点、上手く説明できてない箇所などあるから後日また詳しく分析してみようと思うんやで。

とにかく完成してよかったわ。。

うんこを流そう！！[完成] m(_  _)m

Flutterだけにホットシタードやわ。

あ、ホットリロードやわ。

ん？　寒いって？

ま、水に流してや。

うんこだけに！！！！！

DartPadにコード貼り付けて見てみるんやで！

 https://dartpad.dev/flutter