首页 > 解决方案 > 与提供者一起颤振表单

问题描述

我是 Flutter 和提供者的新手。我正在尝试使用提供者制作一个表单,以便在我的代码中分离我的逻辑,但我正在努力......

我在屏幕上的表格:

class CalculatorScreen extends StatefulWidget{
  CalculatorScreen({Key key}) : super(key: key);
  @override
  _CalculatorScreenState createState() => _CalculatorScreenState();
}

class _CalculatorScreenState extends State<CalculatorScreen> {
  final TextEditingController _controllerDistance = TextEditingController();

  @override
  void dispose(){
    _controllerDistance.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (() => FocusScope.of(context).requestFocus(FocusNode())),
      child: Scaffold(
          body : _buildBody(context)
      ),
    );
  }

  Widget _buildBody(BuildContext context)
  {
    var _formCalculatorProvider = Provider.of<FormCalculatorNotifier>(context);
    return SingleChildScrollView(
      child: Column(
        children: [
          ContainerComponent(
            background: AppColors.colorBgLight,
            children: [
              Form(
                key : _formCalculatorProvider.globalFormKey,
                autovalidate: _formCalculatorProvider.autovalidate,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    TextFormField(
                      decoration: InputDecoration(
                        labelText: "Distance",
                      ),
                      controller: _controllerDistance,
                      keyboardType : TextInputType.number,
                      validator: (String value){
                        return FormValidatorService.isDistanceValid(value);
                      },
                      onSaved: (var value) {
                        _formCalculatorProvider.saveDistance(value);
                      }
                    ),
                  ],
                ),
              ),
              ButtonComponent.primary(
                  context: context,
                  text: "Send",
                  onPressed: _formCalculatorProvider.submit,
              ),
            ],
          )
        ],
      ),
    );
  }
}

我的通知者:

enum FormCalculatorState{
  READY,
  SUCCESS,
  ERROR
}

class FormCalculatorNotifier with ChangeNotifier {
  final GlobalKey<FormState> globalFormKey = GlobalKey<FormState>();
  FormCalculatorState formState = FormCalculatorState.READY;
  bool autovalidate = false;
  FormCalculatorModel formData = FormCalculatorModel();

  void saveDistance(String value){
    print("save");
    formData.distance = num.tryParse(value).round();
    notifyListeners();
  }

  void submit(){
    if (!globalFormKey.currentState.validate()) {
      print("submit");
      print(formData);
      autovalidate = true;
      formState = FormCalculatorState.ERROR;
      return;
    }
    else{
      globalFormKey.currentState.save();
    }
    notifyListeners();
  }

  Future showErrorNotification(){
    // Here I need to know the context
    return InfoBarComponent.error(title: AppTextInfobar.ERROR_TITLE, description: AppTextInfobar.ERROR_DESCRIPTION, context: context);
  }

如何使用我的 showErrorNotification 因为我需要上下文来显示我的 notificationBar ?当我尝试在提交功能的 scrren 中添加上下文时,出现错误。这是正确的方法吗?

标签: flutterdart

解决方案


没有通过你的整个代码。但我立即注意到 FormCalculatorNotifier 类中缺少 notifyListeners。


推荐阅读