具有bloc模式的TextFormField为Subbmiting null

时间:2019-04-02 12:46:30

标签: forms dart flutter bloc

使用TextFormField时,我无法添加或更新数据,提交给db的数据始终为null或出现NoSuchMethodErrorerror

I/flutter ( 6511): Another exception was thrown: NoSuchMethodError: The getter 'value' was called on null

我已经按照这样建立了Bloc:

class ProductsBloc {

  String id;
//  Product _product;


  // ignore: close_sinks
//  static final _productController = BehaviorSubject<Product>();
//  Stream<Product> get productOut => _productController.stream;

  // ignore: close_sinks
  final _id = BehaviorSubject<int>();
  // ignore: close_sinks
  final _title = BehaviorSubject<String>();
  // ignore: close_sinks
  final _message = BehaviorSubject<String>();
  // ignore: close_sinks
  final _price = BehaviorSubject<String>();

  Observable<int> get idOut => _id.stream;
  Observable<String> get titleOut => _title.stream.transform(_validateTitle);
  Observable<String> get message => _message.stream;
  Observable<String> get price => _price.stream;

  Function(int) get changeId => _id.sink.add;
  Function(String) get changeTitle => _title.sink.add;
  Function(String) get changeMessage => _message.sink.add;
  Function(String) get changePrice => _price.sink.add;

  final _validateTitle = StreamTransformer<String, String>.fromHandlers(handleData: (title, sink){
    if(title.isNotEmpty){
      sink.add(title);
    } else {
      sink.addError('Add some text');
    }
  });

  Future<void> createProduct({title}) {
    return db.createProduct(DateTime.now().millisecondsSinceEpoch.toString(), title.value, _message.value, _price.value);
  }

用户界面如下:

class _ProductEditPageState extends State<ProductEditPage> {

  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  final _titleFocusNode = FocusNode();
  final _descriptionFocusNode = FocusNode();
  final _priceFocusNode = FocusNode();

  final id;
  final title;
  final message;
  final price;

  _ProductEditPageState(this.id, this.title, this.message, this.price);

  final Map<String, dynamic> _formData = {
    'title': null,
    'message': null,
    'price': null,
    'image': 'assets/food.jpg'
  };

  Widget _buildTitleTextField(ProductsBloc productBloc) {
    return StreamBuilder(
      stream: productBloc.titleOut,
      builder: (context, snapshot) {
        return TextFormField(
          focusNode: _titleFocusNode,
          onSaved: (String value){ _formData['title'] = value;},
          initialValue: title,
          decoration: InputDecoration(labelText: 'Title', errorText: snapshot.error),
        );
      },
    );
  }

和这样的提交。 提交的数据,因为如果我将提交更改为无参数,或者该参数将数据库填充为空,则会捕获到错误NoSuchMethodFound。

child: Form(
            key: _formKey,
            child: ListView(
              padding: EdgeInsets.symmetric(horizontal: targetPadding / 2),
              children: <Widget>[
                _buildTitleTextField(productBloc, ),
                _buildDescriptionTextField(productBloc),
                _buildPriceTextField(productBloc),
                SizedBox(
                  height: 10.0,
                ),
                RaisedButton(
                  child: Text('Save'),
                  textColor: Colors.white,
                  onPressed: () {
                    if(id != null) {
                      productBloc.updateData(id);
                    }
                    else{
                      productBloc.createProduct(
                        title: _formData['title'],
                      );
                    }
                    Navigator.of(context).pop();
                  },

这也是我的模特

class Product {

  final db = Firestore.instance.collection('products');

  Future<void> createProduct(String docId, String title, String message, String price) async {
    await db.document(docId).setData({'id': docId, 'title': title, 'message': message, 'price': price});
  }

  void readData(String docId){
    db.document(docId).get();
  }

  Future<void> deleteData(String docId) async {
    await db.document(docId).delete();
  }

  Future<void> updateData(String docId, String title, String message, String price) async {
    await db.document(docId).updateData({'title': title, 'message': message, 'price': price});
  }

}

Product db = Product();

我也在使用flutter的提供程序包,所以我认为提供程序是正确的:

   return MultiProvider(
      providers: [
        Provider<ThemeBloc>(
          value: ThemeBloc(),
        ),
        Provider<UserBloc>(
          value: UserBloc(),
        ),
        Provider<ProductsBloc>(
          value: ProductsBloc(),
        ),
      ],
      child: StreamBuilder<ThemeData>(

使用textFields可以正常工作,但在编辑之前我需要先查看表单中是否填充了一些初始数据,因此显然我需要使用TextFormFields。

1 个答案:

答案 0 :(得分:0)

您的代码非常混乱,但据我所知,您在_formData['title']中写了onSaved,但您从未调用过FormState.save()

您是否曾尝试在保存按钮的_formKey.currentState.save()中调用onPressed