diff --git a/lib/data/widget_category.dart b/lib/data/widget_category.dart index 1351db6..38b3957 100644 --- a/lib/data/widget_category.dart +++ b/lib/data/widget_category.dart @@ -9,6 +9,7 @@ import 'package:flutter_component_ui/ui_components/pricing_cards/pricing_cards.d import 'package:flutter_component_ui/ui_components/segmented_controls/segmented_control_screen.dart'; import 'package:flutter_component_ui/ui_components/steppers/steppers.dart'; +import '../ui_components/bottom_navbars/bottom_navbars.dart'; import '../ui_components/radios/radios.dart'; import '../ui_components/sliders/sliders.dart'; @@ -27,7 +28,7 @@ final List> widgetCategoryData = [ }, { 'categoryName': 'Bottom Navigation Bars', - 'categoryScreen': const AlertScreen(), + 'categoryScreen': const BottomNavBarScreen(), }, { 'categoryName': 'Avatars', diff --git a/lib/ui_components/bottom_navbars/allBottomNavigationBars/animated_navbar/bottom_navbar4.dart b/lib/ui_components/bottom_navbars/allBottomNavigationBars/animated_navbar/bottom_navbar4.dart new file mode 100644 index 0000000..494b505 --- /dev/null +++ b/lib/ui_components/bottom_navbars/allBottomNavigationBars/animated_navbar/bottom_navbar4.dart @@ -0,0 +1,146 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; + +class Bottom_Navbar4 extends StatefulWidget { + const Bottom_Navbar4({super.key}); + + @override + Bottom_Navbar4State createState() => Bottom_Navbar4State(); +} + +class Bottom_Navbar4State extends State { + var currentIndex = 0; + + @override + Widget build(BuildContext context) { + final isDarkMode = Theme.of(context).brightness == Brightness.dark; + double displayWidth = MediaQuery.of(context).size.width; + return Scaffold( + bottomNavigationBar: Container( + padding: const EdgeInsets.all(5), + margin: EdgeInsets.all(displayWidth * .02), + height: displayWidth * 0.2, + decoration: BoxDecoration( + color: isDarkMode ? Colors.grey[900] : Colors.white, + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(.1), + blurRadius: 30, + offset: Offset(0, 10), + ), + ], + borderRadius: BorderRadius.circular(50), + ), + child: ListView.builder( + itemCount: 4, + scrollDirection: Axis.horizontal, + padding: EdgeInsets.symmetric(horizontal: displayWidth * .02), + itemBuilder: (context, index) => InkWell( + onTap: () { + setState(() { + currentIndex = index; + HapticFeedback.lightImpact(); + }); + }, + splashColor: Colors.transparent, + highlightColor: Colors.transparent, + child: Stack( + children: [ + AnimatedContainer( + duration: Duration(seconds: 1), + curve: Curves.fastLinearToSlowEaseIn, + width: index == currentIndex + ? displayWidth * .32 + : displayWidth * .18, + alignment: Alignment.center, + child: AnimatedContainer( + duration: Duration(seconds: 1), + curve: Curves.fastLinearToSlowEaseIn, + height: index == currentIndex ? displayWidth * .12 : 0, + width: index == currentIndex ? displayWidth * .32 : 0, + decoration: BoxDecoration( + color: index == currentIndex + ? Colors.blueAccent.withOpacity(.2) + : Colors.transparent, + borderRadius: BorderRadius.circular(50), + ), + ), + ), + AnimatedContainer( + duration: Duration(seconds: 1), + curve: Curves.fastLinearToSlowEaseIn, + width: index == currentIndex + ? displayWidth * .31 + : displayWidth * .18, + alignment: Alignment.center, + child: Stack( + children: [ + Row( + children: [ + AnimatedContainer( + duration: Duration(seconds: 1), + curve: Curves.fastLinearToSlowEaseIn, + width: + index == currentIndex ? displayWidth * .13 : 0, + ), + AnimatedOpacity( + opacity: index == currentIndex ? 1 : 0, + duration: Duration(seconds: 1), + curve: Curves.fastLinearToSlowEaseIn, + child: Text( + index == currentIndex + ? '${listOfStrings[index]}' + : '', + style: TextStyle( + color: isDarkMode + ? Colors.amberAccent + : Colors.blueAccent, + fontWeight: FontWeight.w600, + fontSize: 15, + ), + ), + ), + ], + ), + Row( + children: [ + AnimatedContainer( + duration: Duration(seconds: 1), + curve: Curves.fastLinearToSlowEaseIn, + width: + index == currentIndex ? displayWidth * .03 : 20, + ), + Icon( + listOfIcons[index], + size: displayWidth * .076, + color: isDarkMode + ? Colors.amberAccent + : Colors.blueAccent, + ), + ], + ), + ], + ), + ), + ], + ), + ), + ), + ), + ); + } + + List listOfIcons = [ + Icons.home_rounded, + Icons.favorite_rounded, + Icons.settings_rounded, + Icons.person_rounded, + ]; + + List listOfStrings = [ + 'Home', + 'Favorite', + 'Settings', + 'Account', + ]; +} diff --git a/lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar1.dart b/lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar1.dart new file mode 100644 index 0000000..3c3f910 --- /dev/null +++ b/lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar1.dart @@ -0,0 +1,65 @@ +import 'package:flutter/material.dart'; + +// ignore: camel_case_types +class Bottom_Navbar1 extends StatefulWidget { + const Bottom_Navbar1({super.key}); + + @override + State createState() => _Bottom_Navbar1State(); +} + +class _Bottom_Navbar1State extends State { + int _currentIndex = 0; + + @override + Widget build(BuildContext context) { + final isDarkMode = Theme.of(context).brightness == Brightness.dark; + + return Scaffold( + bottomNavigationBar: Theme( + data: Theme.of(context).copyWith( + // Sets the background color of the `BottomNavigationBar` + canvasColor: isDarkMode ? Colors.grey[900] : Colors.white, + // Sets the active color of the `BottomNavigationBar` + primaryColor: isDarkMode ? Colors.amberAccent : Colors.red, + unselectedWidgetColor: isDarkMode ? Colors.grey[400] : Colors.grey, + // Sets the inactive color of the `BottomNavigationBar` + textTheme: Theme.of(context).textTheme.copyWith( + // ignore: deprecated_member_use + caption: TextStyle( + color: isDarkMode ? Colors.amberAccent : Colors.yellow, + ), + ), + ), + child: BottomNavigationBar( + unselectedIconTheme: IconThemeData( + color: isDarkMode ? Colors.grey[400] : Colors.grey[500], + ), + selectedFontSize: 14, + selectedItemColor: + isDarkMode ? Colors.amberAccent : Colors.blueAccent, + currentIndex: _currentIndex, + onTap: (int index) { + setState(() { + _currentIndex = index; + }); + }, + items: const [ + BottomNavigationBarItem( + icon: Icon(Icons.home), + label: 'Home', + ), + BottomNavigationBarItem( + icon: Icon(Icons.search), + label: 'Search', + ), + BottomNavigationBarItem( + icon: Icon(Icons.person), + label: 'Profile', + ), + ], + ), + ), + ); + } +} diff --git a/lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar2.dart b/lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar2.dart new file mode 100644 index 0000000..36b37c7 --- /dev/null +++ b/lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar2.dart @@ -0,0 +1,76 @@ +import 'package:flutter/material.dart'; + +// ignore: camel_case_types +class Bottom_Navbar2 extends StatefulWidget { + const Bottom_Navbar2({Key? key}) : super(key: key); + + @override + State createState() => _Bottom_Navbar2State(); +} + +// ignore: camel_case_types +class _Bottom_Navbar2State extends State { + int _currentIndex = 0; + + @override + Widget build(BuildContext context) { + bool isDarkMode = Theme.of(context).brightness == Brightness.dark; + + return Theme( + data: Theme.of(context).copyWith( + // Sets the background color of the `BottomNavigationBar` + canvasColor: isDarkMode ? Colors.grey[900] : Colors.white, + // Sets the active color of the `BottomNavigationBar` if `Brightness` is light + primaryColor: isDarkMode ? Colors.amberAccent : Colors.red, + // Sets the inactive color of the `BottomNavigationBar` + unselectedWidgetColor: isDarkMode ? Colors.grey[400] : Colors.grey, + // Sets the text color of the `BottomNavigationBar` + textTheme: Theme.of(context).textTheme.copyWith( + // Sets the text color of the labels + // ignore: deprecated_member_use + caption: TextStyle( + color: isDarkMode ? Colors.amberAccent : Colors.yellow, + ), + ), + ), + child: Scaffold( + bottomNavigationBar: BottomNavigationBar( + unselectedIconTheme: IconThemeData( + color: isDarkMode ? Colors.grey[400] : Colors.grey[500], + ), + selectedFontSize: 16, + selectedItemColor: + isDarkMode ? Colors.amberAccent : Colors.blueAccent, + currentIndex: _currentIndex, + onTap: (int index) { + setState(() { + _currentIndex = index; + }); + }, + items: const [ + BottomNavigationBarItem( + icon: Icon(Icons.call), + label: 'Calls', + ), + BottomNavigationBarItem( + icon: Icon(Icons.camera), + label: 'Camera', + ), + BottomNavigationBarItem( + icon: Icon(Icons.chat), + label: 'Chats', + ), + BottomNavigationBarItem( + icon: Icon(Icons.star_rate), + label: 'Favorite', + ), + BottomNavigationBarItem( + icon: Icon(Icons.person), + label: 'Profile', + ), + ], + ), + ), + ); + } +} diff --git a/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar3.dart b/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar3.dart new file mode 100644 index 0000000..a47e043 --- /dev/null +++ b/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar3.dart @@ -0,0 +1,145 @@ +import 'package:flutter/material.dart'; + +// ignore: camel_case_types +class Bottom_Navbar3 extends StatefulWidget { + const Bottom_Navbar3({super.key}); + + @override + State createState() => _Bottom_Navbar3State(); +} + +// ignore: camel_case_types +class _Bottom_Navbar3State extends State { + late int currentIndex = 0; + @override + Widget build(BuildContext context) { + return Scaffold( + floatingActionButton: FloatingActionButton( + heroTag: "btn1", + child: const Icon(Icons.add), + onPressed: () {}, + backgroundColor: Colors.blueAccent, + ), + floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, + bottomNavigationBar: BottomAppBar( + shape: const CircularNotchedRectangle(), + notchMargin: 10, + // ignore: sized_box_for_whitespace + child: Container( + height: 60, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 0; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.dashboard, + color: currentIndex == 0 ? Colors.blue : Colors.grey, + ), + Text( + 'Home', + style: TextStyle( + color: + currentIndex == 0 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 1; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.mail, + color: currentIndex == 1 ? Colors.blue : Colors.grey, + ), + Text( + 'Mail', + style: TextStyle( + color: + currentIndex == 1 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + ], + ), + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 2; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.chat, + color: currentIndex == 2 ? Colors.blue : Colors.grey, + ), + Text( + 'Chat', + style: TextStyle( + color: + currentIndex == 2 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 3; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.person, + color: currentIndex == 3 ? Colors.blue : Colors.grey, + ), + Text( + 'Profile', + style: TextStyle( + color: + currentIndex == 3 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + ], + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar5.dart b/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar5.dart new file mode 100644 index 0000000..e9ae477 --- /dev/null +++ b/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar5.dart @@ -0,0 +1,138 @@ +import 'package:flutter/material.dart'; + +class Bottom_Navbar5 extends StatefulWidget { + const Bottom_Navbar5({Key? key}) : super(key: key); + + @override + State createState() => _Bottom_Navbar5State(); +} + +class _Bottom_Navbar5State extends State { + int currentIndex = 0; // Remove the 'late' keyword here + + @override + Widget build(BuildContext context) { + return Scaffold( + floatingActionButton: FloatingActionButton( + heroTag: "btn2", + child: const Icon(Icons.add), + onPressed: () {}, + backgroundColor: Colors.blueAccent, + ), + floatingActionButtonLocation: FloatingActionButtonLocation.endDocked, + bottomNavigationBar: BottomAppBar( + shape: const CircularNotchedRectangle(), + notchMargin: 10, + child: Container( + height: 60, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 0; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.dashboard, + color: currentIndex == 0 ? Colors.blue : Colors.grey, + ), + Text( + 'Home', + style: TextStyle( + color: + currentIndex == 0 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 1; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.mail, + color: currentIndex == 1 ? Colors.blue : Colors.grey, + ), + Text( + 'Mail', + style: TextStyle( + color: + currentIndex == 1 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 2; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.chat, + color: currentIndex == 2 ? Colors.blue : Colors.grey, + ), + Text( + 'Chat', + style: TextStyle( + color: + currentIndex == 2 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 3; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.person, + color: currentIndex == 3 ? Colors.blue : Colors.grey, + ), + Text( + 'Profile', + style: TextStyle( + color: + currentIndex == 3 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + ], + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar6.dart b/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar6.dart new file mode 100644 index 0000000..dd45461 --- /dev/null +++ b/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar6.dart @@ -0,0 +1,140 @@ +import 'package:flutter/material.dart'; + +// ignore: camel_case_types +class Bottom_Navbar6 extends StatefulWidget { + const Bottom_Navbar6({super.key}); + + @override + State createState() => _Bottom_Navbar6State(); +} + +// ignore: camel_case_types +class _Bottom_Navbar6State extends State { + late int currentIndex = 0; + @override + Widget build(BuildContext context) { + return Scaffold( + floatingActionButton: FloatingActionButton( + heroTag: "btn3", + child: const Icon(Icons.add), + onPressed: () {}, + backgroundColor: Colors.blueAccent, + ), + floatingActionButtonLocation: FloatingActionButtonLocation.startDocked, + bottomNavigationBar: BottomAppBar( + shape: const CircularNotchedRectangle(), + notchMargin: 10, + // ignore: sized_box_for_whitespace + child: Container( + height: 60, + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 0; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.dashboard, + color: currentIndex == 0 ? Colors.blue : Colors.grey, + ), + Text( + 'Home', + style: TextStyle( + color: + currentIndex == 0 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 1; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.mail, + color: currentIndex == 1 ? Colors.blue : Colors.grey, + ), + Text( + 'Mail', + style: TextStyle( + color: + currentIndex == 1 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 2; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.chat, + color: currentIndex == 2 ? Colors.blue : Colors.grey, + ), + Text( + 'Chat', + style: TextStyle( + color: + currentIndex == 2 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + MaterialButton( + minWidth: 40, + onPressed: () { + setState(() { + currentIndex = 3; + }); + }, + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Icon( + Icons.person, + color: currentIndex == 3 ? Colors.blue : Colors.grey, + ), + Text( + 'Profile', + style: TextStyle( + color: + currentIndex == 3 ? Colors.blue : Colors.grey, + ), + ), + ], + ), + ), + ], + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/ui_components/bottom_navbars/bottom_navbars.dart b/lib/ui_components/bottom_navbars/bottom_navbars.dart index c6c60b6..30b2888 100644 --- a/lib/ui_components/bottom_navbars/bottom_navbars.dart +++ b/lib/ui_components/bottom_navbars/bottom_navbars.dart @@ -1,10 +1,297 @@ import 'package:flutter/material.dart'; +import 'package:flutter_component_ui/provider/favorite_provider.dart'; +import 'package:provider/provider.dart'; +import '../../theme/theme.dart'; +import 'allBottomNavigationBars/animated_navbar/bottom_navbar4.dart'; +import 'allBottomNavigationBars/basic_navbars/bottom_navbar1.dart'; +import 'allBottomNavigationBars/basic_navbars/bottom_navbar2.dart'; +import 'allBottomNavigationBars/fab_navbars/bottom_navbar3.dart'; +import 'allBottomNavigationBars/fab_navbars/bottom_navbar5.dart'; +import 'allBottomNavigationBars/fab_navbars/bottom_navbar6.dart'; -class BottomNavigationBars extends StatelessWidget { - const BottomNavigationBars({super.key}); +class BottomNavBarScreen extends StatefulWidget { + const BottomNavBarScreen({super.key}); + + @override + State createState() => BottomNavBarScreenState(); +} + +class BottomNavBarScreenState extends State { + final basicbottomNavbar = [ + const Bottom_Navbar1(), + const Bottom_Navbar2(), + ]; + List basicbottomNavbarColor = [null, null]; + + final fabbottomNavbar = [ + const Bottom_Navbar3(), + const Bottom_Navbar5(), + const Bottom_Navbar6(), + ]; + List fabbottomNavbarColor = [null, null, null]; + + final animatedbottomNavbar = [ + const Bottom_Navbar4(), + ]; + List animatedbottomNavbarColor = [null]; @override Widget build(BuildContext context) { - return const Placeholder(); + return Scaffold( + body: SafeArea( + child: SingleChildScrollView( + child: Column( + // mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Basic Bottom Nav-Bars", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + basicbottomNavbar.length, + (index) => Consumer( + builder: (context, favProviderModel, child) => Column( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: 400.0, // Set the minimum width constraint + maxWidth: 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 100.0, // Set the maximum height constraint + ), + child: basicbottomNavbar[index], + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 3, 20, 3), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Add to favorite'), + const SizedBox( + width: 5, + ), + GestureDetector( + onTap: () { + favProviderModel.add( + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: + 400.0, // Set the minimum width constraint + maxWidth: + 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 100.0, // Set the maximum height constraint + ), + child: basicbottomNavbar[index], + ), + ); + setState(() { + basicbottomNavbarColor[index] = + Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: basicbottomNavbarColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Animated Bottom Nav-Bars", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + animatedbottomNavbar.length, + (index) => Consumer( + builder: (context, favProviderModel, child) => Column( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: 400.0, // Set the minimum width constraint + maxWidth: 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 100.0, // Set the maximum height constraint + ), + child: animatedbottomNavbar[index], + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 3, 20, 3), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Add to favorite'), + const SizedBox( + width: 5, + ), + GestureDetector( + onTap: () { + favProviderModel.add( + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: + 400.0, // Set the minimum width constraint + maxWidth: + 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 100.0, // Set the maximum height constraint + ), + child: animatedbottomNavbar[index], + ), + ); + setState(() { + animatedbottomNavbarColor[index] = + Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: animatedbottomNavbarColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("FAB Bottom Nav-Bars", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + fabbottomNavbar.length, + (index) => Consumer( + builder: (context, favProviderModel, child) => Column( + children: [ + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: 400.0, // Set the minimum width constraint + maxWidth: 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 100.0, // Set the maximum height constraint + ), + child: fabbottomNavbar[index], + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 3, 20, 3), + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Text('Add to favorite'), + const SizedBox( + width: 5, + ), + GestureDetector( + onTap: () { + favProviderModel.add( + Container( + padding: const EdgeInsets.symmetric( + horizontal: 12, + vertical: 8, + ), + constraints: const BoxConstraints( + minWidth: + 400.0, // Set the minimum width constraint + maxWidth: + 500.0, // Set the maximum width constraint + minHeight: + 50.0, // Set the minimum height constraint + maxHeight: + 100.0, // Set the maximum height constraint + ), + child: fabbottomNavbar[index], + ), + ); + setState(() { + fabbottomNavbarColor[index] = Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: fabbottomNavbarColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ], + ), + ), + ), + ); } }