TextFormField value is null - flutter

I tried to get TextFormField value. But result is null
main page,
children:[
UrlTextField(),
UsernameTextField(),
UrlButton()
]
UrlTextField(), same like UsernameTextField()
class UrlTextField extends StatelessWidget {
final myController = TextEditingController();
#override
Widget build(BuildContext context) {
return AppTextField(
decoration:
InputDecoration(prefixText: "https://", labelText: "Enter your URL"),
myController: myController,
textInputType: TextInputType.url,
);}}
AppTextField() It's a common class, I used this class everywhere
class AppTextField extends StatelessWidget {
final InputDecoration decoration;
var myController = TextEditingController();
final TextInputType textInputType;
AppTextField({
this.decoration,
this.myController,
this.textInputType
});
#override
Widget build(BuildContext context) {
return TextFormField(
controller: myController,
keyboardType: textInputType,
textAlign: TextAlign.left,
decoration: decoration
);}}
I need to get Url and Username value when click button or any other area,
class UrlButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return AppButton(
onPressed: () {
String url = UrlTextField().myController.text;
String username = UsernameTextField().myController.text;
print('url is $text');
});}}
AppButton() This class also common
class AppButton extends StatelessWidget {
final VoidCallback onPressed;
AppButton({
this.buttonTextStyle
});
#override
Widget build(BuildContext context) {
return RaisedButton(
child: Text(...),
onPressed: onPressed);}}

You are trying to retrieve text from a controller which has just been instantiated in the onPressed of the button so there can't be any text so far! To solve this problem you need some way of State Management to access and change an existing widget, in your case the UrlTextField widget. I will give you an example of how you could solve this quickly:
Main page:
class MainPage extends StatefulWidget {
...
#override
createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
UrlTextField _urlTextField = UrlTextField();
...
children:[
_urlTextField,
UsernameTextField(),
UrlButton(_urlTextField)
]
Now we instantiated a UrlTextField which can be referenced to and can be passed to another widget like your UrlButton:
class UrlButton extends StatelessWidget {
final UrlTextField urlTextField;
UrlButton(this.urlTextField);
#override
Widget build(BuildContext context) {
return AppButton(
onPressed: () {
String url = this.urlTextField.myController.text;
String username = UsernameTextField().myController.text;
print('url is $text');
}
);
}
}
On this way you instantiated one UrlTextField and used it in your main page where a user can fill in some input and passed it down to UrlButton where you can access its controller and therefore its text.
I would recommend you to look more into the topic State Management since there are a lot of ways to handle such a case. I can recommend you to take a look on Provider which is very easy to use and convenient to access certain data.

what is the value of text in print('url is $text'); isn't it supposed to be like this print('url is $url');

I think this what you are trying to do.... But there's many loop holes brother..
One thing to remember.. You need separate controllers for each TextField you can't declare one as myController and assign it to all. They'll all have the same value.
class StackHelp extends StatefulWidget {
#override
_StackHelp createState() => _StackHelp();
}
class _StackHelp extends State<StackHelp> {
final TextEditingController myController = TextEditingController();
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: new Scaffold(
body: Column(children: <Widget>[
UrlTextField(myController),
// UsernameTextField(),
UrlButton(myController)
])),
);
}
}
class UrlTextField extends StatelessWidget {
final TextEditingController myController;
UrlTextField(this.myController);
#override
Widget build(BuildContext context) {
return AppTextField(
decoration:
InputDecoration(prefixText: "https://", labelText: "Enter your URL"),
myController: myController,
textInputType: TextInputType.url,
);
}
}
class AppTextField extends StatelessWidget {
final InputDecoration decoration;
final TextEditingController myController;
final TextInputType textInputType;
AppTextField({this.decoration, this.myController, this.textInputType});
#override
Widget build(BuildContext context) {
return TextFormField(
controller: myController,
keyboardType: textInputType,
textAlign: TextAlign.left,
decoration: decoration);
}
}
class UrlButton extends StatelessWidget {
final TextEditingController myController;
UrlButton(this.myController);
#override
Widget build(BuildContext context) {
void onPressed() {
String url = this.myController.text;
// String username = UsernameTextField().myController.text;
print('url is $url');
}
return AppButton(onPressed);
}
}
class AppButton extends StatelessWidget {
final VoidCallback onPressed;
AppButton(this.onPressed);
#override
Widget build(BuildContext context) {
return RaisedButton(child: Text('Test'), onPressed: onPressed);
}
}

