Flutter - Multi Page Navigation using bottom navigation bar icons - flutter

I'm trying to navigate to different pages within my app using the icons in my bottom navigation bar. I have tried many tutorials and can't seem to work out the best way to achieve this. I have created my Homepage (code below) and 2 additional pages, Inbox and Signin, both return simple scaffolds.
Firstly i'm interested to know if this is the best way to do what i'm trying to achieve and second, how can my code be altered to allow me to navigate to different pages depending on which icon is tapped. I'm aware that the code below doesn't execute, i'm just trying to show what i've tried.
My code:
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
_onTap(int index) {
Navigator.of(context)
.push(MaterialPageRoute<Null>(builder: (BuildContext context) {
return _children[_currentIndex];
}));}
final List<Widget> _children = [
HomePage(),
InboxPage(),
SignInPage()
];
int _currentIndex = 0;
#override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Scaffold(
appBar: PreferredSize(preferredSize: Size(double.infinity, 75),
child: AppBar(
elevation: 0.0,
centerTitle: false,
title: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
currentDate,
textAlign: TextAlign.left,
style: TextStyle(
color: titleTextColor,
fontWeight: subTitleFontWeight,
fontFamily: titleFontFamily,
fontSize: subTitleFontSize),
),
),
SizedBox(
height: 15,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Some text here',
style: TextStyle(
color: titleTextColor,
fontWeight: titleTextFontWeight,
fontFamily: titleFontFamily,
fontSize: titleFontSize),
),
),
],
),
backgroundColor: kPrimaryColor,
shape: titleBarRounding
),
),
body: BodyOne(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('Inbox'),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text('Account'),
)
],
onTap: () => _onTap(_currentIndex),
),);
}
}
Thanks in advance.

The screen you are in can't be part of the Screens you're navigating to and you don't need to push a new screen each time you just have to change selectedPage, this is an example of how it should look:
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int selectedPage = 0;
final _pageOptions = [
HomeScreen(),
InboxScreen(),
SignInScreen()
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: _pageOptions[selectedPage],
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(icon: Icon(Icons.home, size: 30), title: Text('Home')),
BottomNavigationBarItem(icon: Icon(Icons.mail, size: 30), title: Text('Inbox')),
BottomNavigationBarItem(icon: Icon(Icons.account_circle, size: 30), title: Text('Account')),
],
selectedItemColor: Colors.green,
elevation: 5.0,
unselectedItemColor: Colors.green[900],
currentIndex: selectedPage,
backgroundColor: Colors.white,
onTap: (index){
setState(() {
selectedPage = index;
});
},
)
);
}
}
Let me know if you need more explanation.

The input parameter of the _onTap function is unused and needs to be deleted.
_onTap() {
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) => _children[_currentIndex])); // this has changed
}
In the onTap of the BottomNavigationBar you need to change the _currentIndex and then call the _onTap function which navigates to the selected screen.
onTap: (index) {
setState(() {
_currentIndex = index;
});
_onTap();
},
You can add this BottomNavigationBar to all of the screens, but pay attention to the initial value of the _currentIndex that changes according to the screen you're putting the BottomNavigationBar in.
Full code:
_onTap() { // this has changed
Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext context) => _children[_currentIndex])); // this has changed
}
final List<Widget> _children = [
HomePage(),
InboxPage(),
SignInPage()
];
#override
Widget build(BuildContext context) {
SizeConfig().init(context);
return Scaffold(
appBar: PreferredSize(
preferredSize: Size(double.infinity, 75),
child: AppBar(
elevation: 0.0,
centerTitle: false,
title: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
currentDate,
textAlign: TextAlign.left,
style: TextStyle(
color: titleTextColor,
fontWeight: subTitleFontWeight,
fontFamily: titleFontFamily,
fontSize: subTitleFontSize),
),
),
SizedBox(
height: 15,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
'Some text here',
style: TextStyle(
color: titleTextColor,
fontWeight: titleTextFontWeight,
fontFamily: titleFontFamily,
fontSize: titleFontSize),
),
),
],
),
backgroundColor: kPrimaryColor,
shape: titleBarRounding
),
),
body: BodyOne(),
body: Container(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('Inbox'),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text('Account'),
)
],
onTap: (index) { // this has changed
setState(() {
_currentIndex = index;
});
_onTap();
},
),
);
}

The best way to do it is creating a wrapper to your screens. Like this:
class Wrapper extends StatefulWidget {
Wrapper();
_WrapperState createState() => _WrapperState();
}
class _WrapperState extends State<Wrapper> {
int _currentIndex = 0;
final List<Widget> _children = [
HomePage(),
InboxPage(),
SignInPage()
];
void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
currentIndex: _currentIndex,
items:[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('Inbox'),
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
title: Text('Account'),
)
],
),
);
}
}

Related

How to put one image and text in one screen and leave the other screens with icons

I'm learning Flutter now and I'm not very handy yet. I have this problem:
basically I have created more screens and I can navigate through them thanks to a "bottomNavigationBar". Now the problem is I just don't know how to put an image and text on the Home screen but at the same time leave the icons on the other screens. I'm doing a project and now I need to do this thing.
I also need to know how to adjust this image (https://images.unsplash.com/photo-1604357209793-fca5dca89f97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFwfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60") to the screen so that it stays between the AppBar and the bottomNavigationBar. (I now how to add images, I only need to know can it be fitted in the way I want).
(I leave here all the code that I written until now).
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Start Pages';
#override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: StartPages(),
);
}
}
class StartPages extends StatefulWidget {
const StartPages({super.key});
#override
State<StartPages> createState() => StartPagesState();
}
class StartPagesState extends State<StartPages> {
int _selectedIndex = 2;
//static const TextStyle optionStyle =
//TextStyle(fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white);
static const List<Widget> _widgetOptions = <Widget>[
Icon(
Icons.calendar_month,
size:150,
color: Colors.white,
),
Icon(
Icons.location_on,
size:150,
color: Colors.white,
),
Image(
image: NetworkImage('https://images.unsplash.com/photo-1604357209793-fca5dca89f97?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bWFwfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60'),
),
Icon(
Icons.group,
size:150,
color: Colors.white,
),
Icon(
Icons.groups,
size:150,
color: Colors.white,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('FindASpot'),
backgroundColor: Colors.grey[900],
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
backgroundColor: Colors.grey[700],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
selectedIconTheme: IconThemeData(color: Colors.amberAccent),
selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
selectedItemColor: Colors.amberAccent,
items: const <BottomNavigationBarItem>[BottomNavigationBarItem(
icon: Icon(Icons.calendar_month),
label: 'Events',
backgroundColor: Colors.black45,
),
BottomNavigationBarItem(
icon: Icon(Icons.location_on),
label: 'Map',
backgroundColor: Colors.black45,
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.black45,
),
BottomNavigationBarItem(
icon: Icon(Icons.group),
label: 'Friends',
backgroundColor: Colors.black45,
),
BottomNavigationBarItem(
icon: Icon(Icons.groups),
label: 'Groups',
backgroundColor: Colors.black45,
),
],
currentIndex: _selectedIndex,
//selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

Flutter - Open Modal Bottom Sheet on Bottom navigation bar item click

How do i open bottom sheet from bottom navigation bar item click. This is my current code for the page, this is what i have tried so far but it does not seem to be working. I have created the bottom navigation bar successfully and with the functions Page1(), Page2(), Page3(), i can successfully migrate to other pages, now i need the forth item to just open a bottom sheet where i can do more items. The function showBottomSheet() should be able to open a bottom sheet
class _MyNavigationBarState extends State<MyNavigationBar > {
int _currentTabIndex = 0;
#override
Widget build(BuildContext context) {
final _kTabPages = <Widget>[
Page1(),
Page2(),
Page3(),
showBottomSheet()
];
final _kBottmonNavBarItems = <BottomNavigationBarItem>[
const BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
const BottomNavigationBarItem(icon: Icon(Icons.network_cell), label: 'Prices'),
const BottomNavigationBarItem(icon: Icon(Icons.add_circle), label: 'Trade'),
const BottomNavigationBarItem(icon: Icon(Icons.account_balance_wallet), label: 'Wallet'),
];
assert(_kTabPages.length == _kBottmonNavBarItems.length);
final bottomNavBar = BottomNavigationBar(
items: _kBottmonNavBarItems,
currentIndex: _currentTabIndex,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
setState(() {
_currentTabIndex = index;
});
},
);
return Scaffold(
body: _kTabPages[_currentTabIndex],
bottomNavigationBar: bottomNavBar,
),
);
}
}
showBottomSheet(){
Container _buildBottomSheet(BuildContext context) {
return Container(
height: 300,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2.0),
borderRadius: BorderRadius.circular(8.0),
),
child: ListView(
children: <Widget>[
const ListTile(title: Text('Bottom sheet')),
const TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(),
icon: Icon(Icons.attach_money),
labelText: 'Enter an integer',
),
),
Container(
alignment: Alignment.center,
child: ElevatedButton.icon(
icon: const Icon(Icons.save),
label: const Text('Save and close'),
onPressed: () => Navigator.pop(context),
),
)
],
),
);
}
}
try this:
class _MyNavigationBarState extends State<MyNavigationBar > {
int _currentTabIndex = 0;
#override
Widget build(BuildContext context) {
final _kTabPages = <Widget>[
Page1(),
Page2(),
Page3(),
Container(),
];
final _kBottmonNavBarItems = <BottomNavigationBarItem>[
const BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
const BottomNavigationBarItem(icon: Icon(Icons.network_cell), label: 'Prices'),
const BottomNavigationBarItem(icon: Icon(Icons.add_circle), label: 'Trade'),
const BottomNavigationBarItem(icon: Icon(Icons.account_balance_wallet), label: 'Wallet'),
];
assert(_kTabPages.length == _kBottmonNavBarItems.length);
final bottomNavBar = BottomNavigationBar(
items: _kBottmonNavBarItems,
currentIndex: _currentTabIndex,
type: BottomNavigationBarType.fixed,
onTap: (int index) {
if(index == 3){
showBottomSheet();
return;
}
setState(() {
_currentTabIndex = index;
});
},
);
return Scaffold(
body: _kTabPages[_currentTabIndex],
bottomNavigationBar: bottomNavBar,
),
);
}
}
showBottomSheet(){
Container _buildBottomSheet(BuildContext context) {
return Container(
height: 300,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue, width: 2.0),
borderRadius: BorderRadius.circular(8.0),
),
child: ListView(
children: <Widget>[
const ListTile(title: Text('Bottom sheet')),
const TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(),
icon: Icon(Icons.attach_money),
labelText: 'Enter an integer',
),
),
Container(
alignment: Alignment.center,
child: ElevatedButton.icon(
icon: const Icon(Icons.save),
label: const Text('Save and close'),
onPressed: () => Navigator.pop(context),
),
)
],
),
);
}
}
implement like this
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0: Home',
style: optionStyle,
),
Text(
'Index 1: Business',
style: optionStyle,
),
Text(
'Index 2: School',
style: optionStyle,
),
Text(
'Index 3: Settings',
style: optionStyle,
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('BottomSheet $index'),
ElevatedButton(
child: Text('Close BottomSheet $index'),
onPressed: () => Navigator.pop(context),
)
],
),
),
);
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.red,
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
backgroundColor: Colors.green,
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
backgroundColor: Colors.purple,
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
backgroundColor: Colors.pink,
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

