Flutter 在表单提交时获取文本字段值

如何解决Flutter 在表单提交时获取文本字段值

我想向其中添加数据并检索响应，为此我需要使用 bloc 模式从表单中获取我的标题和描述。

创建帖子区块 当我将它传递给 repo.createPost 时，标题和描述返回 '' 或空。如果成功，我想得到回应。

class CreatePostBloc extends Bloc<CreatePostEvent,CreatePostState> {
  final _postsFetcher = PublishSubject<Post>();

  final CreatePostRepository repo;

  CreatePostBloc({required this.repo}) : super(CreatePostState());

  @override
  Stream<CreatePostState> mapEventToState(CreatePostEvent event) async* {
    String title='',description='';
    if (event is TitleChange) {
      yield state.copyWith(title: event.title);
      title=event.title;
    } else if (event is DescriptionChange) {
      yield state.copyWith(description: event.description);
      description=event.description;
    } else if (event is CreatePostSubmitted) {
      yield state.copyWith(formStatus: FormSubmitting());
      print(description);

      try {
        Post itemmodel = await repo.createPost(title,description);
        _postsFetcher.sink.add(itemmodel);
        yield state.copyWith(formStatus: SubmissionSuccess());
      } on Exception catch (e) {
        yield state.copyWith(formStatus: SubmissionFailed(e));
      }
    }
  }

  dispose() {
    _postsFetcher.close();
  }
}

创建帖子存储库

     class CreatePostRepository {
      Future<Post> createPost(String title,String description) async {
        final response = await http.post(
          Uri.parse(getPostUrl),headers: <String,String>{
            'Content-Type': 'application/json; charset=UTF-8',},body: jsonEncode(
              <String,dynamic>{"title": title,"body": description,"userId": 1}),);
    
        if (response.statusCode == 201) {
          print(' created 201: ');
          print(response.body.toString());
          return Post.fromJson(jsonDecode(response.body));
    
        } else {
          print('not throw: ');
          throw Exception('Failed to add post');
        }
      }
    }

创建帖子状态

    class CreatePostState {
      final String title;
      final String description;
      final FormSubmissionStatus formStatus;
    
      bool get isValidTitle => title.isNotEmpty;
    
      bool get isValidDescription => description.isNotEmpty;
    
      CreatePostState({
        this.title = '',this.description = '',this.formStatus = const InitialFormStatus(),});
    
      CreatePostState copyWith({
        String? title,String? description,FormSubmissionStatus? formStatus,}) {
        return CreatePostState(
            title: title ?? this.title,description: description ?? this.description,formStatus: formStatus ?? this.formStatus);
      }
    }

创建帖子事件

abstract class CreatePostEvent {}

  class TitleChange extends CreatePostEvent{
  final String title;

  TitleChange({required this.title});
  }
  class DescriptionChange extends CreatePostEvent{
  final String description;

  DescriptionChange({required this.description});
  }

class CreatePostSubmitted extends CreatePostEvent{

}

表单提交状态

abstract class FormSubmissionStatus{
  const FormSubmissionStatus();
}

class InitialFormStatus extends FormSubmissionStatus{
  const InitialFormStatus();
}

class FormSubmitting extends FormSubmissionStatus{}

class SubmissionSuccess extends FormSubmissionStatus{}

class SubmissionFailed extends FormSubmissionStatus{
  final Exception exception;

  SubmissionFailed(this.exception);
}

我的用户界面 如果响应为 201，则返回上一屏幕

 Widget buildColumn() => BlocListener<CreatePostBloc,CreatePostState>(
      listener: (context,state) {
        final formStatus = state.formStatus;
        if (formStatus is SubmissionFailed) {
          _showSnackbar(context,formStatus.exception.toString());
        } else if (formStatus is SubmissionSuccess) {
          debugPrint(state.description);
          Navigator.of(context,rootNavigator: true).pop(context);
        }
      },child: Form(
          key: formkey,child: Column(
            mainAxisAlignment: MainAxisAlignment.start,children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),child: buildTitle(),),SizedBox(
                height: 10,Padding(
                padding: const EdgeInsets.fromLTRB(8,8,8),child: buildDescription(),Expanded(
                child: Align(
                  alignment: FractionalOffset.bottomCenter,child: _submitButton(),],)));

  Widget buildTitle() =>
      BlocBuilder<CreatePostBloc,CreatePostState>(builder: (context,state) {
        return TextFormField(
          decoration: Inputdecoration(
            labelText: 'Title',validator: (value) => state.isValidTitle ? null : "required",onChanged: (value) =>
              context.read<CreatePostBloc>().add(TitleChange(title: value)),);
      });

  Widget buildDescription() =>
      BlocBuilder<CreatePostBloc,state) {
        return TextFormField(
          decoration: Inputdecoration(
            labelText: 'Description',validator: (value) => state.isValidDescription ? null : "required",onChanged: (value) => context
              .read<CreatePostBloc>()
              .add(DescriptionChange(description: value)),);
      });

回复示例

 {
    "title": "hello","body": "body","userId": 1,"id": 101
}