Flutterで個別にanimationさせる

#buttonのanimationを個別で行いたい。

##やりたいこと
現在写真のようなレイアアウトになっています。
数字buttonを押すとメソッドが走り個別にbuttonが下に下がるようanimationさせたいです。

##コード

input.dart
1class _InputPeoplesState extends State<InputPeoples> {
2
3  String _initialValue;
4
5  double top = 0;
6  double buttonWidth = 120.0;
7  double clearButtonWidth = 260.0;
8
9  void inputNum(String number) {
10    setState(() {
11      top = 5.0;
12      _initialValue += number;
13      Timer(Duration(milliseconds: 300,), () {
14        buttonUp();
15      });
16    });
17  }
18
19  void cleaNum() {
20    setState(() {
21      top = 5.0;
22      _initialValue = '';
23      Timer(Duration(milliseconds: 300,), () {
24        buttonUp();
25      });
26    });
27  }
28
29  void buttonUp(){
30    setState(() {
31      top = 0.0;
32    });
33  }
34
35
36  @override
37  Widget build(BuildContext context) {
38    return Scaffold(
39      body: Column(
40        children: <Widget>[
41          SafeArea(
42            child: _titleHeader(),
43          ),
44          SizedBox(
45            height: 50.0,
46          ),
47          Row(
48            mainAxisAlignment: MainAxisAlignment.spaceAround,
49            children: <Widget>[
50              new InputFeild(initialValue: _initialValue),
51              Column(
52                children: <Widget>[
53                  Container(
54                    margin: EdgeInsets.only(bottom: 15.0),
55                    width: 400,
56                    child: Row(
57                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
58                      children: <Widget>[
59                        _buttonNumber(number: '1', buttonWidth: buttonWidth), // 数字ボタンのwidget
60                        _buttonNumber(number: '2', buttonWidth: buttonWidth),
61                        _buttonNumber(number: '3', buttonWidth: buttonWidth),
62                      ],
63                    ),
64                  ),
65                  Container(
66                    margin: EdgeInsets.only(bottom: 15.0),
67                    width: 400,
68                    child: Row(
69                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
70                      children: <Widget>[
71                        _buttonNumber(number: '4', buttonWidth: buttonWidth),
72                        _buttonNumber(number: '5', buttonWidth: buttonWidth),
73                        _buttonNumber(number: '6', buttonWidth: buttonWidth),
74                      ],
75                    ),
76                  ),
77                  Container(
78                    margin: EdgeInsets.only(bottom: 15.0),
79                    width: 400,
80                    child: Row(
81                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
82                      children: <Widget>[
83                        _buttonNumber(number: '7', buttonWidth: buttonWidth),
84                        _buttonNumber(number: '8', buttonWidth: buttonWidth),
85                        _buttonNumber(number: '9', buttonWidth: buttonWidth),
86                      ],
87                    ),
88                  ),
89                  Container(
90                    margin: EdgeInsets.only(bottom: 30.0),
91                    width: 400,
92                    child: Row(
93                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
94                      children: <Widget>[
95                        _buttonNumber(number: '0', buttonWidth: buttonWidth),
96                        _buttonNumber(number: 'クリア', buttonWidth: clearButtonWidth),
97                      ],
98                    ),
99                  ),
100                ],
101              )
102            ],
103          )
104        ],
105      )
106    );
107  }
108
109  Widget _buttonNumber({String number, double buttonWidth}){
110    return Stack(
111      children: <Widget>[
112        Container(
113          width: buttonWidth,
114          height: 130.0,
115        ),
116        Positioned(
117          top: 10,
118          width: buttonWidth,
119          height: 120.0,
120          child: Container(
121            decoration: BoxDecoration(
122              color: Color(0xFF696969),
123              borderRadius: BorderRadius.all(Radius.circular(10.0)),
124            ),
125          ),
126        ),
127        AnimatedPositioned(
128          top: top,
129          duration: Duration(milliseconds: 100),
130          width: buttonWidth,
131          height: 120.0,
132          child:Container(
133            decoration: BoxDecoration(
134              border: Border.all(color: Color(0xFF696969)),
135              borderRadius: BorderRadius.circular(10),
136            ),
137            child: FlatButton(
138              color: Color(0xFFF5F5F5),
139              child: Text(
140                '$number',
141                style: TextStyle(
142                  fontSize: 40.0
143                ),
144              ),
145              shape: RoundedRectangleBorder(
146                borderRadius: BorderRadius.all(Radius.circular(10.0)),
147              ),
148              onPressed: (){
149                if(number == 'クリア') {
150                  cleaNum();
151                } else {
152                  inputNum(number);
153                }
154              },
155            ),
156
157          ),
158        ),
159      ],
160    );
161  }
162}

