When the screen is resized and LayoutBuilder runs, the value entered is always reset. Even if the same widget variables are used, this differs from Wrap widgets.
So is there any widget that still maintains the entered values? (don’t want to use the controller for each field)
video example.
code example:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appTitle = 'Form Styling Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatelessWidget {
const MyCustomForm({super.key});
@override
Widget build(BuildContext context) {
String aValue = '';
const aTitle = Text('a field');
final aField = SizedBox(
width: 200,
child: TextFormField(
initialValue: aValue,
onChanged: (text) {
aValue = text;
},
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),
);
String bValue = '';
const bTitle = Text('b field');
final bField = SizedBox(
width: 200,
child: TextFormField(
initialValue: bValue,
onChanged: (text) {
bValue = text;
},
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),
);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return constraints.maxWidth < 200
? Column(
children: [
aTitle,
aField,
],
)
: Row(
children: [
aTitle,
Flexible(child: aField),
],
);
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
bTitle,
bField,
],
),
),
],
);
}
}
2
Answers
Try giving Value key to TextFormField
Your error is doing this:
and
in your
build()
method. This will reinitializebValue
to an empty string on each build. You should be prepared for build to be called 60 times per second. If a value needs to persist between builds (which this does), you need to move it out into State. Typically, this is done with aTextEditingController
. I believe there are Flutter codelabs on flutter.dev to demonstrate this.