Flutter :- Change output on page based on button - flutter

Question

I've made an app that's got a row of three buttons that when pressed are supposed to:
1) turn bold
2) change the output on the page
I've solved step 1 by doing this:
The page's class has an instance variable:
List<bool> _boldButtons = [false, true, false];
Each button's TextStyle has the fontWeight property:
fontWeight: _boldButtons[0] ? FontWeight.bold : FontWeight.normal),
And its onPresed:
onPressed: () {
setState(() {
_boldButtons = [true, false, false];
});
This feels hacky, but does the trick. If anyone has a better way of doing this I'd be more then happy to hear!
To solve problem 2) I'm thinking of doing something like this:
Make three methods (notifications(), yourRecipes(), favorites() ) that return a Container.
Have an instance variable in the page's class that is of that type:
Container wallOfText;
In each button's onPressed we set the wallOfText variable to be equal to that button's function, something like this:
onPressed: () {
wallOfText = boldButtons[0] ? wallOfText : notifications();
// ternary operator to check if we've already selected the button we're pressing, and therefore don't need to redefine what to display
setState(() {
_boldButtons = [true, false, false];
});
Then we display the wallOfText variable in the Scaffold.
This also feels really hacky, but might work. Is there a more general way of doing this?

Answer 1

I have changed little bit in your code, like i have take single variable which hold the selected tab value and update it on tab selection, have a look on below code for it.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _HomeScreen();
}
}
class _HomeScreen extends State<HomeScreen> {
var selectedTab = 1;
var selectedText="First Tab";
#override
void initState() {
// TODO: implement initState
super.initState();
}
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: Container(
child: Column(
children: <Widget>[
Container(
color: Colors.deepOrange,
child:Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FlatButton(
onPressed: () {
setState(() {
selectedTab=1;
selectedText="First Tab";
});
},
child: Text(
"Notifications",
style: TextStyle(
fontWeight:
selectedTab == 1 ? FontWeight.bold : FontWeight.normal),
),
),
FlatButton(
onPressed: () {
setState(() {
selectedTab=2;
selectedText="Second Tab";
});
},
child: Text(
"Your recipe",
style: TextStyle(
fontWeight:
selectedTab == 2 ? FontWeight.bold : FontWeight.normal),
),
),
FlatButton(
onPressed: () {
setState(() {
selectedTab=3;
selectedText="Third Tab";
});
},
child: Text(
"Favorites",
style: TextStyle(
fontWeight:
selectedTab == 3 ? FontWeight.bold : FontWeight.normal),
),
),
],
) ,
)
,
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height*0.6,
child: Align(
alignment: Alignment.center,
child: Text(selectedText),
),
)
],
),
),
);
}
}
And please check the output of it