Related

Does dart/flutter have the functionality to set UI properties on widgets at a class level?

Similar to using css and html. Goal would be to have a single file where we can set the color size or whatever other property for the Column, or DropDownMenu class and not have to repeat for every instance of the class.
Try the following code:
class CustomColumn extends StatelessWidget {
const CustomColumn({super.key, required this.children});
final List<Widget> children;
#override
Widget build(BuildContext context) {
return Column(
// You can style your Column here
children: children,
);
}
}
class CustomDropdownButton extends StatelessWidget {
const CustomDropdownButton({super.key, required this.items, required this.onChanged});
final List<DropdownMenuItem> items;
final void Function(dynamic) onChanged;
#override
Widget build(BuildContext context) {
return DropdownButton(
items: items,
onChanged: onChanged,
// You can style your DropdownButton here
);
}
}

How do i make a TextEditingController Required in a stateful widget

I created a widget for a textfield that accepts password and I made use of stateful widget. Now I want to get the value of what is written in the text field in two different files but I can't make the texteditingcontroller requiredenter image description here
Login Page should be something like this:
declare the controller in the login page then you can pass the controller to other Widget including Passwordfield, the Login page now is the owner of the controller it initialize it and dispose it.
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
late TextEditingController _passwordController;
#override
void initState() {
_passwordController = TextEditingController();
}
#override
void dispose() {
_passwordController.dispose();
}
Widget build(BuildContext context) {
return Column(
children: <Widget>[
// Emailfield(),
Passwordfield(
controller: _passwordController,
),
],
);
}
}
in the Passwordfield edit the constructor to use the controller in this Widget:
class Passwordfield extends StatefulWidget {
final TextEditingController controller;
Passwordfield({Key? key, required this.controller,}) : super(key: key);
#override
_PasswordfieldState createState() => _PasswordfieldState();
}
class _PasswordfieldState extends State<Passwordfield> {
ValueChanged<String> onChanged = (value) {};
String hintText = "password";
bool hidepassword = true;
Widget build(BuildContext context) {
return TextField(
controller: widget.controller,
onChanged: onChanged,
obscureText: hidepassword,
// ...
);
}
}
You can make it like this:
First you have to create controller :
var _controller = TextEditingController();
Second add this controller to your textfield
TextField(
autofocus: true,
controller: _controller, // add controller here
decoration: InputDecoration(
hintText: 'Test',
focusColor: Colors.white,
),
),
and finally in your button check if controller is empty or not
CustomButton(
onTap: () async {
if (_controller.text.trim().isEmpty) {
showCustomSnackBar(
'Password field is empty',
context);
}
}
)
just it

How to pass a function as a validator in a TextFormField?

