StatefulWidget Page recreate when keyboard is open

Question

In my profile page have edit option when use click edit icon i change Text widget to TextField Widget using Boolean condition like
widget.isUpdate ? new Flexible(child: new TextField()) : Text("Text Widget") it working but when TextField focused the keyboard is open on that time StatefulWidget recreate so again Boolean became false then Textfield move to Text Widget. This scenario only happen when page has Navigator push page (Second Page) like

 Navigator.push(context,MaterialPageRoute(builder: (context) => UpdateProfile()))

if this page as default home page then work fine. I don't what mistake i done.

Code :

import 'package:flutter/material.dart';

class UpdateProfile extends StatefulWidget {
  bool isUpdate = false;

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return UpdateProfileState();
  }
}

class UpdateProfileState extends State<UpdateProfile> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
          title: Text("Update"),
          elevation: 2.0),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.red,
        margin: const EdgeInsets.all(10.0),
        child: Row(
          children: <Widget>[
            widget.isUpdate ? new Flexible(child: new TextField()) : Text("Text Widget"),
            GestureDetector(
              child: IconTheme(
                  data: IconThemeData(color: Color(0xFFffffff)),
                  child: Icon(Icons.edit)),
              onTap: () {
                setState(() {
                  widget.isUpdate = !widget.isUpdate;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}

Issue :

If i set as home page then work fine like below

import 'package:expense_manager_app/page/splash_page.dart';
import 'package:expense_manager_app/page/update_profile.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        brightness: Brightness.dark,
        primaryColor: Colors.red[500],
        accentColor: Colors.green[900],
      ),
      home: UpdateProfile(),
    );
  }
}

if someone down-vote the question please tell the reason for that — Magesh Pandian, Dec 25 '18 at 17:46

score 8 · Accepted Answer · answered Dec 25 '18 at 07:18

You should move your variable isUpdate inside your State, remember the widget is inmutable.

        class UpdateProfileState extends State<UpdateProfile> {

         bool isUpdate = false;

          @override
          Widget build(BuildContext context) {
            // TODO: implement build
            return Scaffold(
              appBar: AppBar(
                  title: Text("Update"),
                  elevation: 2.0),
              body: Container(
                width: double.infinity,
                height: double.infinity,
                color: Colors.red,
                margin: const EdgeInsets.all(10.0),
                child: Row(
                  children: <Widget>[
                    isUpdate ? new Flexible(child: new TextField()) : Text("Text Widget"),
                    GestureDetector(
                      child: IconTheme(
                          data: IconThemeData(color: Color(0xFFffffff)),
                          child: Icon(Icons.edit)),
                      onTap: () {
                        setState(() {
                          isUpdate = !isUpdate;
                        });
                      },
                    )
                  ],
                ),
              ),
            );
          }
        }

And also change this:

    Navigator.push(context,MaterialPageRoute(builder: (context) => UpdateProfile()))

To this:

    final page = UpdateProfile();
    Navigator.push(context,MaterialPageRoute(builder: (context) => page ))

yep i already tired its working but why its not working when this page as second page like Navigator push. how its working as home default page. — Magesh Pandian, Dec 25 '18 at 07:41
after set as final its working so my doubt is if i directly mention inside MaterialPageRoute then each time it recreate the object ? — Magesh Pandian, Dec 25 '18 at 17:39
Yeah all the content inside the builder is recreated , for that reason you have to extract the widget in a variable — diegoveloper, Dec 25 '18 at 17:41

score 1 · Answer 2 · answered Sep 28 '19 at 12:36

1

as an addition, if you do something on didChangeDependencies method, thats also gonna cause that

answered Sep 28 '19 at 12:36

Murat Aslan

1,446
9
21

score 0 · Answer 3 · answered Dec 25 '18 at 07:18

0

It's because of you set default bool isUpdate = false; make change it to bool isUpdate;

and use initState method of your State class and set there isUpdate to false. I'll be called once.

@override
void initState() { 
  widget.isUpdate = false;   
  super.initState();
}

answered Dec 25 '18 at 07:18

iPatel

46,010
16
115
137

if i set in initState not in default then it throws error boolean expression must not be null – Magesh Pandian Dec 25 '18 at 07:37
@MageshPandian then put **bool isUpdate;** in your state class and just remove **widget** prefix in initState method. – iPatel Dec 25 '18 at 08:03
yes already did it working but my doubt why it recreate or reinitialize during keyboard open when page as second page not as home page – Magesh Pandian Dec 25 '18 at 08:09

StatefulWidget Page recreate when keyboard is open

3 Answers3

Linked