form_bloc
form_bloc copied to clipboard
Published
20 hours ago •
GiancarloCode
GiancarloCode
Wizard breaks if page has no FormBlocBuilder components mapped
The wizard form doesn't allow processing Widgets that do not contain BlocFields.
I'm trying to add a step to the wizard (for now we'll keep it as text), since the step is purely informational it doesn't contain any blocFields, once this step is reached. Clicking continue will result in the last page of the process. Here's a modified version of the wizard example that explains the issue:
import 'package:flutter/material.dart';
import 'package:flutter_form_bloc/flutter_form_bloc.dart';
void main() => runApp(const App());
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: WizardForm(),
);
}
}
class WizardFormBloc extends FormBloc<String, String> {
final username = TextFieldBloc(
validators: [FieldBlocValidators.required],
);
final email = TextFieldBloc<String>(
validators: [
FieldBlocValidators.required,
FieldBlocValidators.email,
],
);
final password = TextFieldBloc(
validators: [
FieldBlocValidators.required,
FieldBlocValidators.passwordMin6Chars,
],
);
final firstName = TextFieldBloc();
final lastName = TextFieldBloc();
final gender = SelectFieldBloc(
items: ['Male', 'Female'],
);
final birthDate = InputFieldBloc<DateTime?, Object>(
initialValue: null,
validators: [FieldBlocValidators.required],
);
final github = TextFieldBloc();
final twitter = TextFieldBloc();
final facebook = TextFieldBloc();
WizardFormBloc() {
addFieldBlocs(
step: 0,
fieldBlocs: [username, email, password],
);
addFieldBlocs(
step: 1,
fieldBlocs: [firstName, lastName, gender, birthDate],
);
addFieldBlocs(
step: 2,
fieldBlocs: [],
);
addFieldBlocs(
step: 3,
fieldBlocs: [github, twitter, facebook],
);
}
bool _showEmailTakenError = true;
@override
void onSubmitting() async {
if (state.currentStep == 0) {
await Future.delayed(const Duration(milliseconds: 500));
if (_showEmailTakenError) {
_showEmailTakenError = false;
email.addFieldError('That email is already taken');
emitFailure();
} else {
emitSuccess();
}
} else if (state.currentStep == 1) {
emitSuccess();
} else if (state.currentStep == 2) {
await Future.delayed(const Duration(milliseconds: 500));
emitSuccess();
} else if (state.currentStep == 3) {
await Future.delayed(const Duration(milliseconds: 500));
emitSuccess();
}
}
}
class WizardForm extends StatefulWidget {
const WizardForm({Key? key}) : super(key: key);
@override
_WizardFormState createState() => _WizardFormState();
}
class _WizardFormState extends State<WizardForm> {
var _type = StepperType.horizontal;
void _toggleType() {
setState(() {
if (_type == StepperType.horizontal) {
_type = StepperType.vertical;
} else {
_type = StepperType.horizontal;
}
});
}
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => WizardFormBloc(),
child: Builder(
builder: (context) {
return Theme(
data: Theme.of(context).copyWith(
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20),
),
),
),
child: Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: const Text('Wizard'),
actions: <Widget>[
IconButton(
icon: Icon(_type == StepperType.horizontal
? Icons.swap_vert
: Icons.swap_horiz),
onPressed: _toggleType)
],
),
body: SafeArea(
child: FormBlocListener<WizardFormBloc, String, String>(
onSubmitting: (context, state) => LoadingDialog.show(context),
onSubmissionFailed: (context, state) =>
LoadingDialog.hide(context),
onSuccess: (context, state) {
LoadingDialog.hide(context);
if (state.stepCompleted == state.lastStep) {
Navigator.of(context).pushReplacement(MaterialPageRoute(
builder: (_) => const SuccessScreen()));
}
},
onFailure: (context, state) {
LoadingDialog.hide(context);
},
child: StepperFormBlocBuilder<WizardFormBloc>(
formBloc: context.read<WizardFormBloc>(),
type: _type,
physics: const ClampingScrollPhysics(),
stepsBuilder: (formBloc) {
return [
_accountStep(formBloc!),
_personalStep(formBloc),
_moreInfo(formBloc),
_socialStep(formBloc),
];
},
),
),
),
),
);
},
),
);
}
FormBlocStep _accountStep(WizardFormBloc wizardFormBloc) {
return FormBlocStep(
title: const Text('Account'),
content: Column(
children: <Widget>[
TextFieldBlocBuilder(
textFieldBloc: wizardFormBloc.username,
keyboardType: TextInputType.emailAddress,
enableOnlyWhenFormBlocCanSubmit: true,
decoration: const InputDecoration(
labelText: 'Username',
prefixIcon: Icon(Icons.person),
),
),
TextFieldBlocBuilder(
textFieldBloc: wizardFormBloc.email,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'Email',
prefixIcon: Icon(Icons.email),
),
),
TextFieldBlocBuilder(
textFieldBloc: wizardFormBloc.password,
keyboardType: TextInputType.emailAddress,
suffixButton: SuffixButton.obscureText,
decoration: const InputDecoration(
labelText: 'Password',
prefixIcon: Icon(Icons.lock),
),
),
],
),
);
}
FormBlocStep _personalStep(WizardFormBloc wizardFormBloc) {
return FormBlocStep(
title: const Text('Personal'),
content: Column(
children: <Widget>[
TextFieldBlocBuilder(
textFieldBloc: wizardFormBloc.firstName,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'First Name',
prefixIcon: Icon(Icons.person),
),
),
TextFieldBlocBuilder(
textFieldBloc: wizardFormBloc.lastName,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'Last Name',
prefixIcon: Icon(Icons.person),
),
),
RadioButtonGroupFieldBlocBuilder<String>(
selectFieldBloc: wizardFormBloc.gender,
itemBuilder: (context, value) => FieldItem(
child: Text(value),
),
decoration: const InputDecoration(
labelText: 'Gender',
prefixIcon: SizedBox(),
),
),
DateTimeFieldBlocBuilder(
dateTimeFieldBloc: wizardFormBloc.birthDate,
firstDate: DateTime(1900),
initialDate: DateTime.now(),
lastDate: DateTime.now(),
format: DateFormat('yyyy-MM-dd'),
decoration: const InputDecoration(
labelText: 'Date of Birth',
prefixIcon: Icon(Icons.cake),
),
),
],
),
);
}
FormBlocStep _socialStep(WizardFormBloc wizardFormBloc) {
return FormBlocStep(
title: const Text('Social'),
content: Column(
children: <Widget>[
TextFieldBlocBuilder(
textFieldBloc: wizardFormBloc.github,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'Github',
prefixIcon: Icon(Icons.sentiment_satisfied),
),
),
TextFieldBlocBuilder(
textFieldBloc: wizardFormBloc.twitter,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'Twitter',
prefixIcon: Icon(Icons.sentiment_satisfied),
),
),
TextFieldBlocBuilder(
textFieldBloc: wizardFormBloc.facebook,
keyboardType: TextInputType.emailAddress,
decoration: const InputDecoration(
labelText: 'Facebook',
prefixIcon: Icon(Icons.sentiment_satisfied),
),
),
],
),
);
}
}
FormBlocStep _moreInfo(WizardFormBloc wizardFormBloc) {
return FormBlocStep(
title: const Text('More info'),
content: Column(
children: const <Widget>[
Text("Hello"),
],
),
);
}
class LoadingDialog extends StatelessWidget {
static void show(BuildContext context, {Key? key}) => showDialog<void>(
context: context,
useRootNavigator: false,
barrierDismissible: false,
builder: (_) => LoadingDialog(key: key),
).then((_) => FocusScope.of(context).requestFocus(FocusNode()));
static void hide(BuildContext context) => Navigator.pop(context);
const LoadingDialog({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: Center(
child: Card(
child: Container(
width: 80,
height: 80,
padding: const EdgeInsets.all(12.0),
child: const CircularProgressIndicator(),
),
),
),
);
}
}
class SuccessScreen extends StatelessWidget {
const SuccessScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Icon(Icons.tag_faces, size: 100),
const SizedBox(height: 10),
const Text(
'Success',
style: TextStyle(fontSize: 54, color: Colors.black),
textAlign: TextAlign.center,
),
const SizedBox(height: 10),
ElevatedButton.icon(
onPressed: () => Navigator.of(context).pushReplacement(
MaterialPageRoute(builder: (_) => const WizardForm())),
icon: const Icon(Icons.replay),
label: const Text('AGAIN'),
),
],
),
),
);
}
}
Hi, @fmatar. At first I thought this is bug. However after few minutes of digging, I think this behaviour is actually on purpose. What makes this happened is you add a step with empty field to form. Form bloc will ignore the empty field step due to dynamic field bloc generation. Moreover what dose a step with empty field actual means in real world use cases.
You are adding an empty field step to form bloc because StepperFormBlocBuilder didn't let you customize with inserting a not stepper page. So as these reason I don't think this is a bug and if you want to trying to add a page between steps. You shouldn't be using StepperFormBlocBuilder you should build your own layout.
@fmatar Your implementation also makes me thinking, is that first step must be start with zero, or last step must be the position of last step item. The success result page show because the last step int get lastStep => numberOfSteps - 1;. I think the last step should be the step number of last item.
@aaassseee Thank you for the feedback, I am revisiting the implementation as well, I'll keep you posted! Cheers!
An easy workaround is to add any blocfield to the filedBlocs array even if it's not used on the step. Not very elegant but it does the job.
Looking back at your comment in a real use case:
- I would like to display informational steps to the users in the step wizard.
- Another use case is that I'm allowing users on that step to connect to their social media accounts. Meaning they click a button, go through the OAuth2 flow and then stay on the same step (no form fields are required)
I hope that makes sense