I'm wondering if I can pass a function as a validator. I tried, but got no results.
Widget Field(String changedValue, String label, bool isTextObscured) {
return TextFormField(
decoration: InputDecoration(labelText: label),
validator: checkFieldEmpty,
);
}
checkFieldEmpty(String fieldContent) {
if(fieldContent.isEmpty) {
return 'Ce champ est obligatoire.';
}
return null;
}
Perhaps the function return type should be String? so that it fits the validator prototype!
Widget Field(String changedValue, String label, bool isTextObscured) {
return TextFormField(
decoration: InputDecoration(labelText: label),
validator: checkFieldEmpty,
);
}
String? checkFieldEmpty(String? fieldContent) { //<-- add String? as a return type
if(fieldContent.isEmpty) {
return 'Ce champ est obligatoire.';
}
return null;
}
A more appropriate way of doing this in Flutter
Remember, flutter is a declarative language. That is, you build your app by composing a widget tree. Here, you are using a function to return a Widget. That is breaking this rule. Instead, you should declare your own custom widget that implements the TextField Widget. Here's how:
1. Declare your custom widget
// Declare your CustomTextField as a Stateless/Stateful Widget
class MyCustomTextField extends StatelessWidget {
// Declare your custom vars, including your validator function
final String? changedValue;
final String? label;
final bool? isTextObscured;
final String? Function(String?)? validator;
const MyCustomTextField({
Key? key,
this.changedValue,
this.label,
this.isTextObscured,
this.validator,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return TextFormField(
decoration: InputDecoration(labelText: label),
validator: validator,
);
}
}
2. Use your custom widget
Now you can use this custom widget as a child of any other widget:
class ParentWidget extends StatelessWidget {
const ParentWidget({Key? key}) : super(key: key);
// This is your custom validator function and can leave
// anywhere ;)
Stirng? customValidtaor(String? fieldContent) => fieldContent.isEmpty? 'Ce champ est obligatoire.': null
#override
Widget build(BuildContext context) {
return MyCustomTextField(
label: 'Some label'
// declare the validator here...
// valiator: (fieldContent) => fieldContent.isEmpty? 'Ce champ est obligatoire.': null
// or use your custom validator function
validator: customValidator,
);
}
}
By doing this, you are respecting Flutter's best practices by using Widget composition ;)
Add String as a return type for checkFieldEmpty() method, see below
instead this:
checkFieldEmpty(String fieldContent) {}
use this:
String checkFieldEmpty(String fieldContent) {}
Full Code Example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final appTitle = 'Form Validation Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(title: Text(appTitle)),
body: MyCustomForm(),
),
);
}
}
// Create a Form widget.
class MyCustomForm extends StatefulWidget {
#override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
//
// Note: This is a GlobalKey<FormState>,
// not a GlobalKey<MyCustomFormState>.
final _formKey = GlobalKey<FormState>();
Widget textField(String changedValue, String label, bool isTextObscured) {
return TextFormField(
decoration: InputDecoration(labelText: label),
validator: checkFieldEmpty,
);
}
String checkFieldEmpty(String fieldContent) {
if (fieldContent.isEmpty) return 'Ce champ est obligatoire.';
return null;
}
#override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
textField('changedValue', 'Enter Password', false),
ElevatedButton(
onPressed: () {
// Validate returns true if the form is valid, or false otherwise.
if (_formKey.currentState.validate()) {
// If the form is valid,
// perform further actions here
}
},
child: Text('Submit'),
),
],
),
);
}
}

Calling method from State class

