如何启用/禁用按钮仅取决于使用文本流的一个文本字段

Question

我试图在仅依赖于一个文本字段的flutter中禁用/启用按钮，我使用流。我不知道该怎么做。我以前做过，但是我不记得我是怎么做的。这是一个代码。

TextField的代码：

TextField(
            controller: balanceFieldText,
            onChanged: name == KOREK ? bloc.korekSink : bloc.asiaSink,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              errorText: snapshot.error,
              errorStyle: TextStyle(color: Colors.amber),
              enabledBorder: UnderlineInputBorder(
                borderRadius: BorderRadius.circular(20.5),
              ),
              errorBorder: UnderlineInputBorder(
                  borderSide: BorderSide(
                      color: Colors.red[900],
                      style: BorderStyle.solid,
                      width: 2)),
              fillColor: Colors.white,
              filled: true,
              prefixIcon: IconButton(
                icon: Icon(
                  Icons.camera_alt,
                  color: Colors.grey,
                ),
                onPressed: () {
                  print('sdfgsg');
                },
              ),
              suffixIcon: IconButton(
                  icon: Icon(
                    Icons.keyboard_voice,
                    color: Colors.grey,
                  ),
                  onPressed: () {
                    print('adfaf');
                  }),
              labelText: 'ژمارەی کارت',
              labelStyle: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.w300,
              ),
              hintText: 'ژمارەی سەر کارتەکە وەك خۆی بنوسەوە',
              hintStyle: TextStyle(color: Colors.grey, fontSize: 12.5),
            ),
          );
        }),

这是我按钮的代码：

 RaisedButton(
    child: Text('پڕبکەوە'),
    onPressed: /* how to check it here to make button enable if textfield has no error  */ null,
  );

我希望它在文本字段有效时启用按钮。

Answer 1

我不知道这可以解决您的问题...。如果选择我的解决方案，则需要更新rxdart和provider的pubspec.yaml导入库。在bloc.dart：

中

class Bloc extends Object with Validators{
    final Behavior<String> _checkText = Behavior<String>();
    Observable<String> get checkText => _checkText.stream.transform(validateText);// the transform is used to check whenever there is some changed in your textfield and done some validation 
    Function(String) get checkTextOnChanged => _checkText.sink.add;
}

在validators.dart中：

class Validators {
  final StreamTransformer<String, String> validateText =
      StreamTransformer<String, String>.fromHandlers(
          handleData: (String text, EventSink<String> sink) {

    // Sample of checking text pattern 
    const Pattern pattern = r'^[0-9]*$';
    final RegExp regex = RegExp(pattern);

    if (text != null) {
      if (!regex.hasMatch(text)) {
        sink.add(null);
        sink.addError('text only accept number!');
      } else {
        sink.add(text);
      }
    }
  });
}

在您的screen.dart中：

final Bloc bloc = Provider.of<Bloc>();
TextField(
    .....
    onChanged: bloc.checkText,
    .....
);

StreamBuilder(
    stream:bloc.checkText, 
    builder:(BuildContext context, AsyncSnapshot<String> snapshot){
    return RaisedButton(
        .....
        onPressed: !snapshot.hasdata ? null : buttonOnPressedEvent(), // handle event when the textfield is valid or not
        color: !snapshot.hasdata ? Colors.grey : Colors.blue // this used to change preview color button if the data has exist
        .....
    );
});

希望这可以为您提供一些解决问题的灵感，祝您好运！