Using tabs to navigate screens in flutter - flutter

Question

The tabs page have three tabs- Nearby,Recent and Notice tabs.
Tabs.dart-
class Tabs extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
SizedBox(width: 24),
MyTab(text: 'Nearby', isSelected: false),
MyTab(text: 'Recent', isSelected: true),
MyTab(text: 'Notice', isSelected: false),
],
);
}
}
class MyTab extends StatelessWidget {
final String text;
final bool isSelected;
const MyTab({Key key, #required this.isSelected, #required this.text})
: super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
text,
style: TextStyle(
fontSize: isSelected ? 16 : 14,
color: isSelected ? Colors.black : Colors.grey,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
),
),
Container(
height: 6,
width: 20,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: isSelected ? Color(0xFFFF5A1D) : Colors.white,
),
)
],
),
);
}
}
In the home-page.dart file the tabs defined in tabs.dart file is called but are non-functional -
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Stack(
children: <Widget>[
SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 8),
Header(),
SizedBox(height: 40),
Tabs(),
SizedBox(height: 8),
SlidingCardsView(),
],
),
),
],
),
);
}
}
As you can see that the SlidingCardsView() is called below the tabs, but I want to open the SlidingCardsView() on clicking the recent tab and further PageOne() to Nearby and PageTwo() to notice tabs. Can anyone help me with this?.Thanks in Advance.

Answer 1

Here is the code, change things according to your needs further,
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Tabs(refresh: () => setState(() {})),
value == 0 ? Center(child: Text("Nearby Page", style: TextStyle(fontSize: 56))) : Container(),
value == 1 ? Center(child: Text("Recent Page", style: TextStyle(fontSize: 56))) : Container(),
value == 2 ? Center(child: Text("Notice Page", style: TextStyle(fontSize: 56))) : Container(),
],
),
),
);
}
}
class Tabs extends StatefulWidget {
final Function refresh;
Tabs({this.refresh});
#override
_TabsState createState() => _TabsState();
}
int value = 1;
class _TabsState extends State<Tabs> {
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
SizedBox(width: 24),
MyTab(text: 'Nearby', isSelected: value == 0, onTap: () => _updateValue(0)),
MyTab(text: 'Recent', isSelected: value == 1, onTap: () => _updateValue(1)),
MyTab(text: 'Notice', isSelected: value == 2, onTap: () => _updateValue(2)),
],
);
}
void _updateValue(int newValue) {
widget.refresh();
setState(() {
value = newValue;
});
}
}
class MyTab extends StatelessWidget {
final String text;
final bool isSelected;
final Function onTap;
const MyTab({Key key, #required this.isSelected, #required this.text, this.onTap}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: InkWell(
onTap: onTap,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
text,
style: TextStyle(
fontSize: isSelected ? 16 : 14,
color: isSelected ? Colors.black : Colors.grey,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
),
),
Container(
height: 6,
width: 20,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: isSelected ? Color(0xFFFF5A1D) : Colors.white,
),
)
],
),
),
);
}
}