Stateful Widget updation on calling it with different parameters, not updating?

Question

i just started learning flutter, im using Stateful widget the following code below is the main.dart file

void main() {
  runApp(App());
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: new Scaffold(backgroundColor: Colors.blueGrey.shade100,
      body: Home.Homescreen(HomeText: "default",), //initially setting text to default
      appBar: new AppBar(
        centerTitle: true,
        title: new Text("newApp",
            textDirection: TextDirection.ltr,
            style: TextStyle(fontSize:20 ,color: Colors.white)),
      ),
      bottomNavigationBar: new BottomNavigationBar(items: [
        new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: new Text(
              "Home",
              textDirection: TextDirection.ltr,
            )),
        new BottomNavigationBarItem(
            icon: Icon(Icons.face),
            title: new Text(
              "Profile",
              textDirection: TextDirection.ltr,
            )),
        new BottomNavigationBarItem(
            icon: Icon(Icons.exit_to_app),
            title: new Text(
              "Exit",
              textDirection: TextDirection.ltr,
            )),
      ],onTap: (int item){
        if(item == 0){
          setState(() {
            Home.Homescreen(HomeText:'this is home'); /* this should change homescreen text but it still says default same for all the below as well*/
          });
        }
        else if(item == 1){
          setState(() {
            Home.Homescreen(HomeText:'this is proile');
          });

        }
        else if(item == 2){
          setState(() {
            Home.Homescreen(HomeText:'this is exit');
          });
        }
      },),
    ));
  }
}

in this a Stateless widget 'App' is called and in _AppState in the Scaffold the body is assigned to a Stateless Widget 'HomeScreen' exported as Home in main under BottomNavigationBar the the items are assigned an int to them which on tapping should change the HomeText accordingly but it does not update , it remains the same on homescreen just saying "default" which is what it was initially called with, the following code is of the home_screen.dart which is called

class Homescreen extends StatefulWidget{
  Homescreen({this.HomeText}); // init hometext
  String HomeText;
  @override
  _Homescreen createState() => _Homescreen();

}

class _Homescreen extends State<Homescreen>{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Center(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          new Text(
            widget.HomeText, // this is what should be updated when called
            textDirection: TextDirection.ltr,
            style: new TextStyle(fontSize: 30,color: Colors.black),
          )
        ],
      ),
    );
  }
}

i dont understand why is the hometext not updating when the icons(bottomnavigationbaritems) are tapped , i've tested the values using debugprint they return 0,1,2 .So,Thats atleast correct.

Answer 1

Try the code below:

void main() {
  runApp(App());
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  String homeText = "default";
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: new Scaffold(backgroundColor: Colors.blueGrey.shade100,
      body: Home.Homescreen(HomeText: homeText,), //initially setting text to default
      appBar: new AppBar(
        centerTitle: true,
        title: new Text("newApp",
            textDirection: TextDirection.ltr,
            style: TextStyle(fontSize:20 ,color: Colors.white)),
      ),
      bottomNavigationBar: new BottomNavigationBar(items: [
        new BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: new Text(
              "Home",
              textDirection: TextDirection.ltr,
            )),
        new BottomNavigationBarItem(
            icon: Icon(Icons.face),
            title: new Text(
              "Profile",
              textDirection: TextDirection.ltr,
            )),
        new BottomNavigationBarItem(
            icon: Icon(Icons.exit_to_app),
            title: new Text(
              "Exit",
              textDirection: TextDirection.ltr,
            )),
      ],onTap: (int item){
        if(item == 0){
          setState(() {
            homeText = "this is home"; 
          });
        }
        else if(item == 1){
          setState(() {
            homeText = "this is profile";
          });

        }
        else if(item == 2){
          setState(() {
            homeText = "this is exit";
          });
        }
      },),
    ));
  }
}

The problem you have is you're not changing your body when you call setState. When build method runs, It always has the same body. With the code above, You update the homeText value and when the build method runs, the homeText has a new value and your text is updated.