##現状
現状はbutton Widgetを切り出して共通化しているので、どれかのbuttonを押すと全てにtopの値が適用され、全てのbuttonが下がるanimationが走ってしまいます。

##やってみたこと
jQuery的な考えでthisを使ってみましたが上手く行きませんでした。
button毎に違うWidgetにすれば話は早いのですが、そうするとかなりコードが長くなってしまいあまりしたくありません。

何か他の方法があればご教授お願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

現状だとtopの変数が１つしかなく、ボタンの数だけ用意されていないので、一つのボタンを押すと、全てのボタンのtopが変更されています。各ボタンごとにtopを用意する必要があると思います。

実装方法はいくつかあると思いますが、ボタンを作る処理_buttonNumberをメソッドではなく、StatefulWidgetにして、その中にtop変数を用意してあげれば、うまく行くと思います。

よくわからなければ、動くサンプルを書いてみたので、参考にしてください

class InputPeoples extends StatefulWidget {
  @override
  _InputPeoplesState createState() => _InputPeoplesState();
}

class _InputPeoplesState extends State<InputPeoples> {
  String _initialValue = '';

  double buttonWidth = 120.0;
  double clearButtonWidth = 260.0;

  void addNumber(String number) {
    setState(() {
      _initialValue += number;
    });
    print(_initialValue);
  }

  void clear() {
    setState(() {
      _initialValue = '';
    });
    print(_initialValue);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: <Widget>[
        SizedBox(
          height: 50.0,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Column(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(bottom: 15.0),
                  width: 400,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      _ButtonNumber(
                          number: '1',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('1')),
                      _ButtonNumber(
                          number: '2',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('2')),
                      _ButtonNumber(
                          number: '3',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('3')),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(bottom: 15.0),
                  width: 400,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      _ButtonNumber(
                          number: '4',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('4')),
                      _ButtonNumber(
                          number: '5',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('5')),
                      _ButtonNumber(
                          number: '6',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('6')),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(bottom: 15.0),
                  width: 400,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      _ButtonNumber(
                          number: '7',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('7')),
                      _ButtonNumber(
                          number: '8',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('8')),
                      _ButtonNumber(
                          number: '9',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('9')),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(bottom: 30.0),
                  width: 400,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      _ButtonNumber(
                          number: '0',
                          buttonWidth: buttonWidth,
                          onPressed: () => addNumber('0')),
                      _ButtonNumber(
                          number: 'クリア',
                          buttonWidth: clearButtonWidth,
                          onPressed: clear),
                    ],
                  ),
                ),
              ],
            )
          ],
        )
      ],
    ));
  }
}

class _ButtonNumber extends StatefulWidget {
  _ButtonNumber({this.number, this.buttonWidth, this.onPressed});

  final number;
  final buttonWidth;
  final onPressed;

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

class _ButtonNumberState extends State<_ButtonNumber> {
  double top = 0;

  void buttonDown() {
    setState(() {
      top = 5.0;
      widget.onPressed();
      Timer(
          Duration(
            milliseconds: 300,
          ), () {
        buttonUp();
      });
    });
  }

  void buttonUp() {
    setState(() {
      top = 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          width: widget.buttonWidth,
          height: 130.0,
        ),
        Positioned(
          top: 10,
          width: widget.buttonWidth,
          height: 120.0,
          child: Container(
            decoration: BoxDecoration(
              color: Color(0xFF696969),
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
          ),
        ),
        AnimatedPositioned(
          top: top,
          duration: Duration(milliseconds: 100),
          width: widget.buttonWidth,
          height: 120.0,
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(color: Color(0xFF696969)),
              borderRadius: BorderRadius.circular(10),
            ),
            child: FlatButton(
              color: Color(0xFFF5F5F5),
              child: Text(
                '${widget.number}',
                style: TextStyle(fontSize: 40.0),
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(10.0)),
              ),
              onPressed: () {
                buttonDown();
              },
            ),
          ),
        ),
      ],
    );
  }
}

主な変更点

_buttonNumberメソッドはStatefulWidgetを継承した_ButtonNumberクラスにして、_ButtonNumberStateにtop変数やアニメーションの処理を移動しました。
_initialValueを変更する処理は、_InputPeoplesState側に必要なので、処理を分けて、ボタンが押されたら実行されるようにしました。
元のコードにあった_titleHeader()やInputFeild()の部分は削除していますので、ご注意ください