Change appBar in for each button clicked in flutter

Is there any way that I can change AppBar's 'title:' that will be based to my BottomNavigationBar's button label? I am building an app where the navigation bar will call each classes' on button click,
Like this maybe?
appbar: AppBar(
title: SelectedIndex(label/tile),
),
Here's the source code:
import 'package:flutter/material.dart';
import 'BoosterCommunity_Page.dart';
import 'Diary_Page.dart';
import 'GradeTracker_Page.dart';
import 'CalendarView_Page.dart';
import 'QuotesPage.dart';
import 'ListView_Page.dart';
class HomePage extends StatefulWidget {
HomePage({Key? key}): super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
PageController _pageController = PageController();
List<Widget> _screens = [
QuotesPage(), ListViewPage(), CalendarViewPage(), GradeTrackerPage(), DiaryPage(), BoosterCommunityPage(),
];
void _onPageChanged(int index) {}
void _onItemsTapped(int selectedIndex) {
_pageController.jumpToPage(selectedIndex);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
//I want it to be implemented in this line
title: (BottomNavBar selected index title or label),
),
body: PageView(
controller: _pageController,
children: _screens,
onPageChanged: _onPageChanged,
physics: NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
onTap: _onItemsTapped,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home, color: Colors.grey,),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.list, color: Colors.grey,),
label: 'Task List',
),
BottomNavigationBarItem(
icon: Icon(Icons.calendar_view_month, color: Colors.grey,),
label: 'Calendar View',
),
BottomNavigationBarItem(
icon: Icon(Icons.grade, color: Colors.grey,),
label: 'Grade Tracker',
),
BottomNavigationBarItem(
icon: Icon(Icons.book, color: Colors.grey,),
label: 'Diary Page',
),
BottomNavigationBarItem(
icon: Icon(Icons.business, color: Colors.grey,),
label: 'Booster Community',
),
],
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
height: 100.0,
child: const DrawerHeader(
decoration: BoxDecoration(
color: Colors.orange,
),
child: Text('Sign in first'),
),
),
ListTile(
title: const Text('Account'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('Settings'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('Help and Support'),
onTap: (){
Navigator.pop(context);
},
),
],
),
),
);
}
}
Is it possible or is there an easy way? please let me know, thank you in advance.
Try this one, here I use currentPage to hold the index of the selected bottom navigation item and pageTitle to show the title on the app bar. Now whenever the user tap on the item in the bottom bar all you have to do is to update currentIndex and pageTitle by fetching the specific key at the index in the map bottomNavigateData.
import 'package:flutter/material.dart';
void main() =>
runApp(MaterialApp(debugShowCheckedModeBanner: false, home:
HomePage()));
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
static int currentPage = 0;
static Map<String, Icon> bottomNavigateData = {
'Home': const Icon(
Icons.home,
color: Colors.grey,
),
'Task List': const Icon(
Icons.list,
color: Colors.grey,
),
};
String pageTitle = bottomNavigateData.keys.first;
final PageController _pageController = PageController();
final List<Widget> _screens = [
QuotesPage(),
ListViewPage(),
];
void _onPageChanged(int index) {}
void _onItemsTapped(int selectedIndex) {
setState(() {
currentPage = selectedIndex;
pageTitle = bottomNavigateData.keys.elementAt(selectedIndex);
});
_pageController.jumpToPage(selectedIndex);
}
#override
Widget build(BuildContext context) {
List<BottomNavigationBarItem> navigations = [];
bottomNavigateData
.forEach((k, v) => navigations.add(BottomNavigationBarItem(
icon: v,
label: k,
)));
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(pageTitle),
),
body: PageView(
controller: _pageController,
children: _screens,
onPageChanged: _onPageChanged,
physics: const NeverScrollableScrollPhysics(),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: currentPage, onTap: _onItemsTapped, items: navigations),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
Container(
height: 100.0,
child: const DrawerHeader(
decoration: BoxDecoration(
color: Colors.orange,
),
child: Text('Sign in first'),
),
),
ListTile(
title: const Text('Account'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('Settings'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('Help and Support'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
);
}
}
Widget QuotesPage() {
return Container(color: Colors.white, child: const Text("Page1"));
}
Widget ListViewPage() {
return Container(color: Colors.white, child: const Text("Page2"));
}
Yes, easily. Just define your NavigationBarItems in a variable, update selection index in onTap with setState, and set appBar title based on selection. Something like this:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _currentIndex = 0;
static const _navigationBarItems = <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
label: 'Message',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Person',
),
];
static const List<Widget> _pages = <Widget>[
Text('home'),
Text('message'),
Text('person'),
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(_navigationBarItems[_currentIndex].label!),
),
body: Center(
child: _pages.elementAt(_currentIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: _navigationBarItems,
currentIndex: _currentIndex,
selectedItemColor: Colors.amber[800],
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
),
);
}
}