Given a stateful widget, is somehow possible to call a method defined in the State class (the one which extends State<NameOfTheWidget>). Actually, I just want to rebuild the _State class, like calling setState() but from outside of the class. I know how to it from children to parents but not viceversa.
class Foo extends StatefulWidget{
State createState() => new _State();
//...bar() ??
}
class _State extends State<Foo>{
#override
Widget build(BuildContext context) {...}
void bar(){...}
}
EDIT: some real code
First, we hace the equivalent to the inner widget; it's a a customized text field. The point is that I want enable and disable it according to the boolean _activo variable.
import 'package:flutter/material.dart';
import 'package:bukit/widgets/ensure.dart';
class EntradaDatos extends StatelessWidget{
final String _titulo;
final String _hint;
TextEditingController _tec;
FocusNode _fn = new FocusNode();
final String Function(String s) _validador;
final TextInputType _tit;
bool _activo;
/*
* CONSTRUCTOR
*/
EntradaDatos(this._titulo, this._hint, this._validador, this._tit, this._activo){
_tec = new TextEditingController();
}
#override
Widget build(BuildContext context){
print('Construyendo');
return new EnsureVisibleWhenFocused(
focusNode: _fn,
child: new TextFormField(
enabled: _activo,
keyboardType: _tit,
validator: _validador,
autovalidate: true,
focusNode: _fn,
controller: _tec,
decoration: InputDecoration(
labelText: _titulo,
hintText: _hint
),
)
);
}
String getContenido(){
return _tec.text;
}
}
Then I have a concrete implementation of the previous text field, which just extends it:
import 'package:flutter/material.dart';
import 'package:bukit/widgets/entrada_datos.dart';
class EntradaMail extends EntradaDatos{
static String _hint = "nombre#dominio.es";
static String _validador(String s){
if(s.isEmpty){
return 'El campo es obligatorio';
}else{
if(!s.contains('#') || !s.contains('.') || s.contains(' ')){
return 'Introduce una dirección válida';
}else{
String nombre = s.substring(0, s.indexOf('#'));
String servidor = s.substring(s.indexOf('#')+1, s.lastIndexOf('.'));
String dominio = s.substring(s.lastIndexOf('.')+1);
if(nombre.length < 2 || servidor.length < 2 || dominio.length < 2){
return 'Introduce una dirección válida';
}
}
}
}
EntradaMail(String titulo, bool activo) : super(titulo, _hint, _validador, TextInputType.emailAddress, activo);
}
Finally, the equivalent of my outter widget. It's just a checkbox followed by the prevoius EntradaEmail widget. As far as I know, once the checkbox is pressed and the onChange call is made, the setState call should rebuild everything, but I've contrasted with debug messaged that the build method of the first inner widget is never called. My point is enabling and disabling the text field according to the checkbox.
class CampoEnvio extends StatefulWidget{
EntradaMail _mail;
EntradaMovil _movil;
String _tituloMail;
String _tituloMovil;
bool _usaMail = false;
bool _usaMovil = false;
CampoEnvio(this._tituloMail, this._tituloMovil){
_mail = new EntradaMail(_tituloMail, _usaMail);
_movil = new EntradaMovil(_tituloMovil, _usaMovil);
}
State createState() => _State(_mail, _movil, _usaMail, _usaMovil, _tituloMail, _tituloMovil);
}
class _State extends State<CampoEnvio>{
bool _usaMail;
bool _usaMovil;
String _tituloMail;
String _tituloMovil;
EntradaMail _mail;
EntradaMovil _movil;
_State(this._mail, this._movil, this._usaMail, this._usaMovil, this._tituloMail, this._tituloMovil);
#override
Widget build(BuildContext context){
return new Column(
children: <Widget>[
new ListTile(
leading: new SizedBox(
width: 70.0,
child: new Row(
children: <Widget>[
new Checkbox(
value: _usaMail,
activeColor: Colors.black,
onChanged: (value) {
setState(() {
_usaMail = value;
});
},
),
],
),
),
title: _mail,
),
//...
new Divider()
],
);
}
}
Yes, in theory it is possible using a GlobalKey, but not recommended!
class OuterWidget extends StatefulWidget {
#override
State<StatefulWidget> createState() => OuterWidgetState();
}
class OuterWidgetState extends State<OuterWidget> {
final _innerKey = GlobalKey<InnerWidgetState>();
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
InnerWidget(key: _innerKey),
RaisedButton(
child: Text('call foo'),
onPressed: () {
_innerKey.currentState.foo();
},
)
],
);
}
}
class InnerWidget extends StatefulWidget {
InnerWidget({Key key}) : super(key: key);
#override
State<StatefulWidget> createState() => InnerWidgetState();
}
class InnerWidgetState extends State<InnerWidget> {
String _value = 'not foo';
#override
Widget build(BuildContext context) {
return Text(_value);
}
void foo() {
setState(() {
_value = 'totally foo';
});
}
}
Better approach: Instead, what it would be a good idea to pull the state up:
class OuterWidget extends StatefulWidget {
#override
State<StatefulWidget> createState() => OuterWidgetState();
}
class OuterWidgetState extends State<OuterWidget> {
String _innerValue;
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
InnerWidget(value: _innerValue),
RaisedButton(
child: Text('call foo'),
onPressed: () {
setState(() {
_innerValue = 'totally foo';
});
},
)
],
);
}
}
class InnerWidget extends StatefulWidget {
InnerWidget({Key key, this.value}) : super(key: key);
final String value;
#override
State<StatefulWidget> createState() => InnerWidgetState();
}
class InnerWidgetState extends State<InnerWidget> {
#override
Widget build(BuildContext context) {
return Text(widget.value);
}
}
If you can, make the inner widget stateless:
class InnerWidget extends StatelessWidget {
InnerWidget({Key key, this.value}) : super(key: key);
final String value;
#override
Widget build(BuildContext context) {
return Text(value);
}
}
If your child is interactive (taps, checkbox...), you can define callbacks with VoidCallback or ValueChanged<T> (or your own typedef) to process the events in the parent widget.
Ok, now that you added the sample code, I will try to explain why your widget does not work, and I will try to explain what other improvements can be made.
First of all, you can improve the readability of your code by using named constructors for all of your widgets, like in my other answers (You can auto-generate them with Android Studio: Define some final fields, then press the lightbulb button to generate the constructor).
The next problem is that widgets which create a TextEditingController must always be stateful widgets! Otherwise the input made by the user will disappear after every build!
Usually you would pass in the TextEditingController from a parent widget (the widget that handles processes data when you submit it)
Also, it is discouraged to extend widgets. Instead, use composition, e.g.:
class EntradaMail extends StatelessWidget {
final String titulo;
// ...
Widget build(BuildContext context) {
return EntradaDatos(
titulo: titulo,
//...
)
}
}
Widget properties should always be public and final (never start with a _).
You are doing some strange things in CampoEnvio.
First of all, you are for some reason passing in all the properties of the widget to the State in createState. That has some consequences which you probably don't intend.
In general it is extremely rare that your State class has constructor parameters, and usually you would not pass properties from the stateful widget to the state.
The problem is that createState is only called once, it is not called again when you call initState in a parent widget. The state is kept until the widget is disposed.
That means your state constructor is only called once as well, and the fields in _State (of CampoEnvio) will stay the same all the time. Even when the parent is rebuilt and calls the constructor of CampoEnvio again, the old values in _State will not be replaced.
It's also very stange that you are creating widgets (EntradaMail and EntradaMovil) in the StatefulWidget.
The class that extends StatefulWidget should not do that! It is basically just a "bag" of properties.
Here is the complete fixed sample code, following the conventions explained above:
class EntradaDatos extends StatefulWidget {
EntradaDatos({Key key, this.titulo, this.hint, this.validador, this.tit, this.activo}) : super(key: key);
final String titulo;
final String hint;
final String Function(String s) validador;
final TextInputType tit;
final bool activo;
#override
State<StatefulWidget> createState() => _EntradaDatosState();
}
class _EntradaDatosState extends State<EntradaDatos> {
// FocusNode and TextEditingController must be the same for the whole lifetime of the widget
// => put into State
TextEditingController _tec;
FocusNode _fn;
#override
void initState() {
super.initState();
_tec = new TextEditingController();
_fn = new FocusNode();
}
#override
Widget build(BuildContext context) {
print('Construyendo');
return new EnsureVisibleWhenFocused(
focusNode: _fn,
child: new TextFormField(
enabled: widget.activo,
keyboardType: widget.tit,
validator: widget.validador,
autovalidate: true,
focusNode: _fn,
controller: _tec,
decoration: InputDecoration(labelText: widget.titulo, hintText: widget.hint),
));
}
String getContenido() {
return _tec.text;
}
}
class EntradaMail extends StatelessWidget {
static String _hint = "nombre#dominio.es";
static String _validador(String s) {
if (s.isEmpty) {
return 'El campo es obligatorio';
} else {
if (!s.contains('#') || !s.contains('.') || s.contains(' ')) {
return 'Introduce una dirección válida';
} else {
String nombre = s.substring(0, s.indexOf('#'));
String servidor = s.substring(s.indexOf('#') + 1, s.lastIndexOf('.'));
String dominio = s.substring(s.lastIndexOf('.') + 1);
if (nombre.length < 2 || servidor.length < 2 || dominio.length < 2) {
return 'Introduce una dirección válida';
}
}
}
}
EntradaMail({Key key, this.titulo, this.activo}) : super(key: key);
final String titulo;
final bool activo;
#override
Widget build(BuildContext context) {
// use composition instead of inheritance
return EntradaDatos(
titulo: titulo,
activo: activo,
validador: _validador,
hint: _hint,
tit: TextInputType.emailAddress,
);
}
}
class CampoEnvio extends StatefulWidget {
const CampoEnvio({Key key, this.tituloMail, this.tituloMovil}) : super(key: key);
final String tituloMail;
final String tituloMovil;
#override
State<StatefulWidget> createState() => new _CampoEnvioState();
}
class _CampoEnvioState extends State<CampoEnvio> {
// I guess these variables are modified here using setState
bool _usaMail;
bool _usaMovil;
#override
Widget build(BuildContext context) {
// just rebuild the widgets whenever build is called!
final mail = new EntradaMail(
titulo: widget.tituloMail,
activo: _usaMail,
);
final movil = new EntradaMovil(
titulo: widget.tituloMovil,
activo: _usaMovil,
);
return new Column(
children: <Widget>[
new ListTile(
leading: new SizedBox(
width: 70.0,
child: new Row(
children: <Widget>[
new Checkbox(
value: _usaMail,
activeColor: Colors.black,
onChanged: (value) {
setState(() {
_usaMail = value;
});
},
),
],
),
),
title: mail,
),
//...
new Divider()
],
);
}
}
It always helps to look at the official samples in the Flutter repositories!

