I'm still a beginner at flutter and I want to create a flutter mobile app with a side drawer and a bottom navigation tab bar. I have created my app with a side drawer and a bottom navigation, but my problem is I want to open the Home page from both drawer and bottom navigation tab.
Now the drawer is opening the home page but it's not showing the bottom navigator.
here's my code
main.dart
import 'package:discover_me/screens/home.dart';
import 'package:discover_me/screens/search.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white,
primaryColor: Colors.white
),
home: TabsPage(),
debugShowCheckedModeBanner: false,
routes: {
// '/': (context) => Home(),
'/home': (context) => Home(),
'/search': (context) => SearchPage(),
},
);
}
}
tabspage.dart
import 'package:discover_me/shared/bottom_tabs.dart';
import 'package:flutter/material.dart';
class TabsPage extends StatefulWidget {
#override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
int _selectedIndex = 0;
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: [
for (final tabItem in TabNavigationItem.items) tabItem.page,
],
),
// drawer: SideMenu(),
),
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,
),
);
}
}
bottom_tabs.dart
import 'package:discover_me/screens/home.dart';
import 'package:discover_me/screens/search.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class TabNavigationItem {
final Widget page;
final Widget title;
final Icon icon;
TabNavigationItem({this.page, this.title, this.icon});
static List<TabNavigationItem> get items => [
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: SearchPage(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
];
}
home.dart
import 'package:discover_me/jsn_objects/visit_places.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:discover_me/widgets/side_menu.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool expanded = false;
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(
context, '/search'
);
}),
],
),
body: Column(
children: [
Container(color: Colors.green, height: 100),
AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: expanded ? 120 : 0,
child: Container(height: 120, color: Colors.red),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
heroTag: null,
child:
Icon(expanded ? Icons.arrow_upward : Icons.arrow_downward),
onPressed: () => setState(() {
expanded = !expanded;
}),
),
],
),
],
),
);
}
}
I want to call Home Page with the bottom navigation from the drawer. Could you please help me with this?
It's not showing BottomNavigationBar because you didn't call it in your HomePage. You can create a generic BottomNavigationBar and call it wherever you want to see it and you can control the selected tab with setting it to provider if you want.
So basically your Home page should be like this :
import 'package:discover_me/jsn_objects/visit_places.dart';
import 'package:discover_me/tabs/tabspage.dart';
import 'package:discover_me/widgets/side_menu.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
bool expanded = false;
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(context, '/search');
}),
],
),
body: Column(
children: [
Container(color: Colors.green, height: 100),
AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: expanded ? 120 : 0,
child: Container(height: 120, color: Colors.red),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
heroTag: null,
child:
Icon(expanded ? Icons.arrow_upward : Icons.arrow_downward),
onPressed: () => setState(() {
expanded = !expanded;
}),
),
],
),
],
),
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,
),
);
}
}
But it's not good to create new BottomNavigationBar for your every page. I suggest you to create a generic one
Finally, I have managed to solve my issue.
I have add a constructor parameter to TabsPage and pass the value when the page called from the side drawer.
here's the solution
main.dart
import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/tabspage.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
scaffoldBackgroundColor: Colors.white, primaryColor: Colors.white),
home: TabsPage(selectedIndex: 0),
debugShowCheckedModeBanner: false,
);
}
}
sidemenu.dart file
import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/tabspage.dart';
class SideMenu extends StatefulWidget {
#override
_SideMenuState createState() => _SideMenuState();
}
class _SideMenuState extends State<SideMenu> {
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
child: Text(
'Discover Sri Lanka',
style: TextStyle(color: Colors.white, fontSize: 25),
),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)),
color: Colors.white,
image: DecorationImage(
fit: BoxFit.fill, image: AssetImage('assets/sideimg.jpg'))),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => TabsPage(selectedIndex: 0)),
)
},
),
ListTile(
leading: Icon(Icons.search),
title: Text('Search'),
onTap: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => TabsPage(selectedIndex: 1)),
),
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Profile'),
onTap: () => {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => TabsPage(selectedIndex: 2)),
),
},
),
],
),
);
}
}
tabspage.dart
import 'package:flutter/material.dart';
import 'package:tabsdrawer/tabs/bottom_tabs.dart';
class TabsPage extends StatefulWidget {
int selectedIndex = 0;
TabsPage({this.selectedIndex});
#override
_TabsPageState createState() => _TabsPageState();
}
class _TabsPageState extends State<TabsPage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
widget.selectedIndex = index;
_selectedIndex = widget.selectedIndex;
print(_selectedIndex);
});
}
#override
void initState() {
_onItemTapped(widget.selectedIndex);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Scaffold(
body: IndexedStack(
index: widget.selectedIndex,
children: [
for (final tabItem in TabNavigationItem.items) tabItem.page,
],
),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Search'),
),
BottomNavigationBarItem(
icon: Icon(Icons.verified_user),
title: Text('Profile'),
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
bottom_tabs.dart
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:tabsdrawer/screens/home.dart';
import 'package:tabsdrawer/screens/profile.dart';
import 'package:tabsdrawer/screens/search.dart';
class TabNavigationItem {
final Widget page;
final Widget title;
final Icon icon;
TabNavigationItem({this.page, this.title, this.icon});
static List<TabNavigationItem> get items => [
TabNavigationItem(
page: Home(),
icon: Icon(Icons.home),
title: Text("Home"),
),
TabNavigationItem(
page: Search(),
icon: Icon(Icons.search),
title: Text("Search"),
),
TabNavigationItem(
page: Profile(),
icon: Icon(Icons.home),
title: Text("Home"),
),
];
}
home.dart
import 'package:flutter/material.dart';
import 'package:tabsdrawer/sidemenu/side_menu.dart';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideMenu(),
appBar: AppBar(
leading: Builder(
builder: (BuildContext context) {
return RotatedBox(
quarterTurns: 1,
child: IconButton(
icon: Icon(
Icons.bar_chart_rounded,
color: Colors.black,
),
onPressed: () => Scaffold.of(context).openDrawer(),
),
);
},
),
backgroundColor: Colors.white,
elevation: 0.0,
actions: [
IconButton(
color: Colors.black,
icon: Icon(Icons.search),
onPressed: () {
Navigator.pushNamed(context, '/search');
}),
],
),
body: Center(
child: Text('Home Page'),
),
);
}
}
I have wrote an article mentioning the whole solution in here,
https://medium.com/#prabhashibuddhima/flutter-how-to-make-flutter-side-drawer-side-menu-work-with-bottom-navigation-bar-bottom-tab-ce66a95e25fe
Related
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;
});
},
),
);
}
}
I am unable to remove header from web view flutter .Is there a way to remove header of webview website and apply app header to web view such that website header is removed and our app bar as a header is shown on app.
I want to add yellow underline on svg icon under bottom navigation bar and I am unable to add that please help me out .
Home page of my app
import 'dart:async';
import 'package:url_launcher/url_launcher.dart';
import 'dart:io';
/* import 'package:titled_navigation_bar/titled_navigation_bar.dart' ;*/
import 'package:flutter_svg/flutter_svg.dart';
/* import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; */
import 'package:webview_flutter/webview_flutter.dart';
/* import 'package:md2_tab_indicator/md2_tab_indicator.dart'; */
/*import 'package:flutter_inappwebview/flutter_inappwebview.dart'; */
main() {
runApp(MyApp());
}
// ignore: use_key_in_widget_constructors
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(home: SplashScreen()); // define it once at root level.
}
}
// ignore: use_key_in_widget_constructors
class SplashScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return SplashScreenState();
}
}
class SplashScreenState extends State<SplashScreen> {
#override
void initState() {
super.initState();
if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
Timer(
// ignore: prefer_const_constructors
Duration(seconds: 1),
() => Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => HomeScreen())));
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(child: Image.asset('assets/splash.jpeg')),
);
}
}
// ignore: use_key_in_widget_constructors
class HomeScreen extends StatefulWidget {
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<HomeScreen> {
final Completer<WebViewController> _controller =
Completer<WebViewController>();
num _stackToView = 1;
int _selectedTabIndex = 0;
// ignore: prefer_final_fields
List _pages = [
// ignore: prefer_const_constructors
Text("Home"),
// ignore: prefer_const_constructors
Text("Wishlist"),
// ignore: prefer_const_constructors
Text("Search"),
// ignore: prefer_const_constructors
Text("Bookings"),
// ignore: prefer_const_constructors
Text("Menu"),
Text("call"),
];
_changeIndex(int index) {
setState(() {
_selectedTabIndex = index;
});
}
void _handleLoad(String value) {
setState(() {
_stackToView = 0;
});
}
#override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
final colorScheme = Theme.of(context).colorScheme;
return Scaffold(
appBar: AppBar(
/* automaticallyImplyLeading: false, */
leading: Padding(
padding: EdgeInsets.all(10.0),
child: SvgPicture.asset("assets/svg/VW-logo.svg"),
/* leadingWidth: 35, */
),
actions: [
IconButton(
icon: SvgPicture.asset("assets/svg/new.svg", color: Colors.black),
onPressed: () {},
),
IconButton(
icon: SvgPicture.asset("assets/svg/Page-1.svg"),
onPressed: () {
_launchURL();
},
),
],
backgroundColor: Colors.white),
body:
/* const WebView(
initialUrl: 'https://www.google.com/',
javascriptMode: JavascriptMode.unrestricted,
), */
/* Center(child: _pages[_selectedTabIndex]), */
IndexedStack(
index: _selectedTabIndex,
children: [
Column(
children: <Widget>[
Expanded(
child: WebView(
initialUrl: "https://www.veenaworld.com/",
javascriptMode: JavascriptMode.unrestricted,
onPageFinished: _handleLoad,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
)),
],
),
Container(
child: Center(child: _pages[_selectedTabIndex]),
),
],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedTabIndex,
onTap: _changeIndex,
type: BottomNavigationBarType.fixed,
/* backgroundColor: Colors.blue.shade900, */
selectedLabelStyle: textTheme.caption,
unselectedLabelStyle: textTheme.caption,
/* Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.black),
),
),
), */
selectedItemColor: Colors.black,
unselectedItemColor: Colors.black.withOpacity(.60),
items: [
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/svg/home-alt2.svg",
color: Colors.black),
title: Text("Home")),
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/svg/favourite.svg",
color: Colors.black),
title: Text("Wishlist")),
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/svg/search.svg",
color: Colors.black),
title: Text("Search")),
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/svg/bag.svg", color: Colors.black),
title: Text("Bookings")),
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/svg/hamburger.svg",
color: Colors.black),
title: Text("Menu"))
],
),
);
}
}
_launchURL() async {
const url = 'https://www.google.com/';
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
For Manipulating the WebView I think there is no way for doing that, maybe you can use a trick like a stack for hiding WebView appbar like below:
#override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
final colorScheme = Theme.of(context).colorScheme;
return Scaffold(
// appBar: AppBar(
// /* automaticallyImplyLeading: false, */
// leading: Padding(
// padding: EdgeInsets.all(10.0),
// child: SvgPicture.asset("assets/images/Helmet.svg"),
//
// /* leadingWidth: 35, */
// ),
// actions: [
// IconButton(
// icon: SvgPicture.asset("assets/images/Helmet.svg",
// color: Colors.black),
// onPressed: () {},
// ),
// ],
// backgroundColor: Colors.white),
body: Stack(
children: [
IndexedStack(
index: _selectedTabIndex,
children: [
Column(
children: <Widget>[
Expanded(
child: WebView(
initialUrl: "https://www.veenaworld.com/",
javascriptMode: JavascriptMode.unrestricted,
onPageFinished: _handleLoad,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
)),
],
),
Container(
child: Center(child: _pages[_selectedTabIndex]),
),
],
),
AppBar(
/* automaticallyImplyLeading: false, */
leading: Padding(
padding: EdgeInsets.all(10.0),
child: SvgPicture.asset("assets/images/Helmet.svg"),
/* leadingWidth: 35, */
),
actions: [
IconButton(
icon: SvgPicture.asset("assets/images/Helmet.svg",
color: Colors.black),
onPressed: () {},
),
],
backgroundColor: Colors.white,
),
],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedTabIndex,
onTap: _changeIndex,
type: BottomNavigationBarType.fixed,
/* backgroundColor: Colors.blue.shade900, */
selectedLabelStyle: textTheme.caption,
unselectedLabelStyle: textTheme.caption,
/* Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(width: 1.0, color: Colors.black),
),
),
), */
selectedItemColor: Colors.black,
unselectedItemColor: Colors.black.withOpacity(.60),
items: [
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/images/Helmet.svg",
color: Colors.black),
title: Text("Home")),
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/images/Helmet.svg",
color: Colors.black),
title: Text("Wishlist")),
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/images/Helmet.svg",
color: Colors.black),
title: Text("Search")),
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/images/Helmet.svg",
color: Colors.black),
title: Text("Bookings")),
BottomNavigationBarItem(
icon: SvgPicture.asset("assets/images/Helmet.svg",
color: Colors.black),
title: Text("Menu"))
],
),
);
}
This parent Bottom Navigation bar
import 'package:flutter/material.dart';
class BottomNavigation extends StatefulWidget {
BottomNavigation({
Key? key,
}) : super(key: key);
#override
_BottomNavigationState createState() => _BottomNavigationState();
}
class _BottomNavigationState extends State<OARBottomNavigation> {
int _selectedIndex = 0;
List<Widget> _widgetOptions = [
Screen1(),
Screen2(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: SideDrawer(),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.assignment_turned_in),
label: 'Screen 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.people),
label: 'Screen 2',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
body: Scaffold(
body: _widgetOptions.elementAt(_selectedIndex),
),
);
}
}
Now on Screen 1 I want to open the Drawer().
import 'package:flutter/material.dart';
class Screen1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Screen 1 Title'),
),
body: Container(
child: Text('This is Screen 1'),
),
),
);
}
}
How can I open the Drawer from Screen 1?
Please check the following code. There are BottomNavigationBar and Drawer(top of the BottomNavigationBar)
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: Container(
color: Colors.red,
child: ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: InkWell(
onTap: () {},
child: Text(
index.toString(),
),
),
);
},
itemCount: 3,
),
),
),
bottomNavigationBar: BottomNavigationBar(items: [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Settings"),
]),
);
Better use:
Scaffold.of(context).openDrawer();
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'),
)
],
),
);
}
}
I'm new to flutter and am building my first app. I have a small app with maybe 4 pages, there is a bottom bar which has icons on it. Some icons call functions such as copy text (which does not need its own page but is a function to be called) while others are complex and call a new page using Navigator.push().
I tried to achieve this using a custom Row() widget on each page, but it became very odd and I was rewriting a lot of functions. I felt there had to be a bottom menu bar, but couldn't find one.
I found BottomNavigationBar and was excited that it would achieve what I wanted. But I don't think its meant to be used as a menu, but rather as the name implies, a navigation bar.
I also want the navigation bar to change menu icons as it moves to a new page. The tutorial I am following uses it as follows:
class _HomeState extends State<Home> {
int _currentIndex = 0;
final List<Widget> _children = [
PlaceholderWidget(Colors.white),
PlaceholderWidget(Colors.deepOrange),
PlaceholderWidget(Colors.green)
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Bottem Navi '),
),
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Search'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('Profile')
)
],
),
);
}
The body: is changed based on the index selected. Can this be repurposed to act as a menu? to make use of Navigator.push or is my previous method of having a Row() widget on each page the best option?
You can copy paste run full code below
You can use BottomAppBar
code snippet
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
},
),
Builder(
builder: (context) => IconButton(
icon: Icon(Icons.title),
onPressed: () {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('Show Snackbar'),
duration: Duration(seconds: 3),
));
},
)),
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Tasks - Bottom App Bar')),
body: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
},
),
Builder(
builder: (context) => IconButton(
icon: Icon(Icons.title),
onPressed: () {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('Show Snackbar'),
duration: Duration(seconds: 3),
));
},
)),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.sync),
onPressed: () {},
),
],
),
),
);
}
}
class SecondRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}