sooxt98 / google_nav_bar Goto Github PK
View Code? Open in Web Editor NEWA modern google style nav bar for flutter.
License: MIT License
A modern google style nav bar for flutter.
License: MIT License
Can there be an option to switch between tabs when swiping on the screen widget?
swipe left to right to shift to other tab
Hey @sooxt98
Thanks for awesome package. Just want to point you out that in latest Flutter's master brunch there is no "overflow" parameter (that you use in your nav bar), so you will have to migrate to make it work on most recent Flutter version. Here is migration guide from Google:
https://docs.google.com/document/d/1gC5Di4ykTCqupD77PWpy9D8xXo0Ide5CnrH0zzVIhKo/edit#heading=h.qxzs91rbt759
Also attaching Issue from Flutter repo:
flutter/flutter#66030
Thanks in advance!
Unable to add 6 tabs, Gives RenderFlex overflow at right side.
Please suggest so that the space between the tabs can be decreased and 6 tabs can be added easily.
Firstly, very nice widget, I'll be trying it in my app.
Could you please add badges support for the icon.
Maybe instead of passing the icon, pass a widget, which then I can control how it looks like.
Also do that for text, for more granular control of style.
What do you think?
Is it possible to use custom icons from assets ?
Hi, I really like your lib and the amount of customization.
I have a PageView as a body and use your package as a bottom navigation bar.
I have 3 pages, when I go from 1 -> 3 then the 2nd one also gets highlighted on the navigation bar, which doesn't look very nice.
Would it be possible to fix it or add a new param?
Let me know if you need a gif, but I guess the description is clear.
If you are busy maybe I will be able to fix it and add PR, let me know your thoughts.
I'm using a dark theme, but it doesn't look like google_nav_bar supports that? Is it possible to pull the Theme data for defaults?
Thanks for your time!
showing the icon on the right and the title on the left make the transition looks weird really , any solution to reverse the the transition direction ?
I have a big grey box which appear less than one second when switching between page, in release mode or in profile mode.
In profile I was able to get this message error :
Another exception was thrown: Instance of 'ft'
or
uid=10419(com.***) 1.ui identical 23 lines
Is there anyway to use a gradient color as backgroundcolor for the Gbuttons?
I not sure if I'm doing this right but on the home page I am navigating to a new page with Navigator.push() but the nav bar disappears. How would I go about keeping the navbar when navigating to other pages?
We have a feature request to have an opacity transition on the text with its own curve and duration. Is this a feature you would consider adding?
Hi,
I use your bar. It's very nice and simple to use :) Great Work.
When I use CupertinoIcons
the icons will be shown double / strechted as seen in the screenshot.
e.g. GButton( icon: CupertinoIcons.home, text: 'Home', ),
normal Icons work like as expected.
e.g. GButton( icon: Icons.ac_unit, text: 'Home', ),
Maybe you have a solution for that. Thanks
Hi,
I am new on Flutter, your package is amazing.
How to insert widget to Container on different page index 0,1,2,3 with your package.
Thanks
M. Effendi
We can refactor GButton.icon to be a Widget
and apply the icon settings as an IconTheme
. This matches the semantics of other material widgets, and in our case, allows us to put a dynamic icon widget in GNav.
Is this a PR you would accept?
In tabbarview as user slides the screen slowly we can see the change at same rate in the tabs , I want to achieve same result with google_nav_bar any suggestions please .
When The Display Size and Font Size are Large then it Shows pixel overflowed.
I think this library is really sleek, but I would like to see something like Badges having first-class support in this navigation bar. Are there any plans to add this? If not, I can look into this!
GButton takes IconData as an icon! Is there any way to add svgPicture as an icon?
Hi,
so I am finding an issue in which when preasing navigation from the home page the bottom navigation bar won't desapare and I can't figure out why.
My code:
import` 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:hopeapp/screens/give_page.dart';
import 'package:hopeapp/screens/home_screen.dart';
import 'package:hopeapp/screens/morepage.dart';
import 'package:flutter/services.dart';
void main() => runApp(
new MaterialApp(
darkTheme: ThemeData.light(),
home: MyApp(),
),
);
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return MyAppState();
}
}
class MyAppState extends State<MyApp> {
int _selectedPage = 0;
final _pageOptions = [
HomeScreenTabBar(),
GivePage(),
MorePage(),
];
@override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.grey[900],
statusBarIconBrightness: Brightness.light, // not working
statusBarBrightness: Brightness.dark,
// works
));
return MaterialApp(
title: 'Hope and Anchor App',
theme: ThemeData(
primarySwatch: Colors.yellow,
primaryColor: Colors.yellow,
brightness: Brightness.dark,
accentColor: Colors.yellow,
),
home: Scaffold(
body: Center(
child: _pageOptions.elementAt(_selectedPage),
),
bottomNavigationBar: Container(
decoration: BoxDecoration(color: Colors.grey[900], boxShadow: [
BoxShadow(blurRadius: 20, color: Colors.black.withOpacity(0.0))
]),
child: SafeArea(
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10),
child: GNav(
gap: 1,
activeColor: Colors.yellow,
iconSize: 24,
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 8),
duration: Duration(milliseconds: 800),
tabBackgroundColor: Colors.black,
tabs: [
GButton(
icon: Icons.video_library,
iconColor: Colors.grey[500],
text: 'Home',
),
GButton(
icon: Icons.favorite_border,
iconColor: Colors.grey[500],
text: 'Give',
),
GButton(
icon: Icons.menu_rounded,
iconColor: Colors.grey[500],
text: 'More',
),
],
selectedIndex: _selectedPage,
onTabChange: (int index) {
setState(() {
_selectedPage = index;
});
}),
),
),
),
backgroundColor: Colors.grey[900],
),
);
}
}
Hi, first of all I really like this widget, however I doesn't use it as a bottom navigation bar, but as an appbar, I have a problem for GButton the onPressed function doesn't do anything
Hi, first of all thank you very much for this great library. It is really the best flutter navigation bar I found so far.
After upgrading to version 4 today it looks like there is a regression with the animation when a custom curve is used, unfortunately. It is not so easy describe - maybe you just look at it yourself. I used the following values on GNav:
GNav(mainAxisAlignment: MainAxisAlignment.spaceAround,
curve: Curves.easeOutExpo,
duration: const Duration(milliseconds: 600),
)
This looks very smooth on version 3. After upgrading to version 4 the animation with the exact same values looks a bit harsh.
By removing the curve parameter completely from the widget it looks a lot better. So it is working fine when no custom curve is specified.
This has not high priority of course - just wanted to let you know :-)
why there is no swip animation whene you switching between Pages tabs
like in your Example !
In mainlite, advanced and gallery GNav is not given as the bottomNavBar property of Scaffold but instead as a child of the body parameter. Is this the recommended way or am I missing something?
Is there any plans to add null safety support?
you show this in the docs:
dependencies:
google_nav_bar: ^2.1.0
it should be this:
dependencies:
google_nav_bar: ^2.0.1
I think the touch area for icon is small. Only when you precisely touch icon then only it receives touch. Can we have something with which we can increase. touch area for icons? Its little inconvinient to change tabs
when I try to add borderRadius in Gbutton I got this error:
type 'BorderRadius' is not a subtype of type 'bool'
Is there a way to use label text only without icon?
First off, nice plugin! Been using it in some of my flutter apps
Is there anyway to add border color in GButtons?
is there any solution for RTL support?
E/flutter (21944): [ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: setState() called after dispose(): _GNavState#81aa2(lifecycle state: defunct, not mounted)
E/flutter (21944): This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback.
E/flutter (21944): The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
E/flutter (21944): This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().
Hey @sooxt98!
Writing to you again! Thank you for the great package, but could you add some semantics? Because at the moment GButton doesn't allow us to add any tooltip or semantic tag, so Accessibility Checker or any other semantic analysis SW will not recognize the meaning of this button... Semantics are articularly helpful for people with visual impairments but are also great for testing. A Tooltip would be perfect, but the semanticLabel property should be okay too.
Thanks!
do you have red dots number , for example , you have 3+ message in tabs
[VERBOSE-2:ui_dart_state.cc(199)] Unhandled Exception: setState() called after dispose(): _GNavState#175e8(lifecycle state: defunct, not mounted)
This error happens if you call setState() on a State object for a widget that no longer appears in the widget tree (e.g., whose parent widget no longer includes the widget in its build). This error can occur when code calls setState() from a timer or an animation callback.
The preferred solution is to cancel the timer or stop listening to the animation in the dispose() callback. Another solution is to check the "mounted" property of this object before calling setState() to ensure the object is still in the tree.
This error might indicate a memory leak if setState() is being called because another object is retaining a reference to this State object after it has been removed from the tree. To avoid memory leaks, consider breaking the reference to this object during dispose().
@Ascenio Did you know why it's not compatible with Flutter 1.22.6?
Passing key
property to the GButton
does nothing. The widget does not contain the passed key. This is required for performing tests using flutter driver.
hello everyone,
I use the google_nav_bar package, it is good and very nice.
but when I convert the direction of the app to (right to left) the text is making an error.
like the photo below:
https://i.ibb.co/D183V9b/20200713-170022.jpg
how can I solve that ??
and I am sorry because my English is not very good
When I set the tabBorderRadius to 8 the ripple stays rounded as if its 15. This causes it to look odd and I can't seem to change it.
Code:
Container( child: GNav( mainAxisAlignment: MainAxisAlignment.spaceAround, backgroundColor: Color(0xFF279B40), tabBackgroundGradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [Color(0xFF7FCC27), Color(0xFF279B40)]), rippleColor: Color(0xFF7FCC27), hoverColor: Color(0xFF7FCC27), tabBorderRadius: 8, tabBorder: Border.all(color: Colors.white, width: 1), duration: Duration(milliseconds: 300), gap: 8, color: Colors.white, activeColor: Colors.white, curve: Curves.easeIn, iconSize: 24, padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5), tabs: [ GButton( icon: Icons.notifications, text: 'Notifications', ), GButton( icon: Icons.home, text: 'Dashboard', ), ], selectedIndex: this.activeIndex, onTabChange: (index) => onTap(index), ), );
there is no barHeight parameter inside constructor and if it is wrapped with SizedBox , bar becomes completely unusable, only way to change the height is iconsize.I should have been able to change the bar height and iconsize distinctly.
Previously on 4.0.2, if I called setState()
on a value passed to GNav
, it would also animate the tab to the new index. This no longer works with 5.0.1.
A quick example where I use a PageController
listener to update _index
:
int _index;
@override
void initState() {
_index = widget.pageController?.initialPage ?? 0;
widget.pageController?.addListener(_pageControllerListener);
super.initState();
}
@override
void dispose() {
widget.pageController?.removeListener(_pageControllerListener);
super.dispose();
}
void _pageControllerListener() {
setState(() => _index = widget.pageController.page.round());
}
@override
Widget build(BuildContext context) => GNav(
selectedIndex: _index,
... // Additional GNav parameters
);
The initially selected index is correct, but just does not update unless you tap on the GButton
in the navigation bar.
How to reproduce issue:
Restarted application in 1,715ms.
�[38;5;248m════════ Exception caught by rendering library ═════════════════════════════════�[39;49m
�[38;5;244mThe following assertion was thrown during layout:�[39;49m
A RenderFlex overflowed by 1.2 pixels on the right.
�[38;5;244mThe relevant error-causing widget was�[39;49m
�[38;5;248mGNav�[39;49m
�[38;5;244mThe overflowing RenderFlex has an orientation of Axis.horizontal.�[39;49m
�[38;5;244mThe edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.�[39;49m
�[38;5;248mConsider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.�[39;49m
�[38;5;248mThis is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.�[39;49m
�[38;5;244mThe specific RenderFlex in question is: RenderFlex#5e52c relayoutBoundary=up5 OVERFLOWING�[39;49m
�[38;5;248m════════════════════════════════════════════════════════════════════════════════�[39;49m
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.