flutter - FlutterWeb TextFormFields不接受输入

标签 flutter dart flutter-web

enter image description here

我尝试通过运行pub run build_runner clean清除状态

TextFormField中的所有Form仍不接受输入(仅空白)。

我正在使用 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()
          )
        ],
      );
  }
}

最佳答案

最近,Flutter团队添加了new way来构建Flutter Web应用程序,并且TextField没有问题。尽管现在有一个警告-仅在主 channel 上有效。

关于flutter - FlutterWeb TextFormFields不接受输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57885515/

相关文章:

flutter - 在Flutter中隐藏/删除StatusBar(单击按钮)

flutter - 在 BottomNavigationBar 选项卡之间传递 StreamBuilder => 错误状态 : Stream has already been listened to

firebase - 试用期机制 - Flutter/Firebase

flutter - 从 Flutter 网页导航中删除哈希符号 ' # '

flutter - 有没有办法让动画不停止 Flutter 驱动程序?

flutter - 在 Flutter Web 中嵌入 Youtube 视频

android - Flutter 键盘在 android 中隐藏文本字段,但在 iOS 中工作正常

flutter - 如果用户尝试单击禁用的单选按钮,则显示提示文本

user-interface - 如何在flutter for web中使用 'tab'在控件之间跳转?

json - 更改 Flutter Web 应用程序的名称和描述