Following is my code which i am using for bottom navigation
class NaviBottom extends StatefulWidget {
#override
_NaviBottomState createState() => _NaviBottomState();
}
class _NaviBottomState extends State<NaviBottom> {
int _currentIndex = 0;
final List<Widget> _children = [
HomeScreen(),
AddProperties(),
MyFavProperties(),
MyProfile(),
Login()
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Open Houze")),
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.blue,
selectedItemColor: Colors.black,
unselectedItemColor: Colors.white,
onTap: onTabTapped,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home), title: new Text('First')),
BottomNavigationBarItem(
icon: new Icon(Icons.mail), title: new Text('Second')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Third')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Forth')),
BottomNavigationBarItem(
icon: Icon(Icons.person), title: Text('Fifith'))
],
),
);
}
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
In this my first three tab views to be shown with bottom navigation bar whereas when I click on the last two tabs I need to Navigate and show other screens without BottomNavigation bar,
void onTabTapped(int index) {
if(index >= 0 && index < 3)
setState(() {
_currentIndex = index;
});
if(index == 3)
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FourthPage()),
);
if(index == 4)
Navigator.push(
context,
MaterialPageRoute(builder: (context) => FifthPage()),
);
}
N.B : Dart has type inference, meaning that you don't need to annotate the type if it's explicit. So you can just type final _children and remove the List<Widget>.
Related
I am programming a Bottom Navigation Bar, but the title it's duplicated. The code:
class _HomePageState extends State<HomePage> {
int _opcaoselecionada = 0;
final List<Widget> _telas = [
Menu(),
HomePage(),
Graficos(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('bem vindo')
),
body: _telas[_opcaoselecionada],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _opcaoselecionada,
onTap: onTabTapped,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.add),
label: "Menu",
),
BottomNavigationBarItem(
icon: Icon(Icons.house_outlined),
label: "inicial",
),
BottomNavigationBarItem(
icon: Icon(Icons.auto_graph),
label: "graficos",
)
],
),
);
}
void onTabTapped(int index) {
setState(() {
_opcaoselecionada = index;
});
}
}
This is how it looks like:
Also, everytime I click in the Menu button, it creates a new title. The rest of the code is working properly.
final List<Widget> _telas = [
Menu(),
HomePage(),
Graficos(),
];
You need to return only body part
remove
appBar: AppBar(
title: const Text(label)
),
from Menu(),
HomePage(),
Graficos(), this 3 widgets
I created a separate file for bottom navigation bar and included the three screens which is to be included in bottom navigation bar .
class _bottomnavscreen extends State<bottomnavscreen> {
int _selectedIndex = 0;
List<Widget> pageList = [home(), create(), profile()];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.add_circle_outline_sharp),
label: 'Create',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
body: pageList.elementAt(_selectedIndex),
);
}
I put this bottomnavscreen as the home in main.dart:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: bottomnavscreen(),
);
}
}
But this bootomnavigation widget is seen in my detailedpost screen and comment screen.
detailedpost screen is pushed from home() through Navigation.push()
Comment screen is pushed from postdetails() through
Navigation.push()
How can I hide this bottom navigation widget in my comment screen and detailedpost screen?
This is how I push to detailpost screen from home()
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => detailpost(
body: document['body'],
title: document['title'],
date: document['date'],
)),
);
You can add condition for specific index like this :
class _bottomnavscreen extends State<bottomnavscreen> {
int _selectedIndex = 0;
List<Widget> pageList = [home(), create(), profile()];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: _selectedIndex == 1 ? Container() : BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.add_circle_outline_sharp),
label: 'Create',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
body: pageList.elementAt(_selectedIndex),
);
}
You should start a base page from the MyApp and add BottomNavigations in that page only.
Now when you navigate to detailedpost screen and comment screen, the BottomNavigations will not be visible.
you can use the offstage property to hide the bottom navigation bar on specific pages by wrapping it in an Offstage widget and setting the offstage property to true:
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentIndex = 0;
final List<Widget> _pages = [ HomePage(), SettingsPage(), ];
#override
Widget build(BuildContext context) {
return Scaffold(
body: _pages[_currentIndex],
bottomNavigationBar: Offstage(
offstage: _currentIndex == 1,
child: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('Settings'),
),
],
),
),
);
}
}
The routing starts at the main().I dont think the mistake is here.
The first page is CredentialPage() because its set to home
In CredentialPage(), I check if the user is logged in, if he is. I send him to NavigatorView(). The issue could be here maybe.
Once the CredentialPage loads, the user is routed to AllJobsView()
here is a small video of the issue: https://www.youtube.com/watch?v=qkBueUr_gN0
void main() {
WidgetsFlutterBinding.ensureInitialized();
runApp(
MaterialApp(
title: 'Vendor Management',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const CredentialPage(), // <=======
routes: {
loginRoute: (context) => const LoginView(),
registerRoute: (context) => const RegisterView(),
verifyEmailRoute: (context) => const VerifyEmailView(),
//
allJobsRoute: ((context) => const AllJobsView()),
myJobsRoute: (context) => const MyJobsView(),
newJobRoute: (context) => const CreateUpdateJobView(),
myJobApplicationsRoute: (context) => const JobApplicationView(),
navigatorViewRoute: (context) => const NavigatorView(),
},
),
);
}
class CredentialPage extends StatelessWidget {
const CredentialPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: AuthService.firebase().initialize(),
builder: (context, snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.done:
final user = AuthService.firebase().currentUser;
if (user != null) {
if (user.isEmailVerified) {
return const NavigatorView(); // <============
} else {
return const VerifyEmailView();
}
} else {
return const LoginView();
}
default:
return const CircularProgressIndicator();
}
},
);
}
}
Once the CredentialPage loads, the user is routed to AllJobsView()
class _NavigatorViewState extends State<NavigatorView> {
late final FirebaseCloudStorage _jobsService;
String get userId => AuthService.firebase().currentUser!.id;
#override
void initState() {
_jobsService = FirebaseCloudStorage();
super.initState();
}
int currentIndex = 0;
final screens = [
AllJobsView(), <========
MyJobsView(),
CreateUpdateJobView(),
JobApplicationsView(),
Center(
child: Text('Profile'),
),
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: screens[currentIndex],
bottomNavigationBar: BottomNavigationBar( <=== bottom nav
currentIndex: currentIndex,
selectedItemColor: Colors.white,
backgroundColor: Colors.blue,
type: BottomNavigationBarType.fixed,
selectedFontSize: 10,
onTap: (index) => setState(() => currentIndex = index),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.dashboard),
label: 'Open jobs',
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'My jobs',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Create Job',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Job Applications',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
),
);
}
}
the issue was with the nagivation route when i clicked logg in.
instead of sending me to the all jobs, i changed it to navigator view!
i having a bottom navigation bar that look like this below
class BottomNavigationsBar extends StatefulWidget {
const BottomNavigationsBar({Key? key}) : super(key: key);
#override
State<BottomNavigationsBar> createState() => _BottomNavigationsBarState();
}
class _BottomNavigationsBarState extends State<BottomNavigationsBar> {
int currentIndex = 0;
final List _pages = [
EcoHomePageView(),
ChatCheckLogin(),
EcoNotificationPageView(),
UserCheckLogin(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: _pages[currentIndex],
bottomNavigationBar: BottomNavigationBar(
unselectedItemColor: Colors.grey.shade700,
selectedItemColor: Colors.red,
showSelectedLabels: true,
showUnselectedLabels: true,
type: BottomNavigationBarType.fixed,
onTap: ontap,
currentIndex: currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home_outlined),
label: "Home",
activeIcon: Icon(Icons.home)),
BottomNavigationBarItem(
icon: Icon(Icons.message_outlined),
label: "Chat",
activeIcon: Icon(Icons.message)),
BottomNavigationBarItem(
icon: Icon(Icons.notifications_outlined),
label: "Home",
activeIcon: Icon(Icons.notifications)),
BottomNavigationBarItem(
icon: Icon(Icons.person_outline),
label: "User",
activeIcon: Icon(Icons.person)),
],
),
);
}
void ontap(int index) {
setState(() {
currentIndex = index;
});
}
}
it works properly till when i need to go to new screen, using this code below
onTap: () =>
Get.toNamed(Routes.UPLOAD_PRODUCT),
but when i arrive at the other page. the bottom navigation bar still there. how can i directly go to other page leaving the bottom navigation bar behind??
this is the main.dart code
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
await GetStorage.init();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final authC = Get.put(AuthController(), permanent: true);
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: Future.delayed(Duration(seconds: 3)),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return MaterialApp(
home: Scaffold(
body: BottomNavigationsBar(),
),
);
}
return FutureBuilder(
future: authC.firstInitialized(),
builder: (context, snapshot) => SplashScreen(),
);
},
);
}
}
Use persistent_bottom_nav_bar for keep bottom navigation bar to all the screens.
https://pub.dev/packages/persistent_bottom_nav_bar
I have a main.dart with bottomNavigationBar with 5 tabs and when clicked on tabs it goes to the respective pages.
void main() => runApp(MyStatefulWidget());
class MyStatefulWidget extends StatefulWidget {
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
final List<Widget> _children = [
ProfilePage1(),
EventPage3(),
HomePage2(),
AllEventPage(),
ProfilePage1(),
];
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<EventModifier>(
create: (context) => EventModifier()),
],
child: MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(child: _children.elementAt(_selectedIndex)),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("")),
BottomNavigationBarItem(
icon: Icon(Icons.calendar_today), title: Text("")),
BottomNavigationBarItem(
icon: Icon(
Icons.account_circle,
size: 45,
color: Color(0xFF334192),
),
title: Text("")),
BottomNavigationBarItem(
icon: Icon(Icons.message), title: Text("")),
BottomNavigationBarItem(
icon: Icon(Icons.table_chart), title: Text("")),
],
currentIndex: _selectedIndex,
selectedItemColor: Color(0xFF334192),
unselectedItemColor: Colors.grey,
onTap: _onItemTapped,
),
),
),
);
}
}
Now, in the 3rd tab there is a button called "See All" and when clicked it should go to the 4th page With bottomNavigationBar and automatically it should be clicked the 4th tab of the bottomNavigationBar.
How to do that in flutter?flutt
To change the bottomNavigationBar selected item manually you would set
_selectedIndex = 4;
To navigate to the AllEventTab when the ‘See All’ button is clicked... one way is using Navigator.push() in the button’s onPressed(), like this:
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => AllEventTab()),
);
}
see “Navigation Basics”