Im new to flutter and I follow youtube and got this bottom navigators. Is there anyway how should I change it become tabitems ?
I have search alot of tabitems but I dun know how to convert it .
Will be happy if someone solved my problem! Will be happy if someone solved my problem! Will be happy if someone solved my problem! Will be happy if someone solved my problem!
class BottomNavigationEzyMember extends StatefulWidget {
const BottomNavigationEzyMember({Key key}) : super(key: key);
@override
_BottomNavigationEzyMemberState createState() =>
_BottomNavigationEzyMemberState();
}
class _BottomNavigationEzyMemberState extends State<BottomNavigationEzyMember> {
int _selectedIndex = 0;
var bottomTextStyle =
GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w500);
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Container(
height: 64,
decoration: BoxDecoration(
color: mFillColor,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 2,
blurRadius: 15,
offset: const Offset(0, 5),
)
],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(24),
topRight: Radius.circular(24),
),
),
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _selectedIndex == 0
? SvgPicture.asset('assets/icons/home_colored.svg')
: SvgPicture.asset('assets/icons/home.svg'),
title: Text('Home', style: bottomTextStyle),
),
BottomNavigationBarItem(
icon: _selectedIndex == 1
? SvgPicture.asset('assets/icons/order_colored.svg')
: SvgPicture.asset('assets/icons/order.svg'),
title: Text(
'My Card',
style: bottomTextStyle,
),
),
BottomNavigationBarItem(
icon: _selectedIndex == 2
? SvgPicture.asset('assets/icons/watch_colored.svg')
: SvgPicture.asset('assets/icons/watch.svg'),
title: Text(
'Watch List',
style: bottomTextStyle,
),
),
BottomNavigationBarItem(
icon: _selectedIndex == 3
? SvgPicture.asset('assets/icons/account_colored.svg')
: SvgPicture.asset('assets/icons/account.svg'),
title: Text(
'Account',
style: bottomTextStyle,
),
),
],
currentIndex: _selectedIndex,
selectedItemColor: mBlueColor,
unselectedItemColor: mSubtitleColor,
onTap: _onItemTapped,
backgroundColor: Colors.transparent,
type: BottomNavigationBarType.fixed,
selectedFontSize: 12,
showUnselectedLabels: true,
elevation: 0,
),
);
}
}
CodePudding user response：
not really sure if I understood you, but it seems you need this
class BottomNavigationEzyMember extends StatefulWidget {
const BottomNavigationEzyMember({Key key}) : super(key: key);
@override
_BottomNavigationEzyMemberState createState() =>
_BottomNavigationEzyMemberState();
}
class _BottomNavigationEzyMemberState extends State<BottomNavigationEzyMember> {
int _selectedIndex = 0;
var bottomTextStyle =
GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w500);
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: _getBody(),
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: _selectedIndex == 0
? SvgPicture.asset('assets/icons/home_colored.svg')
: SvgPicture.asset('assets/icons/home.svg'),
title: Text('Home', style: bottomTextStyle),
),
BottomNavigationBarItem(
icon: _selectedIndex == 1
? SvgPicture.asset('assets/icons/order_colored.svg')
: SvgPicture.asset('assets/icons/order.svg'),
title: Text(
'My Card',
style: bottomTextStyle,
),
),
BottomNavigationBarItem(
icon: _selectedIndex == 2
? SvgPicture.asset('assets/icons/watch_colored.svg')
: SvgPicture.asset('assets/icons/watch.svg'),
title: Text(
'Watch List',
style: bottomTextStyle,
),
),
BottomNavigationBarItem(
icon: _selectedIndex == 3
? SvgPicture.asset('assets/icons/account_colored.svg')
: SvgPicture.asset('assets/icons/account.svg'),
title: Text(
'Account',
style: bottomTextStyle,
),
),
],
currentIndex: _selectedIndex,
selectedItemColor: mBlueColor,
unselectedItemColor: mSubtitleColor,
onTap: _onItemTapped,
backgroundColor: Colors.transparent,
type: BottomNavigationBarType.fixed,
selectedFontSize: 12,
showUnselectedLabels: true,
elevation: 0,
),
);
}
Widget _getBody( ) {
if(selectedIndex == 0) {
return Text('first');
} else if(selectedIndex == 1) {
return Text('second');
} else if(selectedIndex == 2) {
return Text('third');
} else if(selectedIndex == 3) {
return Text('last screen');
} else {
return Text('not in index');
}
}
}
I advise you to use the documentation, not videos on youtube, look to flutter official code sample https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html#material.BottomNavigationBar.1
CodePudding user response：
I think you searching this. Using this code you can appear bottom navigation bar to your all screens
int _selectedIndex = 0;
final _homeScreen = GlobalKey<NavigatorState>();
final _accountScreen = GlobalKey<NavigatorState>();
final _profileScreen = GlobalKey<NavigatorState>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: <Widget>[
Navigator(
key: _homeScreen,
onGenerateRoute: (route) => MaterialPageRoute(
settings: route,
builder: (context) => Home(),
),
),
Navigator(
key: _accountScreen,
onGenerateRoute: (route) => MaterialPageRoute(
settings: route,
builder: (context) => Account(),
),
),
Navigator(
key: _profileScreen,
onGenerateRoute: (route) => MaterialPageRoute(
settings: route,
builder: (context) => Profile(),
),
),
],
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.white,
splashColor: Color(0xffFFED31),
unselectedWidgetColor: Colors.white,
primaryColor: Color(0xffFFED31),
backgroundColor: Color(0xff3A3A3A),
textTheme: Theme.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.white))),
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Container(
height: 20.0,
width: 20.0,
child: _selectedIndex == 0
? SvgPicture.asset("assets/images/home.svg",
color: Color(0xffFFED31), semanticsLabel: 'home')
: SvgPicture.asset(AppConfig.classes,
color: Colors.white, semanticsLabel: 'home')),
title: Text(
'Home',
style: TextStyle(fontSize: 10),
),
),
BottomNavigationBarItem(
icon: Container(
height: 20.0,
width: 20.0,
child: _selectedIndex == 1
? SvgPicture.asset("assets/images/account.svg",
color: Color(0xffFFED31), semanticsLabel: 'schedule')
: SvgPicture.asset(AppConfig.schedule,
color: Colors.white, semanticsLabel: 'schedule')),
title: Text(
'Account',
style: TextStyle(fontSize: 10),
),
),
BottomNavigationBarItem(
icon: Container(
height: 20.0,
width: 20.0,
child: _selectedIndex == 2
? SvgPicture.asset("assets/images/profile.svg",
color: Color(0xffFFED31), semanticsLabel: 'profile')
: SvgPicture.asset(AppConfig.storeIcon,
color: Colors.white, semanticsLabel: 'profile')),
title: Text(
'Profile',
style: TextStyle(fontSize: 10),
),
),
],
currentIndex: _selectedIndex,
onTap: (val) => _onTap(val, context),
type: BottomNavigationBarType.fixed,
backgroundColor: Color(0xff3A3A3A),
selectedLabelStyle: TextStyle(fontSize: 10, color: Color(0xffFFED31)),
unselectedLabelStyle:
TextStyle(fontSize: 10, color: Color(0xffFFFFFF)),
),
),
);
}
void _onTap(int val, BuildContext context) {
if (_selectedIndex == val) {
switch (val) {
case 0:
_homeScreen.currentState.popUntil((route) => route.isFirst);
break;
case 1:
_accountScreen.currentState.popUntil((route) => route.isFirst);
break;
case 2:
_profileScreen.currentState.popUntil((route) => route.isFirst);
break;
default:
}
} else {
if (mounted) {
setState(() {
_selectedIndex = val;
});
}
}
}
Navigate like this if you want bottom navigation bar appear to next screen
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext c) => NextScreen()));
Navigate like this if you want bottom navigation bar doesn't appear to next screen
Navigator.of(context, rootNavigator: true).push(MaterialPageRoute(
builder: (BuildContext c) => NextScreen()));