Flutter TextEditingController 保留值而不点击完成按钮答案

【问题标题】：Flutter TextEditingController retain value without hitting done buttonFlutter TextEditingController 保留值而不点击完成按钮
【发布时间】：2020-04-10 17:45:55
【问题描述】：

简单的添加地点小部件

标题文本字段
容器 - 从相机渲染图像
按钮 - 激活相机设备

我认为将控制器连接到 TextField 会自动保存输入值的状态。但是，在我的示例中，如果我输入文本而不单击“完成”并立即单击“拍照”按钮。相机操作回来后TextField输入值被清除。

如何重现问题：

在字段中输入文本
立即点击相机按钮，无需点击完成/检查或按键盘上的回车键
拍照确认。
回到TextField为空的页面

示例代码：

AddPlacePage StatefulWidget

Column(
              children: <Widget>[
                TextField(
                  decoration: InputDecoration(labelText: 'Title'),
                  controller: _titleController,
                ),

                ImageInput(),
              ],
            ),

ImageInput StatefulWidget

  class _ImageInputState extends State<ImageInput> {
  File _storedImage;

  Future<void> _takePicture() async {
    final imageFile = await ImagePicker.pickImage(
      source: ImageSource.camera,
      maxWidth: 600,
    );
    setState(() {
      _storedImage = imageFile;
    });
    ...
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Container(
          ...
          child: _storedImage != null
              ? Image.file(
                  _storedImage,
                  fit: BoxFit.cover,
                  width: double.infinity,
                )
              : Text(
                  'No Image Taken',
                  textAlign: TextAlign.center,
                ),
          alignment: Alignment.center,
        ),

        Expanded(
          child: FlatButton.icon(
            icon: Icon(Icons.camera),
            label: Text('Take Picture'),
            textColor: Theme.of(context).primaryColor,
            onPressed: () => _takePicture(),
          ),
        ),
      ],
    );
  }
}

问题：

如何修改 TextField 的控制器以在退出应用程序访问设备摄像头后仍保留输入值？

TextField(
  decoration: InputDecoration(labelText: 'Title'),
  controller: _titleController,
),

我确实尝试过创建一个局部变量并尝试使用 onChange：

   String _inputValue

   build(BuildContext context){

     ...   
     TextField(
        decoration: InputDecoration(labelText: 'Title'),
        controller: _titleController,
        onChange: (value) => _inputValue = value;
     ),

但是，当 Flutter 重新刷新页面时，从相机返回后效果是一样的，_inputValue 和 _titleController.text 都被清除了。

示例代码： https://github.com/erich5168/flutter_camera_example

【问题讨论】：

在您的类中声明一个静态变量，然后使用 on text changed 方法将文本字段值分配给它。
这不应该发生，文本应该保留在文本字段中。您的 TextField 与触发相机的按钮位于不同的视图上？
@OMiShah 我做了...请参阅问题下面的代码我使用了 onChnage...但没有工作
@JoãoSoares 是的，你是对的...... AddPlacePage 有一个脚手架 [这是 TextField 所在的位置]。并将相机按钮和图像预览提取到单独的 StatefulWidget。
@JoãoSoares 我已经添加了 github repo...希望这会让它更容易...谢谢

标签： flutter

【解决方案1】：

您可以使用share preferences 将字符串保存到设备，然后在返回文本字段时调用它。这就是我的实现方式：

class LocalStorage {
  static SharedPreferences instance;

  static Future init() async {
    instance = await SharedPreferences.getInstance();
  }

  static dynamic getValue(String key, dynamic emptyValue) {
    if (LocalStorage.instance.containsKey(key)) {
      return LocalStorage.instance.get(key);
    }
    return emptyValue;
  }
}

将其设置为文本字段：

TextEditingController _usernameController =
  new TextEditingController(text: LocalStorage.getValue('UserName', ''));

【讨论】：

如果代码编写得当，这个解决方案看起来有点过头了。