We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Using the package's example with minor modifications:
Expected results
The home indicator bar's background should resemble this gradient:
Actual results
The background of the home indicator has not changed to a gradient
Code sample
import 'dart:async'; import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart'; import 'package:auto_size_text/auto_size_text.dart'; import 'package:circular_reveal_animation/circular_reveal_animation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:lanarsnavbarflutter/theme/app_theme.dart'; import 'package:lanarsnavbarflutter/theme/custom_colors_theme.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: AppTheme.get(isLight: true), darkTheme: AppTheme.get(isLight: false), home: MyHomePage(title: 'Animated Navigation Bottom Bar'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key? key, required this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin { final autoSizeGroup = AutoSizeGroup(); var _bottomNavIndex = 0; //default index of a first screen late AnimationController _fabAnimationController; late AnimationController _borderRadiusAnimationController; late Animation<double> fabAnimation; late Animation<double> borderRadiusAnimation; late CurvedAnimation fabCurve; late CurvedAnimation borderRadiusCurve; late AnimationController _hideBottomBarAnimationController; final iconList = <IconData>[ Icons.brightness_5, Icons.brightness_4, Icons.brightness_6, Icons.brightness_7, ]; @override void initState() { super.initState(); _fabAnimationController = AnimationController( duration: Duration(milliseconds: 500), vsync: this, ); _borderRadiusAnimationController = AnimationController( duration: Duration(milliseconds: 500), vsync: this, ); fabCurve = CurvedAnimation( parent: _fabAnimationController, curve: Interval(0.5, 1.0, curve: Curves.fastOutSlowIn), ); borderRadiusCurve = CurvedAnimation( parent: _borderRadiusAnimationController, curve: Interval(0.5, 1.0, curve: Curves.fastOutSlowIn), ); fabAnimation = Tween<double>(begin: 0, end: 1).animate(fabCurve); borderRadiusAnimation = Tween<double>(begin: 0, end: 1).animate( borderRadiusCurve, ); _hideBottomBarAnimationController = AnimationController( duration: Duration(milliseconds: 200), vsync: this, ); Future.delayed( Duration(seconds: 1), () => _fabAnimationController.forward(), ); Future.delayed( Duration(seconds: 1), () => _borderRadiusAnimationController.forward(), ); } bool onScrollNotification(ScrollNotification notification) { if (notification is UserScrollNotification && notification.metrics.axis == Axis.vertical) { switch (notification.direction) { case ScrollDirection.forward: _hideBottomBarAnimationController.reverse(); _fabAnimationController.forward(from: 0); break; case ScrollDirection.reverse: _hideBottomBarAnimationController.forward(); _fabAnimationController.reverse(from: 1); break; case ScrollDirection.idle: break; } } return false; } @override Widget build(BuildContext context) { final colors = Theme.of(context).extension<CustomColorsTheme>()!; return Scaffold( extendBody: true, appBar: AppBar( title: Text( widget.title, style: TextStyle(color: Colors.white), ), ), body: NotificationListener<ScrollNotification>( onNotification: onScrollNotification, child: NavigationScreen(iconList[_bottomNavIndex]), ), floatingActionButton: FloatingActionButton( child: Icon( Icons.brightness_3, color: AppTheme.colorGray, ), onPressed: () { _fabAnimationController.reset(); _borderRadiusAnimationController.reset(); _borderRadiusAnimationController.forward(); _fabAnimationController.forward(); }, ), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, bottomNavigationBar: AnimatedBottomNavigationBar.builder( itemCount: iconList.length, tabBuilder: (int index, bool isActive) { final color = isActive ? colors.activeNavigationBarColor : colors.notActiveNavigationBarColor; return Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( iconList[index], size: 24, color: color, ), const SizedBox(height: 4), Padding( padding: const EdgeInsets.symmetric(horizontal: 8), child: AutoSizeText( "brightness $index", maxLines: 1, style: TextStyle(color: color), group: autoSizeGroup, ), ) ], ); }, // backgroundColor: Colors.blue, backgroundGradient: LinearGradient( colors: [Colors.redAccent, Colors.blue], begin: Alignment.topLeft, end: Alignment.bottomRight, ), activeIndex: _bottomNavIndex, splashColor: colors.activeNavigationBarColor, notchAndCornersAnimation: borderRadiusAnimation, splashSpeedInMilliseconds: 300, notchSmoothness: NotchSmoothness.defaultEdge, gapLocation: GapLocation.center, leftCornerRadius: 32, rightCornerRadius: 32, onTap: (index) => setState(() => _bottomNavIndex = index), hideAnimationController: _hideBottomBarAnimationController, shadow: BoxShadow( offset: Offset(0, 1), blurRadius: 12, spreadRadius: 0.5, color: colors.activeNavigationBarColor, ), ), ); } } class NavigationScreen extends StatefulWidget { final IconData iconData; NavigationScreen(this.iconData) : super(); @override _NavigationScreenState createState() => _NavigationScreenState(); } class _NavigationScreenState extends State<NavigationScreen> with TickerProviderStateMixin { late AnimationController _controller; late Animation<double> animation; @override void didUpdateWidget(NavigationScreen oldWidget) { super.didUpdateWidget(oldWidget); if (oldWidget.iconData != widget.iconData) { _startAnimation(); } } @override void initState() { _controller = AnimationController( vsync: this, duration: Duration(milliseconds: 1000), ); animation = CurvedAnimation( parent: _controller, curve: Curves.easeIn, ); _controller.forward(); super.initState(); } _startAnimation() { _controller = AnimationController( vsync: this, duration: Duration(milliseconds: 1000), ); animation = CurvedAnimation( parent: _controller, curve: Curves.easeIn, ); _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final colors = Theme.of(context).extension<CustomColorsTheme>()!; return Container( color: Theme.of(context).colorScheme.background, child: ListView( children: [ SizedBox(height: 64), Center( child: CircularRevealAnimation( animation: animation, centerOffset: Offset(80, 80), maxRadius: MediaQuery.of(context).size.longestSide * 1.1, child: Icon( widget.iconData, color: colors.activeNavigationBarColor, size: 160, ), ), ), ], ), ); } }
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Using the package's example with minor modifications:
Expected results
The home indicator bar's background should resemble this gradient:
![Skype_Picture_2024_02_20T10_48_23_624Z](https://private-user-images.githubusercontent.com/38513782/306232609-aa66a8a4-15bc-40fb-8408-0e3f66c8a2ba.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE3MzAyMzYsIm5iZiI6MTcyMTcyOTkzNiwicGF0aCI6Ii8zODUxMzc4Mi8zMDYyMzI2MDktYWE2NmE4YTQtMTViYy00MGZiLTg0MDgtMGUzZjY2YzhhMmJhLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzIzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyM1QxMDE4NTZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01Y2M2MjFlZjg5MTBlZmY0MDE1MDI5ODhhZDE5NjQ5ZGYzZWEzOTZiNzRhNGUwMWMwZjlhOTRkNjNhMzBkMzlhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.zGI236jhVLQgYYAstUGoYRIOYVCrCrVsT0gA0TlJjUg)
Actual results
The background of the home indicator has not changed to a gradient
![Skype_Picture_2024_02_20T10_48_25_039Z](https://private-user-images.githubusercontent.com/38513782/306232694-09dbac93-6346-4f5c-9875-4620e1d9cd11.jpeg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE3MzAyMzYsIm5iZiI6MTcyMTcyOTkzNiwicGF0aCI6Ii8zODUxMzc4Mi8zMDYyMzI2OTQtMDlkYmFjOTMtNjM0Ni00ZjVjLTk4NzUtNDYyMGUxZDljZDExLmpwZWc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzIzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcyM1QxMDE4NTZaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iN2Q5NGYyZmIyYmQxMzU3MTY3MGIwZDlkYWFhMWFmMmI1NDkyMzU2ZTI4NGU2MTU1MjQ2ZDE5MDc3YzQ0OTkwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.aIWbQRexQBQy8vY2XCKHLrdFwxE6Df_QYSPqNacj1wU)
Code sample
Click to expand code block
The text was updated successfully, but these errors were encountered: