flutter want call parent view upon its child to refresh main view - flutter

Question

I have a Stateful widget that has a child buttons and set of stateful containers (visible and invisible).
I want to try here is when i call the specific button, the specific button will refresh all layout and change it on its specifict view by setting visible while the others are not visible.
like this:
button1 = view1;
button2 = view2;
button3 = view3;
if (button1 is pressed){
view1 is visible}
else{
not visible}
upon my code, upon my first view(login button),I've set to go with my main_page like this:
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MainPage(change1: true,change2: false,change3: false,)),
);
},
now i was display my main_page view (with a child view that has visibility property).
this is my code on main_page:
class MainPage extends StatefulWidget {
final bool change1 ;
final bool change2;
final bool change3 ;
const MainPage({Key key, this.change1,this.change2,this.change3}) : super(key: key);
#override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Container(
constraints: BoxConstraints.expand(
height: 280.0,
),
decoration: BoxDecoration(
image: new DecorationImage(
fit: BoxFit.cover,
colorFilter: new ColorFilter.mode(
Colors.blueAccent, BlendMode.colorBurn),
image: new ExactAssetImage("images/vector.jpg"),
),
),
child: Stack(
children: <Widget>[
Container(
alignment: Alignment.bottomCenter,
child: Row(
children: <Widget>[
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
print("i pressed Official Business");
MainPage(change1: true,change2: false,change3: false);
//TODO: here is my problem, when i call the main_page on its page,
// the value of change1, change2, and chaange3 is not updating
// so that icanot update my view .
});
},
child: Container(
height: 50.0,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Center(
child: Text(
"Official Business",
style: TextStyle(
fontSize: 20.0, color: Colors.white),
),
),
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
print("i pressed file an OB");
MainPage(change1: false,change2: true,change3: false);
//TODO: here is my problem, when i call the main_page on its page,
// the value of change1, change2, and chaange3 is not updating
// so that icanot update my view .
});
},
child: Container(
height: 50.0,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Center(
child: Text(
"File an OB",
style: TextStyle(
fontSize: 20.0, color: Colors.white),
),
),
),
),
),
),
],
),
),
],
),
),
//TODO:
new Visibility(
//Called changed and viewOne
visible: widget.change1,
child: OfficialBusiness(),
),
new Visibility(
//Called not changed and viewTwo
visible: widget.change2,
child: FilingOb(),
),
new Visibility(
//Called not changed and viewTwo
visible: widget.change3,
child: ViewOfficialBusiness(),
)
],
),
),
);
}
}
the fillingob/officialbusiness/ViewOfficialBusiness includded was set of stateful layout, i didn't add the code to prevent over views.
sorry, in new on this programming language and i've like to enlighten with these problems i've encountered if my code is possible or not.Also if you need more reference just ping on comment so that i can provide my other codes

Answer 1

bool change1;
bool change2;
bool change3;
#override
initState() {
super.initState();
change1 = widget.change1;
change2 = widget.change2;
change3 = widget.change3;
}
void setChange1() {
setState(() {
change1 = true;
change2 = change3 = false;
});
}
// GestureDetector(onTap: setChange1)
// Visibility(
// visible: change1,
// child: OfficialBusiness(),
// )
Or use enum :
enum MyView {
officialBusiness,
filingOb,
viewOfficialBusiness,
}
MyView current;
// GestureDetector(onTap: () => setState(() { current = MyView.officialBusiness; }))
// Visibility(
// visible: current == MyView.officialBusiness,
// child: OfficialBusiness(),
// )

Answer 2

In Flutter, the standard way to call functions on a parent widget when something occurs in one of its children would be to pass a function from the parent widget to the child, so that the function gets triggered from the child, with data that only the parent widget knows.
In your case, in your first view, you could define a new method like this:
void onChildPressed() {
setState(() {
// Here you change the boolean change1, change2, whatever you want
});
}
And then, in the child view, you have to define a function parameter, such that your child can receive the function as a parameter, and trigger it from wherever you want in your child widget.
class MainPage extends StatefulWidget {
final bool change1 ;
final bool change2;
final bool change3 ;
final void Function() onPressed;
const MainPage({Key key, this.change1,this.change2,this.change3, this.onPressed}) : super(key: key);
#override
_MainPageState createState() => _MainPageState();
}
This way, you can instantiate the MainPage from your first view like this:
MainPage(change1: false,change2: true,change3: false, onPressed: onChildPressed);
And, finally, you can call the onPressed function in your MainPage, so that your child view updates the parent view the way you want.