StatefulWidget Page recreate when keyboard is open

9

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(),
    );
  }
}
keyboard
flutter
statefulwidget
asked on Stack Overflow Dec 25, 2018 by Magesh Pandian • edited Aug 8, 2020 by Mahdi-Malv

3 Answers

7

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 ))
answered on Stack Overflow Dec 25, 2018 by diegoveloper
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 on Stack Overflow Dec 25, 2018 by iPatel
0

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

answered on Stack Overflow Sep 28, 2019 by Murat Aslan

User contributions licensed under CC BY-SA 3.0