flutter_fluxでStoreからTextFieldテキストを変更するには？

Question

flutter_flux example新しいメッセージをコミットすると、_currentMessageは空になりますが、TextFieldにはその変更が反映されません。

これは、ストア内のコードです：

triggerOnAction(commitCurrentMessageAction, (ChatUser me) { 
     final ChatMessage message = 
      new ChatMessage(sender: me, text: _currentMessage); 
     _messages.add(message); 
     _currentMessage = ''; 
    }); 

ビューは、それが更新されない理由を私は理解してTextFieldウィジェットのためのコントローラとしてTextEditingControllerを使用しています。

flutter_fluxでStoreからTextFieldを空にするにはどうすればよいですか？

Answer 1

編集：私はこの回答を掲載以来flutter_fluxの例では、更新されている、それが正しくTextFieldではなく、より良い方法でメッセージを破棄します。あなたはそれをチェックアウトする必要があります。

---

私は正しい方法ではなく、単にその店でcurrentMessageを維持する、ChatMessageStoreへTextEditingControllerを移動することだと思います。次に、TextEditingControllerのclear()を呼び出して、テキストフィールドを空にすることができます。

通常、バニラフラッターで通常FooStateに保持される状態値はflutter_fluxを使用するとStoreになります。通常はStateにTextEditingControllerを作成して保存するので、とにかくStoreに保存するのが自然です。 TextEditingControllerがテキスト値の変更自体の世話をするだろうと私たちはもはや、setCurrentMessageActionが必要

class ChatMessageStore extends Store { 
    ChatMessageStore() { 
    triggerOnAction(commitCurrentMessageAction, (ChatUser me) { 
     final ChatMessage message = 
      new ChatMessage(sender: me, text: currentMessage); 
     _messages.add(message); 
     _msgController.clear(); 
    }); 
    } 

    final List<ChatMessage> _messages = <ChatMessage>[]; 
    final TextEditingController _msgController = new TextEditingController(); 

    List<ChatMessage> get messages => 
     new List<ChatMessage>.unmodifiable(_messages); 
    TextEditingController get msgController => _msgController; 
    String get currentMessage => _msgController.text; 

    bool get isComposing => currentMessage.isNotEmpty; 
} 

注：

更新ChatMessageStoreは、次のようになります。

ChatScreenウィジェットで定義されているmsgControllerを削除して、それに応じて_buildTextComposerを更新することができました。

Widget _buildTextComposer(BuildContext context, ChatMessageStore messageStore, 
    ChatUserStore userStore) { 
    final ValueChanged<String> commitMessage = (String _) { 
    commitCurrentMessageAction(userStore.me); 
    }; 

    ThemeData themeData = Theme.of(context); 
    return new Row(children: <Widget>[ 
    new Flexible(
     child: new TextField(
      key: const Key("msgField"), 
      controller: messageStore.msgController, 
      decoration: const InputDecoration(hintText: 'Enter message'), 
      onSubmitted: commitMessage)), 
    new Container(
     margin: new EdgeInsets.symmetric(horizontal: 4.0), 
     child: new IconButton(
      icon: new Icon(Icons.send), 
      onPressed: 
       messageStore.isComposing ?() => commitMessage(null) : null, 
      color: messageStore.isComposing 
       ? themeData.accentColor 
       : themeData.disabledColor)) 
    ]); 
} 

希望します。