Issue
I wanted to add a notification badge to my gnav bar, like in the picture below. I didn't find any documentation about the navigation bar from Google, so I don't know how to do it. The programming language is Dart and I work with Flutter in Android Studio.
This is my code:
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
color: Colors.black,
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: const GNav(
backgroundColor: Colors.fromARGB(255, 0, 0, 0),
color: Color.fromARGB(255, 203, 203, 203),
activeColor: Color.fromARGB(255, 255, 255, 255),
tabBackgroundColor: Color.fromARGB(55, 255, 255, 255),
gap: 8,
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
tabs: [
GButton(
icon: Icons.forum,
text: 'Forum',
),
GButton(
icon: Icons.home,
text: 'Home',
),
GButton(
icon: Icons.calendar_month,
text: 'Search',
),
],
),
),
);
}
}
Solution
Here is an example how to apply it (source: https://github.com/sooxt98/google_nav_bar/blob/master/example/lib/main_advance.dart)
import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:line_icons/line_icons.dart';
import 'package:badges/badges.dart';
void main() => runApp(TabPage());
class TabPage extends StatefulWidget {
@override
_TabPageState createState() => _TabPageState();
}
class _TabPageState extends State<TabPage> {
int selectedIndex = 0;
int badge = 0;
final padding = EdgeInsets.symmetric(horizontal: 18, vertical: 12);
double gap = 10;
PageController controller = PageController();
List<Color> colors = [
Colors.purple,
Colors.pink,
Colors.amber[600]!,
Colors.teal
];
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
extendBody: true,
appBar: AppBar(
brightness: Brightness.light,
title: Text(
'GoogleNavBar',
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.white,
),
body: PageView.builder(
onPageChanged: (page) {
setState(() {
selectedIndex = page;
badge = badge + 1;
});
},
controller: controller,
itemBuilder: (context, position) {
return Container(
color: colors[position],
);
},
itemCount: 4,
),
bottomNavigationBar: SafeArea(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(100)),
boxShadow: [
BoxShadow(
spreadRadius: -10,
blurRadius: 60,
color: Colors.black.withOpacity(.4),
offset: Offset(0, 25),
)
],
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 3.0, vertical: 3),
child: GNav(
tabs: [
GButton(
gap: gap,
iconActiveColor: Colors.purple,
iconColor: Colors.black,
textColor: Colors.purple,
backgroundColor: Colors.purple.withOpacity(.2),
iconSize: 24,
padding: padding,
icon: LineIcons.home,
text: 'Home',
),
GButton(
gap: gap,
iconActiveColor: Colors.pink,
iconColor: Colors.black,
textColor: Colors.pink,
backgroundColor: Colors.pink.withOpacity(.2),
iconSize: 24,
padding: padding,
icon: LineIcons.heart,
leading: selectedIndex == 1 || badge == 0
? null
: Badge(
badgeColor: Colors.red.shade100,
elevation: 0,
position: BadgePosition.topEnd(top: -12, end: -12),
badgeContent: Text(
badge.toString(),
style: TextStyle(color: Colors.red.shade900),
),
child: Icon(
LineIcons.heart,
color: selectedIndex == 1
? Colors.pink
: Colors.black,
),
),
),
GButton(
gap: gap,
iconActiveColor: Colors.amber[600],
iconColor: Colors.black,
textColor: Colors.amber[600],
backgroundColor: Colors.amber[600]!.withOpacity(.2),
iconSize: 24,
padding: padding,
icon: LineIcons.search,
text: 'Search',
),
GButton(
gap: gap,
iconActiveColor: Colors.teal,
iconColor: Colors.black,
textColor: Colors.teal,
backgroundColor: Colors.teal.withOpacity(.2),
iconSize: 24,
padding: padding,
icon: LineIcons.user,
leading: CircleAvatar(
radius: 12,
backgroundImage: NetworkImage(
'https://sooxt98.space/content/images/size/w100/2019/01/profile.png',
),
),
text: 'Sheldon',
)
],
selectedIndex: selectedIndex,
onTabChange: (index) {
setState(() {
selectedIndex = index;
});
controller.jumpToPage(index);
},
),
),
),
),
),
);
}
}
Answered By - Ozan Taskiran
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.