Flutterの再描画について

Question

#flutterの再描画につい質問です。

説明](f21d958032a22478435fe15702a92348.jpeg)

##目的
右の数字のボタンを押すと、左にあるTextFormFieldに数字の値を反映させたいと考えております。

##コード

import 'package:flutter/material.dart';
import 'package:callsystem/home/home_view.dart';
import 'package:flutter/rendering.dart';

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


class _InputPeoplesState extends State<InputPeoples> {

  // List<String> numList = ['1','2','3','4','5','6','7','8','9','0'];
  String _initialValue;

  void inputNum(String number) {
    setState(() {
      _initialValue = number;
    });
  }

  static _InputPeoplesState of(BuildContext context) {
    return context.ancestorStateOfType(TypeMatcher<_InputPeoplesState>());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          SafeArea(
            child: _titleHeader(),
          ),
          SizedBox(
            height: 50.0,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              new InputFeild(),
              Column(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(bottom: 30.0),
                    width: 450,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        _buttonNumber(number: '1'), // 数字ボタンのwidget
                        _buttonNumber(number: '2'),
                        _buttonNumber(number: '3'),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(bottom: 30.0),
                    width: 450,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        _buttonNumber(number: '4'),
                        _buttonNumber(number: '5'),
                        _buttonNumber(number: '6'),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(bottom: 30.0),
                    width: 450,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        _buttonNumber(number: '7'),
                        _buttonNumber(number: '8'),
                        _buttonNumber(number: '9'),
                      ],
                    ),
                  ),
                ],
              )
            ],
          )
        ],
      )
    );
  }

  Widget _buttonNumber({String number}){
    return Stack(
      children: <Widget>[
        Container(
          width: 130.0,
          height: 140.0,
        ),
        Positioned(
          top: 10,
          width: 130.0,
          height: 130.0,
          child: Container(
            decoration: BoxDecoration(
              color: Color(0xFF696969),
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
          ),
        ),
        Container(
          width: 130.0,
          height: 130.0,
          decoration: BoxDecoration(
            border: Border.all(color: Color(0xFF696969)),
            borderRadius: BorderRadius.circular(10),
          ),
          child: FlatButton(
            color: Color(0xFFF5F5F5),
            child: Text(
              '$number',
              style: TextStyle(
                fontSize: 40.0
              ),
            ),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10.0)),
            ),
            onPressed: (){
              inputNum(number);
            },
          )
        ),
      ],
    );
  }

  Widget _titleHeader(){
    return  Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              margin: EdgeInsets.only(left: 50.0),
              child: Text(
                '人数を入力してください',
                style: TextStyle(
                  fontSize: 32.0,
                )
              ),
            ),
            Container(
              margin: EdgeInsets.only(right: 50.0),
              child: FlatButton(
                child: Image.asset(
                  'images/icon/home.png',
                    width: 60.0,
                    height: 60.0,
                  ),
                onPressed: (){
                  Navigator.pop(
                    context,
                    MaterialPageRoute(builder: (context) => HomeView()),
                  );
                },
              )
            ),
          ]
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 1300.0,
              child: Divider(
                color: Colors.grey[800]
              ),
            )
          ],
        ),
      ],
    );
  }
}

  class InputFeild extends StatelessWidget{
    @override
    Widget build(BuildContext context){
      String _initialValue = _InputPeoplesState.of(context)._initialValue;
      print(_initialValue);
      return Container(
        width: 350.0,
        decoration: BoxDecoration(
          borderRadius:BorderRadius.all(Radius.circular(20.0)),
          border: Border(
            top: BorderSide(width: 6.0, color: Color(0xFF696969)),
            left: BorderSide(width: 6.0, color: Color(0xFF696969)),
            right: BorderSide(width: 6.0, color: Color(0xFF696969)),
            bottom: BorderSide(width: 6.0, color: Color(0xFF696969)),
          )
        ),
        child: TextFormField(
          initialValue: _initialValue,
          style: TextStyle(
            fontSize: 60.0,
            color: Color(0xFF696969)
          ),
          decoration: InputDecoration(
            contentPadding: EdgeInsets.symmetric(vertical: 50.0, horizontal: 20.0),
            border: InputBorder.none,
          ),
        ),
      );
    }
  }

##やっていること
数字ボタンを押すとinputNumメソッドが走り、数字の値が_initialValueに格納されます。
_initialValueの値をTextFormFieldのinitialValueプロパティに当てています。

printで見ると変数に値は入っているのですが、上手く再描画されません。

外部からTextFormFieldの入力値を変える場合はどのようにすればいいでしょうか？

Answer 1

TextFormFieldに値を渡す方法をinitialValueではなくcontrollerにするとうまく更新されました。

InputFeild のコードを貼っておきます。

class InputFeild extends StatefulWidget {
  @override
  _InputFeildState createState() => _InputFeildState();
}

class _InputFeildState extends State<InputFeild> {
  final _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    String _initialValue = _InputPeoplesState.of(context)._initialValue;
    print(_initialValue);
    _controller.text = _initialValue;
    return Container(
      width: 350.0,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20.0)),
          border: Border(
            top: BorderSide(width: 6.0, color: Color(0xFF696969)),
            left: BorderSide(width: 6.0, color: Color(0xFF696969)),
            right: BorderSide(width: 6.0, color: Color(0xFF696969)),
            bottom: BorderSide(width: 6.0, color: Color(0xFF696969)),
          )),
      child: TextFormField(
        controller: _controller,
        style: TextStyle(fontSize: 60.0, color: Color(0xFF696969)),
        decoration: InputDecoration(
          contentPadding:
              EdgeInsets.symmetric(vertical: 50.0, horizontal: 20.0),
          border: InputBorder.none,
        ),
      ),
    );
  }
}

TextFormFieldはinitialValueを使った場合、初期化時に内部でcontrollerを生成してしまい、リビルド時に内部のcontrollerの値を更新できないので、値が変更されないようでした。
なので自前でcontrollerを生成して、ビルド時に_controller.text = _initialValue;で値を渡してあげればよいようです。

※controllerを保持して、disposeするために、InputFeildをStatelessWidgetからStatefulWidgetに変えています。

---

補足

公式リファレンスにもそれっぽいことが書いてありました

If a controller is not specified, initialValue can be used to give the automatically generated controller an initial value.

コードを読むと、 TextFormFieldもStatefulWidgetになっていて、initStateでcontroller生成しているようです。

Comments

[art_porokyu]

ご丁寧にありがとうございます！
>TextFormFieldはinitialValueを使った場合、初期化時に内部でcontrollerを生成してしまい、リビルド時に内部のcontrollerの値を更新できないので、値が変更されないようでした。

なるほど。
それでビルド時の値が変わらなかったのですね。

余談になるかもしれないのですが、superやofなどはどのような役割をしているのでしょうか？

[popobot]

superは継承元の親クラスのメソッドを呼び出すために利用するDartの機能です。dispose()は親クラスであるStatefulWidgetにも定義されているメソッドなので、overrideした場合 super.dispose() を呼ぶ必要があります。

ofはFlutterで最も近い親Widgetを取得するメソッド名によく使われます。親Widgetのテーマを取得する場合 Theme.of()などを使います。
コード上のofは art_porokyuさん が定義しているメソッドのようですが、InputFeildからInputPeoplesStateを取得するのに利用されています。

[art_porokyu]

なるほど。
superはdartの機能なんですね。

ofも使い方が分かりました！
ご丁寧にありがとうございます！