Flutter - состояние виджета не меняется

Question

Я почти новичок в Flutter и пытаюсь разработать приложение для чата. Каждый раз, когда пользователь отправляет сообщение, он должен изменить State из Widget, и сообщение должно отображаться в Listview.

Дело в том, что Widget State не изменяется при нажатии Button. Но если я Hot Reload мое приложение, оно меняет State Widget, и отображается сообщение. Я использую два Widgets для представления, и метод setState() вызывается в Child Widget. Как мне переосмыслить sh State из Widget из Child Widget.

Пожалуйста, просмотрите мои коды и дайте мне знать решение для этого. Заранее спасибо.

Родительский виджет:

class ChatScreen extends StatefulWidget {

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

class ChatState extends State<ChatScreen> {

  static const int _logout = 303;

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(
        title: Text(Strings.appNameString),
        actions: <Widget>[

          //IconButton(icon: Icon(Icons.add), onPressed: () {}),

          PopupMenuButton<int>(

            icon: Icon(Icons.more_vert),
            elevation: 10,
            //padding: EdgeInsets.all(5),
            offset: Offset(0, 100),
            itemBuilder: (BuildContext context) => [

              PopupMenuItem(child: Text("Logout"), value: _logout,),
              //PopupMenuDivider(height: 5,),
            ],
            onSelected: (value) {

              switch(value) {

                case _logout: {

                  MyClass.SignOutofGoogle();
                } break;

                default: break;
              }
            },
          ),
        ],
      ),
      body: Column(
//        crossAxisAlignment: CrossAxisAlignment.center,
//        mainAxisSize: MainAxisSize.max,
//        mainAxisAlignment: MainAxisAlignment.end,

        children: <Widget>[

          Flexible(child: ListView.builder(
              padding: new EdgeInsets.all(8.0),
              reverse: true,
              itemBuilder: (_, int index) => MyClass.messages[index],
              itemCount: MyClass.messages.length)),
          Container(
              child: ChatWidget()),
        ],
      ),
    );
  }

}

Детский виджет:

class ChatWidget extends StatefulWidget {

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

class ChatWidgetState extends State<ChatWidget> {

  final TextEditingController _textController = new TextEditingController();

  Widget _buildTextComposer() {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 10.0),

      child: Align(

        child: Column(

          children: <Widget>[
            Divider(height: 5.0, color: Colors.lightBlue,),
            Container(

              height: 6.8 * SizeConfig.heightSizeMultiplier,
              child: Row(

                children: <Widget>[
                  Container(
                    child: IconButton(
                        icon: Icon(Icons.add_photo_alternate),
                        iconSize: 6.7 * SizeConfig.imageSizeMultiplier,
                        color: Colors.lightBlueAccent,
                        onPressed: () {}),
                  ),
                  Flexible(
                    child: TextField(
                      controller: _textController,
                      onSubmitted: _handleSubmitted,
                      decoration: InputDecoration.collapsed(
                          hintText: "Send a message"),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 4.0),

                    child: IconButton(
                        icon: Icon(Icons.send),
                        iconSize: 6.7 * SizeConfig.imageSizeMultiplier,
                        color: Colors.lightBlueAccent,
                        onPressed: () {
                          _handleSubmitted(_textController.text);
                        }),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _handleSubmitted(String text) {

    _textController.clear();

    ChatMessage message = new ChatMessage(
      text: text,
    );

    setState(() {
      MyClass.messages.insert(0, message);
    });
  }

  @override
  Widget build(BuildContext context) {

    return _buildTextComposer();
  }
}


class ChatMessage extends StatelessWidget {

  final String text;

  ChatMessage( {
    this.text
  });

  @override
  Widget build(BuildContext context) {
    return new Container(
      margin: const EdgeInsets.symmetric(vertical: 10.0),

      child: Row(
        //crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.end,

        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.end,

            children: <Widget>[
              //Text(MyClass.loggeduser.userName, style: Theme.of(context).textTheme.subhead),
              Text("Sajib", style: Theme.of(context).textTheme.subhead),
              Container(
                margin: const EdgeInsets.only(top: 5.0),
                child: Text(text),
              ),
            ],
          ),
          Container(
            margin: const EdgeInsets.only(right: 6.0, left: 12.0),

            child: CircleAvatar(
              //backgroundImage: NetworkImage(MyClass.loggeduser.photoUrl)),
                child: Icon(Icons.account_circle, color: Colors.lightBlueAccent,)),
          ),
        ],
      ),
    );
  }
}

Answer 1

Во-первых, @ Dari sh прав в том, что вам, вероятно, следует использовать другой вид системы управления состоянием, но для вопроса «Как мне обновить sh Состояние виджета из дочернего виджета». Я дам два простых ответа:

1. Переместите ваш метод _handleSubmitted на ваш ChatState виджет и передайте его вашему ChatWidget:

   class ChatState extends State<ChatScreen> {
   
     ...
     @override
     Widget build(BuildContext context) {
         ...
         Container(
           child: ChatWidget(onMessageSubmitted: this._handleSubmitted)),
         ...
     }
   
     void _handleSubmitted(String text) {
       ChatMessage message = new ChatMessage(
         text: text,
       );
   
       setState(() {
         MyClass.messages.insert(0, message);
       });
     }
   }
   

   Затем из вашего дочернего виджета:

   class ChatWidget extends StatefulWidget {
   
     final Function(String) onMessageSubmitted;
   
     ChatWidget({this.onMessageSubmitted});
   
     @override
     ChatWidgetState createState() => ChatWidgetState();
   }
   
   class ChatWidgetState extends State<ChatWidget> {
     ...
   
     Widget _buildTextComposer() {
       ...
       TextField(
         controller: _textController,
         onSubmitted: _handleSubmitted,
         decoration: InputDecoration.collapsed(
         hintText: "Send a message"),
       ),
       ...
       IconButton(
         ...
         onPressed: () {
           _handleSubmitted(_textController.text);
         },
       ),
       ...
     }
   
     void _handleSubmitted(String text) {
       _textController.clear();
   
       widget.onMessageSubmitted(text);
     }
     ...
   }
   

2. Доступ к вашему ChatState напрямую из вашего ChatWidgetState:

   class ChatScreen extends StatefulWidget {
   
     ...
   
     static ChatState of(BuildContext context) => context.findAncestorStateOfType<ChatState>();
   }
   
   class ChatState extends State<ChatScreen> {
   
     ...
   
     void onMessageSubmitted(String text) {
       ChatMessage message = new ChatMessage(
         text: text,
       );
   
       setState(() {
         MyClass.messages.insert(0, message);
       });
     }
   }
   

   Затем в вашем ChatWidget вы можете оставить как есть, но в вашем ChatWidgetState измените свой _handleSubmitted метод следующим образом:

   void _handleSubmitted(String text) {
     _textController.clear();
   
     ChatScreen.of(context).onMessageSubmitted(text);
   }
   

Номер 2 ближе к другому возможно лучше методы управления состоянием, но оба примера являются примерами обновления состояния родительского виджета непосредственно из дочернего виджета.