I have 4 pages in a GNav() Bottom-Navigation-Bar and I would like to navigate to different page via click of a button.
I am aware that there might be similar questions on stackoverflow already, however I was unable to implement any of them successfully which is why I am posting here as my "last effort".
First off, my Class RootPage() which is where I am defining my GNav bar and the pages linked to each tab.
import 'package:anitan/pages/menu_bar_pages/profile_page.dart';
import 'package:anitan/pages/menu_bar_pages/search_page.dart';
import 'package:anitan/pages/menu_bar_pages/settings_pages/settings_page.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'home_page.dart';
class RootPage extends StatefulWidget {
RootPage({super.key});
#override
State<RootPage> createState() => _RootPageState();
}
class _RootPageState extends State<RootPage>{
int currentPage = 0;
List<Widget> pages = const [
HomePage(),
ProfilePage(),
SearchPage(),
SettingsPage()
];
final user = FirebaseAuth.instance.currentUser!;
#override
Widget build(BuildContext context) {
return Scaffold(
body: pages[currentPage],
bottomNavigationBar: Container(
color: Colors.green,
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 15.0, vertical: 15),
child: GNav(
backgroundColor: Colors.green,
color: Colors.white,
activeColor: Colors.white,
tabBackgroundColor: Colors.green.shade800,
gap: 8,
onTabChange: (index) => setState(() => currentPage = index),
selectedIndex: currentPage,
padding: const EdgeInsets.all(16),
tabs: const [
GButton(icon: Icons.home, text: "Home"),
GButton(icon: Icons.person, text: "My Page"),
GButton(icon: Icons.search, text: "Browse"),
GButton(icon: Icons.settings, text: "Settings"),
],
),
),
),
);
}
}
Next up, the HomePage which has a button. When clicked, I want to change the selected tab of my GNav bar. Pushing the page etc. will lead to the Navigation Bar disappearing which is why this isn't an option.
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key,});
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text("Home Page"),
automaticallyImplyLeading: false,
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: const Icon(Icons.arrow_back_ios),
),
actions: [
IconButton(
onPressed: () {
debugPrint("appBar Button");
},
icon: const Icon(Icons.info_outline),
),
],
),
body: SafeArea(
child: ElevatedButton(onPressed: (() => print("Change Page Here")), child: Text("Change-Page")),
),
);
}
}
I tried a few things like implementing a StreamController or using a GlobalKey. But I would like to the GNav Bar instead of using a Tab controller because of its design.
In theory, what I am trying to do seems simple:
I would like to currentPage to a new index and call setState() to show the changes.
Can anyone help me understand how I can access change the index and update the selected page in my RootPage?
I have spent 2 days looking into various solutions but I can't get any of them to work.
Many thanks!
Edit:
Please find the code of my main.dart below.
import 'package:anitan/pages/menu_bar_pages/root_page.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
//import 'firebase_options.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.green),
home: RootPage(),
);
}
}
HomePage is already a part of RootPage which is needed to be on the same route.You can use callback method to handle click-event/changing page.
class HomePage extends StatefulWidget {
final VoidCallback onTap;
const HomePage({
super.key,
required this.onTap,
});
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child:
ElevatedButton(onPressed: widget.onTap, child: Text("Change-Page")),
),
);
}
}
Now you will get a callback method while creating HomePage
int currentPage = 0;
List<Widget> pages = [
HomePage(onTap:(){
// page
} ),
];
Given the reply from Yeasin Sheikh I implemented a little workaround which seems to be working fine:
First, as recommended by Yeasin, I added a VoidCallback function onTap to my HomePage class:
class HomePage extends StatefulWidget {
final VoidCallback onTap;
const HomePage({super.key, required this.onTap});
#override
State<HomePage> createState() => _HomePageState();
}
Then I called this onTap function clicking the button:
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child:
ElevatedButton(onPressed: widget.onTap(), child: Text("Change-Page")),
),
);
}
}
In my rootPage class, I then created my HomePage.
When the onTap function of that page is being called, I am calling a method to refresh the page (setState) and changing the currentPage index as part of it.
This required me to initialize the List of my pages using "late".
class _RootPageState extends State<RootPage>{
int currentPage = 0;
late List<Widget> pages = [
HomePage(onTap:(){
_changePage(2);
} ),
const ProfilePage(),
const SearchPage(),
const SettingsPage()
];
_changePage(int id){
setState(() {
currentPage = id;
});
}
To keep everything centralized, I switched to using the same method to update the index in the onTabChange part of the GNav bar as well.
onTabChange: (index) => setState(() => _changePage(index)),
Clicking the button now switches the page.
The bottom navigation bar (GNav) will stay on the screen and can be used as usual.
Thank you for your support in figuring this out!
Related
I'm trying to implement clickable the selected item in the Bottom navigation bar in my Flutter app. What I'm trying to achieve is when the user clicks any item in the Bottom navigation bar the selected item page contains the button which navigates to another inner page so if I want to try to click the select item in the Bottom navigation bar it shows me the same inner page, the app changes the selected tab inside the bottom navigation bar. but if I click again the select item tab it shows me the same inner page. Any help is appreciated.
Or Maybe it's clickable but the selected tab shows me the inner page only
Any help is appreciated.
My main.dart:-
import 'package:flutter/material.dart';
import 'MyPage.dart';
import 'MyPage2.dart';
import 'MyPage3.dart';
import 'package:double_back_to_close_app/double_back_to_close_app.dart';
import 'Notifications.dart';
import 'MyCustomPage.dart';
class MyApp extends StatefulWidget {
#override
_MyAppcreateState() => _MyApp();
}
class _MyApp extends State<MyApp> {
late List<Widget> _pages;
List<BottomNavigationBarItem> _items = [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "Home",
),
BottomNavigationBarItem(
icon: Icon(Icons.messenger_rounded),
label: "Messages",
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: "Settings",
)
];
late int _selectedPage;
#override
void initState() {
super.initState();
_selectedPage = 0;
_pages = [
MyPage(
count: 1,
),
MyPage2(
count: 2,
),
MyPage3(
count: 3,
),
];
}
#override
Widget build(BuildContext context) {
print(_selectedPage);
return Scaffold(
body: _pages[_selectedPage],
bottomNavigationBar: BottomNavigationBar(
items: _items,
currentIndex: _selectedPage,
onTap: (index) {
setState(() {
_selectedPage = index;
});
},
)
);
}
}
MyPage.dart
import 'package:flutter/material.dart';
import 'MyCustomPage.dart';
import 'Notifications.dart';
class MyPage extends StatefulWidget {
final count;
MyPage({Key? key, this.count}) : super(key: key);
#override
_MyPage createState() => _MyPage();
}
class _MyPage extends State<MyPage>{
late int _selectedPage;
#override
Widget build(BuildContext context) {
return Navigator(
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('page 01'),
),
body: Center(
child: RaisedButton(
child: Text('my page1'),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (ctx) => MyCustomPage()
)
);
},
),
),
);
},
);
},
);
}
}
MyCustomPage.dart
import 'package:flutter/material.dart';
class MyCustomPage extends StatefulWidget {
MyCustomPage({Key? key}) : super(key: key);
#override
_MyCustomPage createState() => _MyCustomPage();
}
class _MyCustomPage extends State<MyCustomPage>{
#override
Widget build(BuildContext parentContext) {
return Scaffold(
appBar: AppBar(
title: Text('custompage'),
),
body: Column(
children: [
Expanded(
child: Container(
child: ListView.builder(
itemCount: 15,
itemBuilder: (context, index) {
return Container(
width: double.infinity,
child: Card(
child: Center(
child: Text('My Custom Page'),
),
),
);
},
),
),
),
],
),
);
}
}
I add the image for a better understanding:-
my home page view
MycustomPage/inner page view
this is my issue what I want is when I navigate to the inner page the select tab must be unselectable and when I click on that selected tab it will show the first page which is MyPage.dart page, not the inner page(MyCustomPage.dart).
Please answer me if any further questions.
Please comment to me if you don't understand it.
But please don't ignore this. I really want to do that task.
Any help is appreciated.
Till I understood this thing is not possible with default BottomNavigationBar
maybe you can with custom. this is already a predefined index in the BottomNavigationBar constructor and set it to "0"
int currentIndex = 0,
BottomNavigationBar(
{Key? key,
required List<BottomNavigationBarItem> items,
ValueChanged<int>? onTap,
int currentIndex = 0,
double? elevation,
BottomNavigationBarType? type,
Color? fixedColor,
Color? backgroundColor,
double iconSize = 24.0,
Color? selectedItemColor,
Color? unselectedItemColor,
IconThemeData? selectedIconTheme,
IconThemeData? unselectedIconTheme,
double selectedFontSize = 14.0,
double unselectedFontSize = 12.0,
TextStyle? selectedLabelStyle,
TextStyle? unselectedLabelStyle,
bool? showSelectedLabels,
bool? showUnselectedLabels,
MouseCursor? mouseCursor,
bool? enableFeedback,
BottomNavigationBarLandscapeLayout? landscapeLayout}
)
BottomNavigationBar ref
I want to use bottomNavigationBar with listview, I tried each one of them separately and they work fine, but when I use them together, the bottomNavigationBar doesn't work, you can press the icons but nothing happens.
note: I'm using an older version of dart to avoid null-safety which is dumb, but the reason is the book I read is from 2019 so I couldn't follow without using an older version.
note 2: I'm very new to programming.
main.dart
//#dart=2.9
import 'package:flutter/material.dart';
import 'package:ch8_bottom_navigation/pages/home.dart';
void main() => runApp(Myapp());
class Myapp extends StatelessWidget {
//this widget is the root of the app
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Starter Template',
theme: ThemeData (
primarySwatch: Colors.blue,
platform: TargetPlatform.iOS,
),
home: Home(),
);
}
}
home.dart
//#dart=2.9
import 'package:flutter/material.dart';
import 'discover.dart';
import 'home2.dart';
import 'account.dart';
class Home extends StatefulWidget {
const Home({Key key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int _currentIndex = 0;
List _listPages = [];
Widget _currentPage;
#override
void initState() {
super.initState();
_listPages
..add(Home2())
..add(Discover())
..add(Account());
_currentPage = Discover();
}
void _changePage(int selectedIndex) {
setState(() {
_currentIndex = selectedIndex;
_currentPage = _listPages[selectedIndex];
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: ListView.builder(
itemCount:20 ,
itemBuilder: (BuildContext context , int index) {
if (index >= 0 && index <= 0) {
return Home2 (index:index);
}
else return null;
},
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.live_tv),
label: ('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.explore_outlined),
label: ('Discover'),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_box_outlined),
label: ('Account'),
),
],
onTap: (selectedIndex) => _changePage(selectedIndex),
),
);
}
}
home2.dart
//#dart=2.9
import 'package:flutter/material.dart';
class Home2 extends StatelessWidget {
const Home2({Key key , #required this.index}) : super(key: key);
final int index;
#override
Widget build(BuildContext context) {
return Container(
child:Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
color: Colors.white70,
child: ListTile(
leading: Image(
image: AssetImage('assets/images/blackwidow.jpg'),
),
title: Text('Black Widow'),
subtitle: Text('By Disney'),
trailing: Icon(Icons.movie),
selected: true,
onTap: () {
print('Trapped on Row $index');
},
),
)
);
}
}
body: SafeArea(child: _currentPage),
or
body: SafeArea(child: _listPages[selectedIndex]),
Did you try this way?
Basically, I have a main widget that has a this._bottomNavigationBar and when the screen will change, I pass it to the new screen. Then, each screen has its own Scaffold and AppBar.
Sounds perfectly, but it's not working properly.
When I click to change the selected option, it changes the screen, but the selected icon keeps the same. If I print the this.currentIndex, it changes the index normally. Something that I was not expecting to happen, because when I declare the this._bottomNavigationBar, the currentIndex property is defined like that: currentIndex: this.currentIndex, so if the icon isn't changing, then the variable won't either.
So, I realized that I probably forgive to use the setState() method on the onTap, but it wasn't the case.
I just don't know why this is happening. I think it's something about the setState "scope", maybe? I'll leave my code below to illustrate this better.
home.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'landing.dart';
const List<BottomNavigationBarItem> homeScreenNavbarItems = [
BottomNavigationBarItem(
icon: Icon(FontAwesomeIcons.home),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.bookmark),
title: Text(''),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text(''),
),
];
class Home extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _HomeState();
}
}
class _HomeState extends State<Home> {
int currentIndex = 1;
BottomNavigationBar _bottomNavigationBar;
List homeScreens;
void onNavbarTapped(int index) {
setState(() {
this.currentIndex = index;
});
}
#override
void initState() {
this._bottomNavigationBar = BottomNavigationBar(
showSelectedLabels: false,
showUnselectedLabels: false,
selectedItemColor: Color(0xFF000000),
unselectedItemColor: Color(0xFFb3b3b3),
currentIndex: this.currentIndex,
items: homeScreenNavbarItems,
onTap: this.onNavbarTapped,
);
this.homeScreens = [
LandingScreen(this._bottomNavigationBar),
Scaffold(
bottomNavigationBar: this._bottomNavigationBar,
)
];
super.initState();
}
#override
Widget build(BuildContext context) {
print(this.currentIndex);
return this.homeScreens.elementAt(this.currentIndex);
}
}
landing.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class LandingScreen extends StatefulWidget {
final BottomNavigationBar _bottomNavigationBar;
LandingScreen(this._bottomNavigationBar);
#override
State<StatefulWidget> createState() {
return _LandingScreenState();
}
}
class _LandingScreenState extends State<LandingScreen> {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('a'),
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
bottomNavigationBar: widget._bottomNavigationBar,
),
);
}
}
The main.dart file is simply calling the Home widget, so I didn't place it here.
Edit
I removed all the content of the initState method and placed then into the Widget build method, worked, but I don't know exactly why...
The issue here is that the BottomNavigationBar is configured in initState. When currentIndex has been updated after calling setState, the properties aren't updated because it's inside initState instead of Widget build.
In this code, I want to show indexed widgets by changing the index from the Navigation drawer i.e. The main MaterialApp shows widget according to the index(widgetIndex). The index is updated but the widget does not change until I hot reload it. So, I want it to reload the MyApp widget from the drawer widget.
main.dart:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:indexed/page1.dart';
import 'package:indexed/page2.dart';
import 'drawer.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
#override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
//set widgetIndex(int widgetIndex) {widgetIndex = DrawerS.widgetIndex;}
int widgetIndex = SideDrawerState.widgetIndex;
#override
Widget build(BuildContext context)
{
return MaterialApp(
home: Container(
child: IndexedStack(
index: widgetIndex,
children: <Widget>[
Page1(), //A Scaffold wid.
Page2(), //A Scaffold wid.
],
),
),
);
}
}
drawer.dart:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SideDrawer extends StatefulWidget {
#override
SideDrawerState createState() => SideDrawerState();
}
class SideDrawerState extends State<SideDrawer> {
static int widgetIndex = 0;
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
ListTile(
contentPadding: EdgeInsets.only(top: 50),
title: Text('1'),
onTap: () async {
setState(() => widgetIndex = 0);
Navigator.of(context).pop();
},
),
ListTile(
title: Text('2'),
onTap: (){
setState(() => widgetIndex = 1);
Navigator.of(context).pop();
},
),
],
),
);
}
}
You can create a function field in your SideDrawer that takes an index as a parameter.
Call the function passing the appropriate parameter in the onTap of each ListTile.
In your MyApp create a variable with initial value of 0 then when setting the SideDrawer add the onTap attribute then change the value of the in the setState
Like this
class MyApp2 extends StatefulWidget {
#override
MyApp2State createState() => MyApp2State();
}
class MyApp2State extends State<MyApp2> {
var widgetIndex = 0;
#override
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title: Text("Home"),
),
body: SafeArea(
child: Container(
child: IndexedStack(
index: widgetIndex,
children: <Widget>[
Text("djdhjhd"),
Text("nonono")
],
),
),
),
drawer: SideDrawer(
onTap: (index){
setState(() {
widgetIndex = index;
});
},
),
);
}
}
class SideDrawer extends StatefulWidget {
final Function(int index) onTap;
SideDrawer({this.onTap});
#override
SideDrawerState createState() => SideDrawerState();
}
class SideDrawerState extends State<SideDrawer> {
#override
Widget build(BuildContext context) {
return Drawer(
child: Column(
children: <Widget>[
ListTile(
contentPadding: EdgeInsets.only(top: 50),
title: Text('1'),
onTap: () async {
widget.onTap(0);
Navigator.of(context).pop();
},
),
ListTile(
title: Text('2'),
onTap: (){
widget.onTap(1);
Navigator.of(context).pop();
},
),
],
),
);
}
}
The output:
I hope this helps you.
Hi Im new to flutter so please bear with me for asking too much nooby question. So I am currently developing an app, the first screen will be a Login/register screen then after a login or registration is directed, the actual main app screen is displayed I also set this screen as stateless and set a body to my HomePage.dart now on my HomePage.dart which is a stateful widget, which contains the navigation bar but for some reason, Im getting an error in
final List<Widget> _children [
NavHome()
];
saying that the children is initialized. And Im confused since I followed the tutorial from medium exactly BUT with just a custom main screen (which appears after the main.dart)
the code for the actual main app screen is below:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'home.dart';
class MainScreen extends StatelessWidget {
const MainScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: HomePage(),
);
}
}
the code for Home.dart is below which says the children variable isnt initialized
import 'package:flutter/material.dart';
import 'package:vmembershipofficial/screens/nav_home.dart';
class HomePage extends StatefulWidget {
static final String id = 'homepage';
HomePage({Key key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentTab = 2;
final List<Widget> _children [
NavHome()
];
void onTabTapped(int index) {
setState(() {
_currentTab = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: _children[_currentTab],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
type: BottomNavigationBarType.fixed,
currentIndex: _currentTab, //makes a new variable called current Tab
items: [
BottomNavigationBarItem(
icon: Icon(Icons.search, size: 30.0),
title: Text('Search', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text('Favorites', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
title: Text('Messages', style: TextStyle(fontSize: 12.0),),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text('Account', style: TextStyle(fontSize: 12.0),),
),
],
),
);
}
}
NOTE: I just want the bottom navigation bar to change to the NavHome, or NavProfile when I tapped on different tabs. I just cant seem to find a way why the _children variable isnt initialized.
You're almost there!
What went wrong
final List<Widget> _children [ // Missing = sign
NavHome()
];
What you can do
Convert the code snippet above to:
final List<Widget> _children = [ // Add = sign here
NavHome(),
NavProfile(),
// Add more screens here
];
I created a simple app for you, which mocks your use case that you need to switch between NavHome and NavProfile.
main.dart
import 'package:flutter/material.dart';
void main() => runApp(ExampleApp());
class ExampleApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
static final String id = 'homepage';
HomePage({Key key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentTab = 0;
final List<Widget> _children = [
RedPage(),
BluePage(),
];
void onTabTapped(int index) {
setState(() {
_currentTab = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: _children[_currentTab],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
type: BottomNavigationBarType.fixed,
currentIndex: _currentTab,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.favorite),
title: Text(
'Red',
style: TextStyle(fontSize: 12.0),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'Blue',
style: TextStyle(fontSize: 12.0),
),
),
],
),
);
}
}
class RedPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.red,
),
);
}
}
class BluePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.blue,
),
);
}
}
I have also noticed that you have 5 widgets in your bottom navigation bar, feel free to add placeholders so you won't get RangeError exception whenever you tap on tabs without the counterpart screen/s.
Hope this helps.