Widget rebuild after TextField selection Flutter

I'm developping a Flutter App that needed to have a form. So when the user open the app, a Splash Screen appear before the form that have the following code :
import 'package:flutter/material.dart';
import '../model/User.dart';
import './FileManager.dart';
import './MyListPage.dart';
class UserLoader extends StatefulWidget {
#override
_UserLoaderState createState() => new _UserLoaderState();
}
class _UserLoaderState extends State<UserLoader> {
final userFileName = "user_infos.txt";
User _user;
#override
Widget build(BuildContext context) {
print("build UserLoader");
final _formKey = new GlobalKey<FormState>();
final _firstNameController = new TextEditingController();
final _lastNameController = new TextEditingController();
final _emailController = new TextEditingController();
final _phoneController = new TextEditingController();
return new Scaffold(
appBar: new AppBar(
title: new Text("Informations"),
actions: <Widget>[
new IconButton(
icon: const Icon(Icons.save),
onPressed: () {
_user = _onFormValidate(
_formKey.currentState,
_firstNameController.text,
_lastNameController.text,
_emailController.text,
_phoneController.text);
})
],
),
body: new Center(
child: new SingleChildScrollView(
child: new Form(
key: _formKey,
child: new Column(children: <Widget>[
new ListTile(
leading: const Icon(Icons.person),
title: new TextFormField(
decoration: new InputDecoration(
hintText: "Prénom",
),
keyboardType: TextInputType.text,
controller: _firstNameController,
validator: _validateName,
),
),
new ListTile(
leading: const Icon(Icons.person),
title: new TextFormField(
decoration: new InputDecoration(
hintText: "Nom",
),
keyboardType: TextInputType.text,
controller: _lastNameController,
validator: _validateName,
),
),
Etc, etc ...
However when i tap the TextField, the keyboard appear and close immediately and all the component is rebuild. So it is impossible for me to complete the form..
Can someone have a solution please? Thanks in advance !
You haven't given us the entire code for this, so I don't know what the context is.
One pitfall I myself have fallen into (and might be affecting you, as I gather from your description) is having a stateful widget nested inside another stateful widget.
For instance,
class Parent extends StatefulWidget {
#override
ParentState createState() => ParentState();
(...)
}
class ParentState extends State<Parent> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Child(),
);
}
(...)
}
class Child extends StatefulWidget {
#override
ChildState createState() => ChildState();
(...)
}
class ChildState extends State<Child> {
#override
Widget build(BuildContext context) {
return TextField(...);
}
(...)
}
The problem here is that a rebuild of Parent means that ParentState().build() is run, and a new Child instance is created, with a new ChildState object. Which resets everything.
Try not recreating ChildWidget, but instead saving it on ParentState, like so:
class Parent extends StatefulWidget {
#override
ParentState createState() => ParentState();
(...)
}
class ParentState extends State<Parent> {
Child _child;
#override
void initState() {
_child = Child();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: _child,
);
}
(...)
}
// The rest remains the same
Edit: You just need to remember that, if your widget tree is a bit more complex, you may need to 1) pass a callback from the Parent to notify of state changes, and 2) not forget to also call setState() on the Child.
you just need make a new class and import that on your target class that seen problem. for example :
I usually create a class like this :
class MiddleWare
{
static MiddleWare shared = MiddleWare();
_MiddleWare(){}
String myText = "my Text";
// every variables should be here...
}
and
import "MiddleWare.dart";
class myclass extends StatefulWidget {
#override
_myclassState createState() => _myclassState();
}
class _myclassState extends State<myclass> {
#override
Widget build(BuildContext context) {
return Container(child: Text(MiddleWare.shared.myText));
}
}
that's it.
hi dont use Scaffold key i.e
Scaffold (
...
key: _scaffoldKey, //remove this
...
)
on the page and do a complete page rebuild (not hot reload), and you should be fine worked for me tho!
In my case, I have two stateful widgets, the parent and the child. I used the pushReplacement method on the parent to fix the widget reload issue when the text form field is selected in the child widget.
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => WidgetChildren(idUser:
widget.idUser)),
);
try to create a function which receives context like this
class YourPage extends StatefulWidget {
const YourPage(Key key) : super(key: key);
static Future<void> show({ BuildContext context,}) async {
await Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(
builder: (context) => YourPage()
);}
#override
_YourPageState createState() => _YourPageState();
}
......YourPage Build.....
then provide context to your page, when rebuilding it will have core context that prevents parent rebuild.
onPressed: () async {
await YourPage.show(context: context);
Move your variables (controllers and keys) from build to class-fields level.
in my case it was related to this property in Scaffold widget: 'resizeToAvoidBottomInset'
I changed it to true and problem solved.