Trying to add a pageview controller without success....completely new at this

I am completely new at coding and of course I am trying to tackle one of the largest projects I can think of.... anyways. I am running into a huge wall when it comes to my current stage of coding. I have a defaultTabController at the upper portion of the screen with the functionality to switch in between two tabs. I would also like to have a bottomNavigationBar at the bottom of the application with 5 buttons that navigate to additional pages.
I have been attempting to add this code PageView(controller: _pageController, children: <Widget>[],) to the body of my code, yet I am either getting an overload of errors or only the top or bottom nav bars are active. If someone could show me what I'm doing wrong, I would be so grateful!
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _currentTab = 0;
PageController _pageController;
#override
void initState() {
super.initState();
_pageController = PageController();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
extendBodyBehindAppBar: true,
extendBody: true,
appBar: AppBar(
backgroundColor:
Colors.grey.withOpacity(0.5),
title: Text(
'TREBLE',
style: TextStyle(
color: Colors.black,
fontFamily: "treblefont",
fontSize: (33.0)
),
),
bottom: TabBar(
tabs: <Widget>[
Tab(text: "Following"),
Tab(text: "trending"),
],
)
),
body:
TabBarView(
children: <Widget>[
FeedScreen(),
TrendingScreen(),
],
),
bottomNavigationBar: CupertinoTabBar(
currentIndex: _currentTab,
onTap: (int index) {
setState(() {
_currentTab = index;
});
},
activeColor: Colors.black,
backgroundColor: Colors.white.withOpacity(0.5),
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
size: 32.0,
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.search,
size: 32.0,
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.camera_enhance,
size: 32.0,
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.notifications,
size: 32.0,
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_circle,
size: 32.0,
),
),
],
),
),
),
);
}
}
I attempt to insert the code here:
)
),
body:
PageView(controller: _pageController, children: <Widget>[],)
TabBarView(
children: <Widget>[
FeedScreen(),
TrendingScreen(),
],
),
bottomNavigationBar: CupertinoTabBar(
currentIndex: _currentTab,
onTap: (int index) {
setState(() {
_currentTab = index;
});
},
line of code screenshot
Specific error readout screenshot

How to give onPress function for BottomNavigationBar menu in flutter?

i have a bottomnavigation bar in flutter ,what i want is on click of the individual widgets of the bottombar it should navigate me to the next page
Widget _bottemTab() {
return new BottomNavigationBar(
currentIndex: _currentIndex,
onTap:(newIndex) => setState((){_currentIndex = newIndex;}),
type: BottomNavigationBarType.fixed,
items: [
new BottomNavigationBarItem(
icon: Image.asset(
"assets/home.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Home',
),
),
new BottomNavigationBarItem(
icon: Image.asset(
"assets/shopping-bagg.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Mall',
)),
new BottomNavigationBarItem(
icon: Image.asset(
"assets/qr-code.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Scan',
)),
new BottomNavigationBarItem(
icon: Image.asset(
"assets/bank.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Bank',
)),
new BottomNavigationBarItem(
icon: Image.asset(
"assets/delivery.png",
width: 24.0,
height: 24.0,
),
title: Text(
'Inbox',
)),
]);
}
i want is on click of the individual widgets of the bottombar it should navigate me to the next page which i have created separately for each menu items of bottom navigation view..any help is appreciated
In your build() method, you can add this logic.
#override
Widget build(BuildContext context) {
Widget widget = Container(); // default
switch (_currentIndex) {
case 0:
widget = FirstPage();
break;
case 1:
widget = SecondPage();
break;
case 2:
widget = ThirdPage();
break;
}
return Scaffold(
body: widget,
// ...
);
}
Update:
I'm not sure how you did that, here you can see a small example of doing it right way.
int _index = 0;
#override
Widget build(BuildContext context) {
Widget child = Container();
switch(_index) {
case 0:
child = FlutterLogo(colors: Colors.orange);
break;
case 1:
child = FlutterLogo();
break;
}
return Scaffold(
appBar: AppBar(),
bottomNavigationBar: _bottomTab(),
body: SizedBox.expand(child: child),
);
}
Widget _bottomTab() {
return BottomNavigationBar(
currentIndex: _index,
onTap: (int index) => setState(() => _index = index),
backgroundColor: Colors.deepPurple,
items: [
BottomNavigationBarItem(icon: Icon(Icons.looks_one), title: Text("1")),
BottomNavigationBarItem(icon: Icon(Icons.looks_two), title: Text("2")),
],
);
}
Hope this helps.
int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const _pages = <Widget>[
Home(),//this is a stateful widget on a separate file
Business(),//this is a stateful widget on a separate file
School(),//this is a stateful widget on a separate file
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _pages.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business'),
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}