Flutterのアニメーションをほんの少しだけ試してみる①

FlutterのAnimationを使ったことがありますか？

初めまして、可茂IT塾の新入りMukaigaです！ ついに記事を書く機会をもらえました。

僕はAnimation系は難しいと思っていたので、jsでも全然触ってきませんでした。 しかし、物は試しということで、Flutterのアニメーションをほんの少しだけ触ってみたいと思います！

基本的なアニメーション「AnimatedContainer」

まずはFlutterアニメーションで分かりやすい、AnimatedContainerをご紹介！

コード全文

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animation Demo 1',
      theme: ThemeData(primarySwatch: Colors.red),
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  double _width = 10;
  double _height = 10;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _width = 400;
            _height = 200;
          });
        },
        child: const Icon(Icons.play_arrow),
      ),
      body: Center(
        child: AnimatedContainer(
          duration: const Duration(seconds: 1),
          width: _width,
          height: _height,
          color: Colors.red,
        ),
      ),
    );
  }
}

ボタンを押したときのsetStateで更新した値を、AnimatedContainerに渡してあげます。 AnimatedContainerは、durationパラメータを指定してあげると、秒数指定など色々調整できます。 他にも様々なパラメータが指定できますよ！！

また、今回は大きさ（widthとheight）を変えましたが、色なども変化させることができます！

AnimatedContainerを使えば、これだけで簡単にショボいアニメーションができましたね！！ まだまだ色々なアニメーション用のWidgetがあるので気になったら調べて見て下さい！

参考 : https://docs.flutter.dev/development/ui/animations/tutorial

おまけ　目に悪いアニメーション

こんなショボいアニメーションやだよ！そう思ったあなたに。とっておきのアニメーションを用意させて頂きました。良かったら使ってください。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _textColor;
  late Animation<Color?> _backgroundColor;

  @override

  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 150),
      vsync: this,
    );
    _textColor = ColorTween(
      begin: Colors.yellow,
      end: Colors.red,
    ).animate(_controller);
    _backgroundColor =
        ColorTween(begin: Colors.red, end: Colors.yellow).animate(_controller);
    _controller.repeat(reverse: true);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Animation Demo',
      home: Scaffold(
        body: AnimatedBuilder(
            animation: _backgroundColor,
            builder: (context, child) {
              return Container(
                color: _backgroundColor.value,
                child: Center(
                  child: AnimatedBuilder(
                    animation: _textColor,
                    builder: (context, child) {
                      return Text(
                        "可茂IT塾",
                        style: TextStyle(
                            color: _textColor.value,
                            fontSize: 60,
                            fontWeight: FontWeight.bold),
                      );
                    },
                  ),
                ),
              );
            }),
      ),
    );
  }
}