animation_sample

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<int> _tempoAnimation;
  bool _isPlaying = false;
  double _value = 1000;
  List<bool> _isTapList = List<bool>.generate(10, (i) => false);
  Icon _buttonIcon = Icon(Icons.play_arrow);

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: _value.toInt()),
    );

    // Tween<int>を使用するとエラーが発生
    // _tempoAnimation = Tween<int>(begin: 0, end: 7).animate(CurvedAnimation(
    //   parent: _animationController,
    //   curve: Interval(0.0, 1.0, curve: Curves.elasticOut),
    // ));

    // こっちは大丈夫
    _tempoAnimation = IntTween(begin: 0, end: 7).animate(
      _animationController,
    );

    // これも大丈夫
    // _tempoAnimation = StepTween(begin: 0, end: 8).animate(_animationController);

    _tempoAnimation.addListener(() {
      if(_tempoAnimation.value >= 8){
        print('step: ${_tempoAnimation.value}');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation demo'),
      ),
      // body: buildTableRow(),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              'スピード : ${_value.toStringAsFixed(0)}',
              style: TextStyle(fontSize: 24),
            ),
          ),
          Slider(
            min: 0,
            max: 3000,
            value: _value,
            divisions: 3000,
            onChanged: (value) {
              setState(() {
                _value = value <= 0 ? 1 : value;
                _animationController.duration =
                    Duration(milliseconds: _value.toInt());
              });
              if (_isPlaying) _animationController.repeat();
            },
          ),
          Text(
            'Stack版',
            style: TextStyle(fontSize: 24),
          ),
          Container(
            alignment: Alignment.center,
            margin:
                EdgeInsets.only(left: MediaQuery.of(context).size.width / 5),
            child: _buildStack(),
          ),
          Text(
            'Table版その1',
            style: TextStyle(fontSize: 24),
          ),
          Padding(
            padding: EdgeInsets.all(20),
            child: SizedBox(
              width: 8 * 30.0,
              height: 30.0,
              child: _buildTable(),
            ),
          ),
          Text(
            'Table版その2(Transform.scale)',
            style: TextStyle(fontSize: 24),
          ),
          Padding(
            padding: EdgeInsets.all(20),
            child: SizedBox(
              width: 8 * 30.0,
              height: 30.0,
              child: _buildTable2(),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: _buttonIcon,
        onPressed: () {
          // _animationController.forward();
          _isPlaying = !_isPlaying;
          if (_isPlaying) {
            _animationController.repeat();
          } else {
            _animationController.stop();
          }
          setState(() {
            _buttonIcon =
                _isPlaying ? Icon(Icons.pause) : Icon(Icons.play_arrow);
          });
        },
      ),
    );
  }

  @override
  void dispose() {
    if (_animationController != null) {
      _animationController.dispose();
      _animationController = null;
    }
    super.dispose();
  }

  Widget _buildTable() {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (BuildContext context, Widget widget) {
        var tbl = Table(
          children: [],
          border: TableBorder.all(color: Colors.black),
        );
        // for (int row = 0; row < 10; row++) {
        var list = List<Widget>.generate(
          8,
          (i) => GestureDetector(
            // child: Container(
            child: AnimatedContainer(
              height: 30,
              width: 30,
              color: _isTapList[i]
                  ? (i != _tempoAnimation.value
                      ? Colors.lightGreen
                      : Colors.red)
                  : (i != _tempoAnimation.value ? Colors.white : Colors.blue),
              duration: Duration(milliseconds: 400),
            ),
            onTap: () {
              setState(() {
                _isTapList[i] = !_isTapList[i];
              });
            },
          ),
        );
        tbl.children.add(
          TableRow(
            children: list,
          ),
        );
        // }
        return tbl;
      },
    );
  }

  Widget _buildTable2() {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (BuildContext context, Widget widget) {
        var table = Table(
          children: [],
          border: TableBorder.all(color: Colors.black),
        );
        var list = List<Widget>.generate(
          8,
          (i) => GestureDetector(
            child: Transform.scale(
              child: AnimatedContainer(
                height: 30,
                width: 30,
                color: _isTapList[i]
                    ? (i != _tempoAnimation.value
                        ? Colors.lightGreen
                        : Colors.red)
                    : (i != _tempoAnimation.value ? Colors.white : Colors.blue),
                duration: Duration(milliseconds: 400),
              ),
              scale: _isTapList[i] ? 1.5 : 1.0,
            ),
            onTap: () {
              setState(
                () {
                  _isTapList[i] = !_isTapList[i];
                },
              );
            },
          ),
        ).toList();
        table.children.add(
          TableRow(
            children: list,
          ),
        );
        return table;
      },
    );
  }

  Widget _buildStack() {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (BuildContext contet, Widget widget) {
        var diff = 5;
        var stack = SizedBox(
          width: MediaQuery.of(context).size.width,
          height: 100,
          child: Stack(
            children: _createBoxes(_tempoAnimation.value, diff),
          ),
        );
        return stack;
      },
    );
  }

  List<Widget> _createBoxes(int index, int diff) {
    var fuga = List<Widget>.generate(
      8,
      (x) {
        var i = 1 + x + index >= 8 ? 1 + x + index - 8 : 1 + x + index;
        return Positioned(
          top: (i == _tempoAnimation.value ? 30 - diff : 30).toDouble(),
          left: (i == _tempoAnimation.value
                  ? 10.0 + i * 30.0 - diff
                  : 10.0 + i * 30.0)
              .toDouble(),
          width: (i == _tempoAnimation.value ? 30 + diff * 2 : 30).toDouble(),
          height: (i == _tempoAnimation.value ? 30 + diff * 2 : 30).toDouble(),
          child: GestureDetector(
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.blue),
                color: _isTapList[i]
                    ? (i != _tempoAnimation.value
                        ? Colors.lightGreen
                        : Colors.red)
                    : (i != _tempoAnimation.value ? Colors.white : Colors.blue),
              ),
            ),
            onTap: _isPlaying
                ? null
                : () {
                    setState(
                      () {
                        _isTapList[i] = !_isTapList[i];
                        print('change $i : ${_isTapList[i]}');
                      },
                    );
                  },
          ),
        );
      },
    ).toList();
    return fuga;
  }
}