Flutter stateful widgets - issue with saving states on button click - dart

Question

Following is a simple code(in main.dart) I was trying to use to revisit the flutter basics which I was doing few months back.
Here, in the following code setState() is not working as expected and the reason is with the wrong state.
I can get it usable by creating separate statefulwidget withs states constituting the following elements for button and text change.
But here I wanted to know is it possible to do it anonymously with minimal changes in below code
import 'package:flutter/material.dart';
var textStrings = ["Hello", "Hi", "Hey", "Aloha"];
var counter = 0;
void main() => runApp(MaterialApp(
title: "Hello",
home: Scaffold(
appBar: AppBar(
title: Text(
"First App",
style: TextStyle(
color: Colors.white70,
fontSize: 20,
fontStyle: FontStyle.normal),
),
),
body: Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 20)),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(bottom: 20)),
Center(
child: Text("With Flutter, Spread Fluttery",
style: TextStyle(
color: Colors.redAccent,
fontStyle: FontStyle.italic,
fontSize: 30)),
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Icon(
Icons.refresh,
size: 50,
color: Colors.amberAccent,
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Text(textStrings[counter % 4],
style: TextStyle(
color: Colors.black38,
fontSize: 30,
fontStyle: FontStyle.normal)),
Padding(padding: EdgeInsets.only(bottom: 20)),
RaisedButton(
onPressed: () {
setState() {
counter++;
}
},
child: Text("Enter",
style: TextStyle(
color: Colors.teal,
fontSize: 30,
)),
)
],
),
)
],
),
),
),
),
));

Answer 1

Sure you can do it adding a few lines of code, you can use the StatefulBuilder.
Wrap your container inside StatefulBuilder and change your setState(() {} ) inside the onPressed method of your button.
void main() => runApp(MaterialApp(
title: "Hello",
home: Scaffold(
appBar: AppBar(
title: Text(
"First App",
style: TextStyle(
color: Colors.white70,
fontSize: 20,
fontStyle: FontStyle.normal),
),
),
body: StatefulBuilder(
builder: (context, setState) {
return Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 20)),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(bottom: 20)),
Center(
child: Text("With Flutter, Spread Fluttery",
style: TextStyle(
color: Colors.redAccent,
fontStyle: FontStyle.italic,
fontSize: 30)),
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Icon(
Icons.refresh,
size: 50,
color: Colors.amberAccent,
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Text(textStrings[counter % 4],
style: TextStyle(
color: Colors.black38,
fontSize: 30,
fontStyle: FontStyle.normal)),
Padding(padding: EdgeInsets.only(bottom: 20)),
RaisedButton(
onPressed: () {
setState(() {
counter++;
});
},
child: Text("Enter : $counter",
style: TextStyle(
color: Colors.teal,
fontSize: 30,
)),
)
],
),
)
],
),
),
);
},
)),
));

Answer 2

First, you need to understand that, whenever you call setState() method, It will just rebuild the Stateful Widget, and build() method of the State class of Stateful widget gets executed.
In your code, there is no such stateful widget is available so setState() method is of no use.
Here is the code:
void main() => runApp(MaterialApp(
title: "Hello",
home: Scaffold(
appBar: AppBar(
title: Text(
"First App",
style: TextStyle(
color: Colors.white70,
fontSize: 20,
fontStyle: FontStyle.normal),
),
),
body: MyAppWidgets(),
),
)
);
class MyAppWidgets extends StatefulWidget {
#override
_MyAppWidgetsState createState() => _MyAppWidgetsState();
}
class _MyAppWidgetsState extends State<MyAppWidgets> {
var textStrings = ["Hello", "Hi", "Hey", "Aloha"];
var counter = 0;
#override
Widget build(BuildContext context) {
return Container(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(top: 20)),
Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Padding(padding: EdgeInsets.only(bottom: 20)),
Center(
child: Text("With Flutter, Spread Fluttery",
style: TextStyle(
color: Colors.redAccent,
fontStyle: FontStyle.italic,
fontSize: 30)),
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Icon(
Icons.refresh,
size: 50,
color: Colors.amberAccent,
),
Padding(padding: EdgeInsets.only(bottom: 20)),
Text(textStrings[counter % 4],
style: TextStyle(
color: Colors.black38,
fontSize: 30,
fontStyle: FontStyle.normal)),
Padding(padding: EdgeInsets.only(bottom: 20)),
RaisedButton(
onPressed: () {
setState(() {
counter++;
});
},
child: Text("Enter",
style: TextStyle(
color: Colors.teal,
fontSize: 30,
)),
)
],
),
)
],
),
),
);
}
}

Answer 3

i think that there is no way to do so, because runApp is can not redraw using statefull widget. it is just starting point of your application.
just change the title of your application in main method and use hot reload it will not reflated in you result and use play button(run button) it will work.