rafalbednarczuk / curved_navigation_bar Goto Github PK
View Code? Open in Web Editor NEWAnimated Curved Navigation Bar in Flutter
License: BSD 2-Clause "Simplified" License
Animated Curved Navigation Bar in Flutter
License: BSD 2-Clause "Simplified" License
it's already looking very awesome but if we can assign a transparent background color for floating button then looks more beautiful in some cases. please implement transparent background color for floating button if it can be possible.
I have a proble when one of my pages are scrolleable, the effect of curved slide around turns white when i put this code bdw im new on flutter its posible turn transparent for the scrollview?:
Scaffold(
bottomNavigationBar: CurvedNavigationBar(
index: pageIndex,
height: 50.0,
items: <Widget>[
Icon(Icons.home, size: 30, color: Colors.greenAccent),
Icon(Icons.list, size: 30, color: Colors.greenAccent),
Icon(Icons.calendar_today, size: 30, color: Colors.greenAccent),
Icon(Icons.map, size: 30, color: Colors.greenAccent),
Icon(Icons.perm_identity, size: 30, color: Colors.greenAccent),
],
color: Colors.deepPurple,
buttonBackgroundColor: Colors.deepPurple,
backgroundColor: Colors.transparent,
animationCurve: Curves.bounceInOut,
animationDuration: Duration(milliseconds: 300),
// onTap para que navegue en las pestañas de buttonnavigatonBar
onTap: (int tappedIndex) {
setState(() {
_showPage = _pageChooser(tappedIndex);
});
},
),
can I use transparent?
I want to add padding to the icons in the navigation because i use custom icons that it is appear attached to the border of navigation
The nav_button.dart
file has an InkWell with a SplashColour. It doesnt look nice when you have a SizedBox of 100.0 and the bar of only 75.0
Could this SplashColour be removed? or possibly one of the following
NavButton
so it can be customized and used with the NavBarNavCustomPainter
(may look better when Splash is over and not hidden behindchild: InkWell(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
onTap(index);
},
child: Container(
https://github.com/rafalbednarczuk/curved_navigation_bar/blob/master/lib/src/nav_button.dart#L19
Great job, looks great!
I just tried the CurvedNavigationBar. I stuck with one question/problem: I use Pageview to show the content. When you swipe to another page, I want to change the selected bottombar also, but there is only a initialIndex. How can I change the selected bottombaritem afterwards?
sorry for this really basic question but im new to flutter and dont know how to add it to my project.
in first place for adding the dependencies i have this error : Error on line 14, column 3 of pubspec.yaml: A package may not list itself as a dependency.
second where to add that Scaffold(...)
and third i dont know how to use it in another project ...
i wish you guys can help me with comments or a link to a tutorial
thank you
这是一个Bug吗?
快速切换连续点击icon会多次弹起icon。。。
Hey! I have an intricate app and I have one particular page with a map API and I am trying to extend the screen and hide the curved nav bar for a better user experience. I was looking to link to this map api page and have the nav bar hidden.
I've tried different routes and states. any ideas?
requires SDK version >=2.1.0. Current version 2.1.0-dev
Got socket error trying to find package curved_navigation_bar at https://pub.dartlang.org.
You have to be very precise in tapping to trigger the gesture detector. Can there be a way to increase the tap surface?
I use this in a RTL app and it don't work right
If you try to run example directly show this error message:
Launching example/example.dart on Android SDK built for x86 in debug mode...
No application found for TargetPlatform.android_x86.
Is your project missing an android/AndroidManifest.xml?
Consider running "flutter create ." to create one.
Hi,
this plugin is very awesome.
There is a way to controle the height of CurvedNavigationBar?
In particular I have in the bottom too blank space and I would like reduce it a little bit.
Thanks
As we know there are two ways to navigate tabBarView. One is by clicking the tab handle and one is by swipping. With your package i am able to click on the icon to navigate. But how do i swipe to navigate while animating the curve navigation bar icons?
Please increase the surface area of the bottom bar navigation buttons. They are to small and easy too miss on clicks.
I have configured curved navigation bar. Ontap the tab is changing and and the content of next tab is visible.
but on swipe the content is changed but current tab is not changed.
`class Dashboard extends StatefulWidget {
@OverRide
_DashboardState createState() => _DashboardState();
}
class _DashboardState extends State {
final int _page = 1;
GlobalKey _bottomNavigationKey = GlobalKey();
final _pageController = PageController(initialPage: 1);
@OverRide
Widget build(BuildContext context) {
return Scaffold(
// backgroundColor: Colors.grey,
appBar: BaseAppBar(
elevation: 0.5,
appBar: AppBar(),
backgroundColor: Colors.white,
// title: ,
),
bottomNavigationBar: CurvedNavigationBar(
key: _bottomNavigationKey,
backgroundColor: Colors.white,
buttonBackgroundColor: Colors.blue[500],
color: Color.fromRGBO(206, 206, 206, 0.5),
index: _page,
items: [
Icon(Icons.terrain, size: 50, color: Colors.grey,),
Icon(Icons.perm_media, size: 50, color: Colors.grey,),
Icon(Icons.local_offer, size: 50, color: Colors.grey,),
Icon(Icons.account_circle, size: 50, color: Colors.grey, ),
],
onTap: (int index) {
setState(() {
_pageController.jumpToPage(index);
});
},
),
body: PageView(
controller: _pageController,
children: [
MoneyPlant(),
Adds(),
Discounts(),
Profile(),
],
onPageChanged: (int index) {
setState(() {
_pageController.jumpToPage(index);
});
}
),
);
}
`
InitialIndex is ignored because is hardcoded to 0.
This cause an incorrect icon in the case that you for example hide and show curved bar in different view.
initialIndex will be ignored and the current selected item take home icon.
If in curved_navigation_bar.dart you change line 19 from
this.initialIndex=0 to this.InitialIndex
and change the line 48 from
_icon = widget.items[0]; to _icon = widget.items[widget.initialIndex];
All works fine.
P.s. I would appreciate collaborate with you in this plugin if you want.
when i set four icon in navigation the animation movement will not work correctly and also when i click on icons. so how to solve this problem ?
but when i set item to 3 or 5 it will work correctly.
Hi,
is there the possibility to make it scrollable with a lot of items?
Thanks!
when i use ( supportedLocales: [const Locale("fa", "IR")],) for my MaterialApp the buttonNavigationBar misses up
i think initial index is not setup in init state that's why it is not set to passed index at initial stage(i try it by hot reload )
how to add overlay badges for notifications purposes
Any plan to create an android native version ? :P
I want to change the CurveNavigatiobar tab programmatically by another stateful widget.
it works but with the following logs
I make Globalkey instance global outside of the class(before the main function).
GlobalKey globalKey = new GlobalKey(debugLabel: 'app_bar_key');
void main() async {
Crashlytics.instance.enableInDevMode = true;
..........}
and calling this from other stateful widget's tree
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
final CurvedNavigationBarState nav = globalKey.currentState;
nav.setPage(0);
},
),```
> D/EGL_emulation(18997): eglMakeCurrent: 0x7824cd3f45e0: ver 3 0 (tinfo 0x7824af3234a0)
D/EGL_emulation(18997): eglMakeCurrent: 0x7824cd3f45e0: ver 3 0 (tinfo 0x7824af3234a0)
D/EGL_emulation(18997): eglMakeCurrent: 0x7824cd3f45e0: ver 3 0 (tinfo 0x7824af3234a0)
I/Choreographer(18997): Skipped 44 frames! The application may be doing too much work on its main thread.
D/EGL_emulation(18997): eglMakeCurrent: 0x7824cd3f45e0: ver 3 0 (tinfo 0x7824af3234a0)
════════ Exception Caught By widgets library ═══════════════════════════════════
The following assertion was thrown building MediaQuery(MediaQueryData(size: Size(411.4, 731.4), devicePixelRatio: 2.6, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding: EdgeInsets.zero, viewPadding: EdgeInsets.zero, viewInsets: EdgeInsets(0.0, 0.0, 0.0, 48.0), alwaysUse24HourFormat: false, accessibleNavigation: false, disableAnimations: false, invertColors: false, boldText: false)):
Multiple widgets used the same GlobalKey.
The key [GlobalKey#2bd5c app_bar_key] was used by multiple widgets. The parents of those widgets were different widgets that both had the following description:
MediaQuery(MediaQueryData(size: Size(411.4, 731.4), devicePixelRatio: 2.6, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding: EdgeInsets.zero, viewPadding: EdgeInsets.zero, viewInsets: EdgeInsets(0.0, 0.0, 0.0, 48.0), alwaysUse24HourFormat: false, accessibleNavigation: false, disableAnimations: false, invertColors: false, boldText: false))
A GlobalKey can only be specified on one widget at a time in the widget tree.
When the exception was thrown, this was the stack
#0 GlobalKey._debugReserveFor.<anonymous closure>
package:flutter/…/widgets/framework.dart:177
#1 GlobalKey._debugReserveFor
package:flutter/…/widgets/framework.dart:189
#2 Element.updateChild.<anonymous closure>
package:flutter/…/widgets/framework.dart:2858
#3 Element.updateChild
package:flutter/…/widgets/framework.dart:2861
#4 ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:3935
...
════════════════════════════════════════════════════════════════════════════════
════════ Exception Caught By widgets library ═══════════════════════════════════
The following assertion was thrown building MediaQuery(MediaQueryData(size: Size(411.4, 731.4), devicePixelRatio: 2.6, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding: EdgeInsets.zero, viewPadding: EdgeInsets.zero, viewInsets: EdgeInsets(0.0, 0.0, 0.0, 48.0), alwaysUse24HourFormat: false, accessibleNavigation: false, disableAnimations: false, invertColors: false, boldText: false)):
I wanted to go to a certain page from onPressed of a widget in the drawer how can i implement this?
Does it have fix option?
I'm using this package in a bottom bar. When an icon is selected its gesture detector is dragged down, so it's very diffucult to tap it again.
I would like to know if it's possible to maintain the gesture detector in the same position as the selected icon.
Would be nice to have the possibility to add a box shadow to the navbar in case i want to have both the background and the nav white
hi ...
I used it in the Arabic language ... which is RTL layout ... there is a problem ...
the problem is when I have 5 items ... and chose the centred item ... ok
but when I chose second items which its index = 1 ... it animated to the mirror position just like I chose the item 4 which it's index = 3 .... also the first item (index = 0) looks like I choose item 5 (index 4)...
bottomNavigationBar: CurvedNavigationBar( index: _page, height: 55.0, items: <Widget>[ Icon(Icons.info, size: 25,color: Colors.white,), Icon(FontAwesomeIcons.hashtag, size: 22,color: Colors.white,), Icon(FontAwesomeIcons.briefcaseMedical, size: 20,color: Colors.white,), Icon(FontAwesomeIcons.solidMoon, size: 20,color: Colors.white,), Icon(Icons.account_circle, size: 25,color: Colors.white,), ], color: Colors.cyan, buttonBackgroundColor: Colors.pink, backgroundColor: Colors.white, animationCurve: Curves.easeInOut, animationDuration: Duration(milliseconds: 200), onTap: (index) { setState(() { _page = index; }); }, )
Best Regards
I am getting curved_navigation_bar/example: no pubspec.yaml found
error.
I searched on net but didn't find any solution:
https://stackoverflow.com/questions/49786432/how-do-i-fix-no-pubspec-yaml-file-found-in-flutter
Every page I switch is a brand new CupertinoPageScaffold, how to integrate with this widget?
On application start the initial index is showing the wrong icon.
I set the initial index to 2 but it shows the icon from index 0
First of all I'd like to thank you for the amazing job you've done. I was playing with it these days and I realised that we could add much more life if we could set a gradient to the colors of the navigation bar.
使用后发现buttonBackgroundColor会挡住body里的widget
Hi
when i add SafeArea Widget before CurvedNavigationBar the icon appear out of navigation bar and above the safe area bar in iphone xr this appear only when i click icons , i think should prevent icon across the navigation and don't appear outside during transition between icons.... so how to solve this problem.
thank you
Hello, on the point, its a great work. but can i ask u about how to add a text below the icons? i try to wrap it in a column, its work but the text is also pop up when the icon pressed, so the text is overflow the button button. How to make the text is stay at the navbar? Thanks and sorry for my bad english
How to change the widget curve? Leaving her longer or deeper?
Where is the problem i cant figure out
here is my code and doctor -v
''curved_navigation_bar: ^0.2.11''
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
bottomNavigationBar: CurvedNavigationBar(
index: 0,
height: 45.0,
items: <Widget>[
Icon(Icons.local_activity, size: 30),
Icon(Icons.calendar_today, size: 30),
Icon(Icons.compare_arrows, size: 30),
Icon(Icons.settings, size: 30),
],
color: Colors.white,
buttonBackgroundColor: Colors.white,
backgroundColor: Colors.transparent,
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 600),
onTap: (index) => setState(() {
currentIndex = index;
}),
),
body: _getPage(currentIndex),
);
}
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Linux, locale tr_TR.utf8)
• Flutter version 1.5.4-hotfix.2 at /home/von/Masaüstü/flutter
• Framework revision 7a4c33425d (5 weeks ago), 2019-04-29 11:05:24 -0700
• Engine revision 52c7a1e849
• Dart version 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
• Android SDK at /home/von/Android/Sdk
• Android NDK location not configured (optional; useful for native profiling
support)
• Platform android-28, build-tools 28.0.3
• Java binary at: /home/von/Masaüstü/android-studio/jre/bin/java
• Java version OpenJDK Runtime Environment (build
1.8.0_152-release-1343-b16-5323222)
• All Android licenses accepted.
[✓] Android Studio (version 3.4)
• Android Studio at /home/von/Masaüstü/android-studio
• Flutter plugin version 35.3.1
• Dart plugin version 183.6270
• Java version OpenJDK Runtime Environment (build
1.8.0_152-release-1343-b16-5323222)
[✓] Connected device (1 available)
• ASUS X008D • H1AXGY063270GZ8 • android-arm64 • Android 7.0 (API 24)
• No issues found!
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.