Flutter Web 文本表单字段不接受输入

Question

我尝试通过运行 pub run build_runner clean

清除状态

但 Form 中的所有 TextFormField 仍然不接受输入（只是空白）。

我正在使用 Flutter 1.9。 TextField 也不接受输入。

我不知道

这是我的代码

import 'package:flutter_web/material.dart';

class AddContent extends StatefulWidget {
  AddContent({Key key}) : super(key: key);
  _AddContentState createState() => _AddContentState();
}

class _AddContentState extends State<AddContent> {

  final TextStyle mStyleBlack = TextStyle(fontFamily: 'arial', fontSize: 13, color: Colors.black);
  final TextStyle mStyleHintBlack = TextStyle(fontFamily: 'arial', fontSize: 13, color: Colors.black45);
  final TextStyle mStyleWhite = TextStyle(fontFamily: 'arial', fontSize: 13, color: Colors.white70);
  final mStyle = TextStyle(fontSize: 20, fontFamily: 'arial');
  final _formKey = GlobalKey<FormState>();

  TextEditingController _idController = TextEditingController();
  TextEditingController _videoController = TextEditingController();

  List<String> imageFieldList = [''];
  List<TextEditingController> imageFieldControllers = [TextEditingController()];

  int imageCount = 0;
  String dropdownValue = 'none';

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    final id = TextFormField(
        controller: _idController,
        style: mStyleHintBlack,
        decoration: InputDecoration(
          labelText: 'Place Id',
          labelStyle: mStyleHintBlack,
          border: OutlineInputBorder(
            )
          ),
          validator: (val) {
          if(val.isEmpty) {
            return 'Place Id cannot be empty';
          } else {
            print('ID: ${_idController.text}');
            return null;
          }
        },
    );

    final dropdownField = Row(
      children: <Widget>[
        Text('Select Category', style: mStyleBlack),
        SizedBox(width: 20),
        DropdownButton<String>(
            value: dropdownValue,
            onChanged: (String newValue) {
              setState(() {
                dropdownValue = newValue;
              });
            },
            items: <String>['none', 'Restaurant', 'Hotel', 'Shop', 'Beauty', 'School', 'Event']
              .map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value, style: mStyleBlack,),
                );
              })
              .toList(),
        )
      ],
    );

    final videoField = TextFormField(
      obscureText: false,
      controller: _videoController,
      style: mStyleHintBlack,
      decoration: InputDecoration(
        labelText: 'Youtube Video Link',
        labelStyle: mStyleHintBlack,
        border: OutlineInputBorder(
          ),  
        ),
    );

    final submitButton = Material(
      borderRadius: BorderRadius.circular(30),
      color: Color(0xff01A0C7),
      child: MaterialButton(
        minWidth: MediaQuery.of(context).size.width,
        child: Text('Add', style: mStyleWhite),
        onPressed: () {
          print('Add Button Pressed!');
          if(_formKey.currentState.validate()) {
          }
        },
      ),
    );

    return Container(
          padding: EdgeInsets.all(15),
          child:  Form(
              key: _formKey,
              child: Column(
                children: <Widget>[
                  id,
                  Container(height: 3),
                  dropdownField,
                  Container(height: 3),
                  videoField,
                  Container(height: 10),
                  Row(
                    children: <Widget>[
                    Expanded(
                      child:
                      Container(
                        alignment: Alignment.center,
                        height: 35,
                        child: Text('Images', style: mStyleBlack,),
                      )
                    ),
                    Expanded(
                      child: 
                      Container(
                        alignment: Alignment.center,
                        height: 35,
                        child: InkWell(
                          child: Icon(Icons.add, color: Colors.green),
                          onTap: () {
                            print('Add Place Tapped!!!');
                            setState(() {
                              imageFieldList.add(''); 
                              imageFieldControllers.add(TextEditingController());
                            });
                          },
                        ),
                      ),
                    ),
                    ],
                  ),
                  Column(
                    children: 
                      List.generate(imageFieldList.length, (index) => 
                          imageField(index)
                      )
                  ),
                  Container(height: 10), 
                  submitButton
                ],
              ),
            )
    );
  }

  Widget imageField(int index) {
    return Row(
        children: <Widget>[
          Expanded(
            flex: 9,
            child: TextFormField(
              controller: imageFieldControllers.elementAt(index),
              style: mStyleHintBlack,
              decoration: InputDecoration(
                labelText: 'Image ${index + 1}',
                labelStyle: mStyleHintBlack,
                border: OutlineInputBorder(
                  )
                ),
                validator: (val) {
                if(val.isEmpty) {
                  return 'Image cannot be empty';
                } else {
                  print('Image ${index + 1}: ${imageFieldControllers.elementAt(index).text}');
                  return null;
                }
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: (index > 0)? 
              Container(
                child: InkWell(
                  child: Icon(Icons.remove_circle),
                  onTap: () {
                    print('Remove Image');
                    setState(() {
                     imageFieldList.removeAt(index); 
                     imageFieldControllers.removeAt(index);
                    });
                  },
                )
              ):
              Container()
          )
        ],
      );
  }
}

Answer 1

看这个无法在 TextField 中输入文本 [Flutter_web] #40055 https://github.com/flutter/flutter/issues/40055

Answer 2

最近flutter团队添加了new way用于构建flutter web应用程序，TextField没有问题。虽然现在有一个警告 - 它只适用于主频道。

Answer 3

执行此步骤

flutter channel master2.flutter upgrade3.flutter config --enable-web
1. cd 进入项目目录 5. flutter create . 6.flutter run -d chrome

Flutter Web 文本表单字段不接受输入

FlutterWeb TextFormFields are not accepting Inputs

dart

flutter

flutter-web