From 908e4b2252ba456a5f9c67920acbb379735cac43 Mon Sep 17 00:00:00 2001 From: Rhishikesh12 Date: Thu, 1 Jun 2023 09:03:58 +0530 Subject: [PATCH 1/4] bottom_Navbars added --- lib/data/widget_category.dart | 3 +- .../animated_navbar/bottom_navbar4.dart | 146 +++++++++ .../basic_navbars/bottom_navbar1.dart | 65 ++++ .../basic_navbars/bottom_navbar2.dart | 76 +++++ .../fab_navbars/bottom_navbar3.dart | 145 +++++++++ .../fab_navbars/bottom_navbar5.dart | 138 +++++++++ .../fab_navbars/bottom_navbar6.dart | 140 +++++++++ .../bottom_navbars/bottom_navbars.dart | 293 +++++++++++++++++- pubspec.lock | 54 ++-- 9 files changed, 1022 insertions(+), 38 deletions(-) create mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/animated_navbar/bottom_navbar4.dart create mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar1.dart create mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar2.dart create mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar3.dart create mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar5.dart create mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar6.dart 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..7296716 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: + 150.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: + 150.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: + 150.0, // Set the maximum height constraint + ), + child: fabbottomNavbar[index], + ), + ); + setState(() { + fabbottomNavbarColor[index] = Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: fabbottomNavbarColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ], + ), + ), + ), + ); } } diff --git a/pubspec.lock b/pubspec.lock index 01a1d2e..b7097fc 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -13,10 +13,10 @@ packages: dependency: transitive description: name: async - sha256: bfe67ef28df125b7dddcea62755991f807aa39a2492a23e1550161692950bbe0 + sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c" url: "https://pub.dev" source: hosted - version: "2.10.0" + version: "2.11.0" boolean_selector: dependency: transitive description: @@ -29,10 +29,10 @@ packages: dependency: transitive description: name: characters - sha256: e6a326c8af69605aec75ed6c187d06b349707a27fbff8222ca9cc2cff167975c + sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605" url: "https://pub.dev" source: hosted - version: "1.2.1" + version: "1.3.0" clipboard: dependency: "direct main" description: @@ -53,10 +53,10 @@ packages: dependency: transitive description: name: collection - sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0 + sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c" url: "https://pub.dev" source: hosted - version: "1.17.0" + version: "1.17.1" crypto: dependency: transitive description: @@ -143,7 +143,7 @@ packages: sha256: "6b6f10f0ce3c42f6552d1c70d2c28d764cf22bb487f50f66cca31dcd5194f4d6" url: "https://pub.dev" source: hosted - version: "4.0.3" + version: "4.0.4" http: dependency: "direct main" description: @@ -164,26 +164,26 @@ packages: dependency: transitive description: name: js - sha256: "5528c2f391ededb7775ec1daa69e65a2d61276f7552de2b5f7b8d34ee9fd4ab7" + sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3 url: "https://pub.dev" source: hosted - version: "0.6.5" + version: "0.6.7" lints: dependency: transitive description: name: lints - sha256: "5e4a9cd06d447758280a8ac2405101e0e2094d2a1dbdd3756aec3fe7775ba593" + sha256: "6b0206b0bf4f04961fc5438198ccb3a885685cd67d4d4a32cc20ad7f8adbe015" url: "https://pub.dev" source: hosted - version: "2.0.1" + version: "2.1.0" matcher: dependency: transitive description: name: matcher - sha256: "16db949ceee371e9b99d22f88fa3a73c4e59fd0afed0bd25fc336eb76c198b72" + sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb" url: "https://pub.dev" source: hosted - version: "0.12.13" + version: "0.12.15" material_color_utilities: dependency: transitive description: @@ -196,10 +196,10 @@ packages: dependency: transitive description: name: meta - sha256: "6c268b42ed578a53088d834796959e4a1814b5e9e164f147f580a386e5decf42" + sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3" url: "https://pub.dev" source: hosted - version: "1.8.0" + version: "1.9.1" nested: dependency: transitive description: @@ -220,10 +220,10 @@ packages: dependency: transitive description: name: path - sha256: db9d4f58c908a4ba5953fcee2ae317c94889433e5024c27ce74a37f94267945b + sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917" url: "https://pub.dev" source: hosted - version: "1.8.2" + version: "1.8.3" path_provider: dependency: transitive description: @@ -353,10 +353,10 @@ packages: dependency: transitive description: name: test_api - sha256: ad540f65f92caa91bf21dfc8ffb8c589d6e4dc0c2267818b4cc2792857706206 + sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb url: "https://pub.dev" source: hosted - version: "0.4.16" + version: "0.5.1" typed_data: dependency: transitive description: @@ -377,21 +377,10 @@ packages: dependency: transitive description: name: url_launcher_android - - sha256: eed4e6a1164aa9794409325c3b707ff424d4d1c2a785e7db67f8bbda00e36e51 - url: "https://pub.dev" - source: hosted - version: "6.0.35" - sha256: "1a5848f598acc5b7d8f7c18b8cb834ab667e59a13edc3c93e9d09cf38cc6bc87" - url: "https://pub.dev" - source: hosted - version: "6.0.34" - sha256: eed4e6a1164aa9794409325c3b707ff424d4d1c2a785e7db67f8bbda00e36e51 url: "https://pub.dev" source: hosted version: "6.0.35" - url_launcher_ios: dependency: transitive description: @@ -465,8 +454,5 @@ packages: source: hosted version: "1.0.0" sdks: - - dart: ">=2.19.0 <3.0.0" - dart: ">=3.0.0-0 <4.0.0" - dart: ">=2.19.0 <3.0.0" + dart: ">=3.0.0-417 <4.0.0" flutter: ">=3.3.0" From d57003ad48d0f21b840271876fc30080e95d5aa1 Mon Sep 17 00:00:00 2001 From: Rhishikesh12 Date: Thu, 1 Jun 2023 09:12:49 +0530 Subject: [PATCH 2/4] tttttt "bottom_Navbars added" This reverts commit 908e4b2252ba456a5f9c67920acbb379735cac43. --- lib/data/widget_category.dart | 3 +- .../animated_navbar/bottom_navbar4.dart | 146 --------- .../basic_navbars/bottom_navbar1.dart | 65 ---- .../basic_navbars/bottom_navbar2.dart | 76 ----- .../fab_navbars/bottom_navbar3.dart | 145 --------- .../fab_navbars/bottom_navbar5.dart | 138 --------- .../fab_navbars/bottom_navbar6.dart | 140 --------- .../bottom_navbars/bottom_navbars.dart | 293 +----------------- pubspec.lock | 54 ++-- 9 files changed, 38 insertions(+), 1022 deletions(-) delete mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/animated_navbar/bottom_navbar4.dart delete mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar1.dart delete mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar2.dart delete mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar3.dart delete mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar5.dart delete mode 100644 lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar6.dart diff --git a/lib/data/widget_category.dart b/lib/data/widget_category.dart index 38b3957..1351db6 100644 --- a/lib/data/widget_category.dart +++ b/lib/data/widget_category.dart @@ -9,7 +9,6 @@ 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'; @@ -28,7 +27,7 @@ final List> widgetCategoryData = [ }, { 'categoryName': 'Bottom Navigation Bars', - 'categoryScreen': const BottomNavBarScreen(), + 'categoryScreen': const AlertScreen(), }, { '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 deleted file mode 100644 index 494b505..0000000 --- a/lib/ui_components/bottom_navbars/allBottomNavigationBars/animated_navbar/bottom_navbar4.dart +++ /dev/null @@ -1,146 +0,0 @@ -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 deleted file mode 100644 index 3c3f910..0000000 --- a/lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar1.dart +++ /dev/null @@ -1,65 +0,0 @@ -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 deleted file mode 100644 index 36b37c7..0000000 --- a/lib/ui_components/bottom_navbars/allBottomNavigationBars/basic_navbars/bottom_navbar2.dart +++ /dev/null @@ -1,76 +0,0 @@ -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 deleted file mode 100644 index a47e043..0000000 --- a/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar3.dart +++ /dev/null @@ -1,145 +0,0 @@ -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 deleted file mode 100644 index e9ae477..0000000 --- a/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar5.dart +++ /dev/null @@ -1,138 +0,0 @@ -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 deleted file mode 100644 index dd45461..0000000 --- a/lib/ui_components/bottom_navbars/allBottomNavigationBars/fab_navbars/bottom_navbar6.dart +++ /dev/null @@ -1,140 +0,0 @@ -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 7296716..c6c60b6 100644 --- a/lib/ui_components/bottom_navbars/bottom_navbars.dart +++ b/lib/ui_components/bottom_navbars/bottom_navbars.dart @@ -1,297 +1,10 @@ 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 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]; +class BottomNavigationBars extends StatelessWidget { + const BottomNavigationBars({super.key}); @override Widget build(BuildContext context) { - 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: - 150.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: - 150.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: - 150.0, // Set the maximum height constraint - ), - child: fabbottomNavbar[index], - ), - ); - setState(() { - fabbottomNavbarColor[index] = Colors.amber; - }); - }, - child: Icon( - Icons.star_border_outlined, - color: fabbottomNavbarColor[index], - ), - ), - ], - ), - ), - ], - ), - ), - ), - ), - ], - ), - ), - ), - ); + return const Placeholder(); } } diff --git a/pubspec.lock b/pubspec.lock index b7097fc..01a1d2e 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -13,10 +13,10 @@ packages: dependency: transitive description: name: async - sha256: "947bfcf187f74dbc5e146c9eb9c0f10c9f8b30743e341481c1e2ed3ecc18c20c" + sha256: bfe67ef28df125b7dddcea62755991f807aa39a2492a23e1550161692950bbe0 url: "https://pub.dev" source: hosted - version: "2.11.0" + version: "2.10.0" boolean_selector: dependency: transitive description: @@ -29,10 +29,10 @@ packages: dependency: transitive description: name: characters - sha256: "04a925763edad70e8443c99234dc3328f442e811f1d8fd1a72f1c8ad0f69a605" + sha256: e6a326c8af69605aec75ed6c187d06b349707a27fbff8222ca9cc2cff167975c url: "https://pub.dev" source: hosted - version: "1.3.0" + version: "1.2.1" clipboard: dependency: "direct main" description: @@ -53,10 +53,10 @@ packages: dependency: transitive description: name: collection - sha256: "4a07be6cb69c84d677a6c3096fcf960cc3285a8330b4603e0d463d15d9bd934c" + sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0 url: "https://pub.dev" source: hosted - version: "1.17.1" + version: "1.17.0" crypto: dependency: transitive description: @@ -143,7 +143,7 @@ packages: sha256: "6b6f10f0ce3c42f6552d1c70d2c28d764cf22bb487f50f66cca31dcd5194f4d6" url: "https://pub.dev" source: hosted - version: "4.0.4" + version: "4.0.3" http: dependency: "direct main" description: @@ -164,26 +164,26 @@ packages: dependency: transitive description: name: js - sha256: f2c445dce49627136094980615a031419f7f3eb393237e4ecd97ac15dea343f3 + sha256: "5528c2f391ededb7775ec1daa69e65a2d61276f7552de2b5f7b8d34ee9fd4ab7" url: "https://pub.dev" source: hosted - version: "0.6.7" + version: "0.6.5" lints: dependency: transitive description: name: lints - sha256: "6b0206b0bf4f04961fc5438198ccb3a885685cd67d4d4a32cc20ad7f8adbe015" + sha256: "5e4a9cd06d447758280a8ac2405101e0e2094d2a1dbdd3756aec3fe7775ba593" url: "https://pub.dev" source: hosted - version: "2.1.0" + version: "2.0.1" matcher: dependency: transitive description: name: matcher - sha256: "6501fbd55da300384b768785b83e5ce66991266cec21af89ab9ae7f5ce1c4cbb" + sha256: "16db949ceee371e9b99d22f88fa3a73c4e59fd0afed0bd25fc336eb76c198b72" url: "https://pub.dev" source: hosted - version: "0.12.15" + version: "0.12.13" material_color_utilities: dependency: transitive description: @@ -196,10 +196,10 @@ packages: dependency: transitive description: name: meta - sha256: "3c74dbf8763d36539f114c799d8a2d87343b5067e9d796ca22b5eb8437090ee3" + sha256: "6c268b42ed578a53088d834796959e4a1814b5e9e164f147f580a386e5decf42" url: "https://pub.dev" source: hosted - version: "1.9.1" + version: "1.8.0" nested: dependency: transitive description: @@ -220,10 +220,10 @@ packages: dependency: transitive description: name: path - sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917" + sha256: db9d4f58c908a4ba5953fcee2ae317c94889433e5024c27ce74a37f94267945b url: "https://pub.dev" source: hosted - version: "1.8.3" + version: "1.8.2" path_provider: dependency: transitive description: @@ -353,10 +353,10 @@ packages: dependency: transitive description: name: test_api - sha256: eb6ac1540b26de412b3403a163d919ba86f6a973fe6cc50ae3541b80092fdcfb + sha256: ad540f65f92caa91bf21dfc8ffb8c589d6e4dc0c2267818b4cc2792857706206 url: "https://pub.dev" source: hosted - version: "0.5.1" + version: "0.4.16" typed_data: dependency: transitive description: @@ -377,10 +377,21 @@ packages: dependency: transitive description: name: url_launcher_android + + sha256: eed4e6a1164aa9794409325c3b707ff424d4d1c2a785e7db67f8bbda00e36e51 + url: "https://pub.dev" + source: hosted + version: "6.0.35" + sha256: "1a5848f598acc5b7d8f7c18b8cb834ab667e59a13edc3c93e9d09cf38cc6bc87" + url: "https://pub.dev" + source: hosted + version: "6.0.34" + sha256: eed4e6a1164aa9794409325c3b707ff424d4d1c2a785e7db67f8bbda00e36e51 url: "https://pub.dev" source: hosted version: "6.0.35" + url_launcher_ios: dependency: transitive description: @@ -454,5 +465,8 @@ packages: source: hosted version: "1.0.0" sdks: - dart: ">=3.0.0-417 <4.0.0" + + dart: ">=2.19.0 <3.0.0" + dart: ">=3.0.0-0 <4.0.0" + dart: ">=2.19.0 <3.0.0" flutter: ">=3.3.0" From 282223bef2900787232d7176a2739d01061d2180 Mon Sep 17 00:00:00 2001 From: Rhishikesh12 Date: Tue, 6 Jun 2023 08:10:46 +0530 Subject: [PATCH 3/4] bot_nav err --- lib/ui_components/bottom_navbars/bottom_navbars.dart | 6 +++--- lib/ui_components/toggles/toggles.dart | 0 2 files changed, 3 insertions(+), 3 deletions(-) delete mode 100644 lib/ui_components/toggles/toggles.dart diff --git a/lib/ui_components/bottom_navbars/bottom_navbars.dart b/lib/ui_components/bottom_navbars/bottom_navbars.dart index 30b2888..be360e4 100644 --- a/lib/ui_components/bottom_navbars/bottom_navbars.dart +++ b/lib/ui_components/bottom_navbars/bottom_navbars.dart @@ -105,7 +105,7 @@ class BottomNavBarScreenState extends State { 100.0, // Set the maximum height constraint ), child: basicbottomNavbar[index], - ), + ) as int, ); setState(() { basicbottomNavbarColor[index] = @@ -187,7 +187,7 @@ class BottomNavBarScreenState extends State { 100.0, // Set the maximum height constraint ), child: animatedbottomNavbar[index], - ), + ) as int, ); setState(() { animatedbottomNavbarColor[index] = @@ -269,7 +269,7 @@ class BottomNavBarScreenState extends State { 100.0, // Set the maximum height constraint ), child: fabbottomNavbar[index], - ), + ) as int, ); setState(() { fabbottomNavbarColor[index] = Colors.amber; diff --git a/lib/ui_components/toggles/toggles.dart b/lib/ui_components/toggles/toggles.dart deleted file mode 100644 index e69de29..0000000 From 3158ec603b07c7e7efcc24cb74a278b3b271ab7c Mon Sep 17 00:00:00 2001 From: Rhishikesh12 Date: Tue, 6 Jun 2023 08:27:10 +0530 Subject: [PATCH 4/4] toggles_added --- lib/data/widget_category.dart | 5 + .../Animated Toggles/animatedToggle1.dart | 64 +++ .../Animated Toggles/animatedToggle2.dart | 74 +++ .../Animated Toggles/disabledToggle.dart | 56 ++ .../Animated Toggles/modernToggle1.dart | 53 ++ .../Animated Toggles/modernToggle2.dart | 80 +++ .../Animated Toggles/sqaureToggle.dart | 80 +++ .../Simple Toggles/simpleToggle2.dart | 81 +++ lib/ui_components/toggles/toggles.dart | 489 ++++++++++++++++++ 9 files changed, 982 insertions(+) create mode 100644 lib/ui_components/toggles/allToggels/Animated Toggles/animatedToggle1.dart create mode 100644 lib/ui_components/toggles/allToggels/Animated Toggles/animatedToggle2.dart create mode 100644 lib/ui_components/toggles/allToggels/Animated Toggles/disabledToggle.dart create mode 100644 lib/ui_components/toggles/allToggels/Animated Toggles/modernToggle1.dart create mode 100644 lib/ui_components/toggles/allToggels/Animated Toggles/modernToggle2.dart create mode 100644 lib/ui_components/toggles/allToggels/Animated Toggles/sqaureToggle.dart create mode 100644 lib/ui_components/toggles/allToggels/Simple Toggles/simpleToggle2.dart create mode 100644 lib/ui_components/toggles/toggles.dart diff --git a/lib/data/widget_category.dart b/lib/data/widget_category.dart index e0babbd..be67ff0 100644 --- a/lib/data/widget_category.dart +++ b/lib/data/widget_category.dart @@ -12,6 +12,7 @@ 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'; +import '../ui_components/toggles/toggles.dart'; final List> widgetCategoryData = [ { @@ -30,6 +31,10 @@ final List> widgetCategoryData = [ 'categoryName': 'Bottom Navigation Bars', 'categoryScreen': const BottomNavBarScreen(), }, + { + 'categoryName': 'Toggle Buttons', + 'categoryScreen': const ToggelButtonScreen(), + }, { 'categoryName': 'Avatars', 'categoryScreen': const AvatarScreen(), diff --git a/lib/ui_components/toggles/allToggels/Animated Toggles/animatedToggle1.dart b/lib/ui_components/toggles/allToggels/Animated Toggles/animatedToggle1.dart new file mode 100644 index 0000000..463d9f2 --- /dev/null +++ b/lib/ui_components/toggles/allToggels/Animated Toggles/animatedToggle1.dart @@ -0,0 +1,64 @@ +import 'package:flutter/material.dart'; + +class CustomToggleButton3 extends StatefulWidget { + const CustomToggleButton3({Key? key}) : super(key: key); + + @override + _CustomToggleButton3State createState() => _CustomToggleButton3State(); +} + +class _CustomToggleButton3State extends State { + bool _isToggled = false; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + setState(() { + _isToggled = !_isToggled; + }); + }, + child: AnimatedContainer( + // margin: const EdgeInsets.only(left: 20, right: 20), + duration: const Duration(milliseconds: 200), + width: 80, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + color: _isToggled ? Colors.blue : Colors.grey, + ), + child: Stack( + children: [ + AnimatedAlign( + duration: const Duration(milliseconds: 300), + alignment: + _isToggled ? Alignment.centerRight : Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(4.0), + child: Container( + width: 32, + height: 32, + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.white, + ), + child: _isToggled + ? const Icon( + Icons.light_mode, + color: Colors.blue, + size: 20, + ) + : const Icon( + Icons.nightlight_round, + color: Colors.grey, + size: 20, + ), + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/ui_components/toggles/allToggels/Animated Toggles/animatedToggle2.dart b/lib/ui_components/toggles/allToggels/Animated Toggles/animatedToggle2.dart new file mode 100644 index 0000000..bc34286 --- /dev/null +++ b/lib/ui_components/toggles/allToggels/Animated Toggles/animatedToggle2.dart @@ -0,0 +1,74 @@ +import 'package:flutter/material.dart'; + +class CustomToggleButton2 extends StatefulWidget { + const CustomToggleButton2({Key? key}) : super(key: key); + + @override + // ignore: library_private_types_in_public_api + _CustomToggleButton2State createState() => _CustomToggleButton2State(); +} + +class _CustomToggleButton2State extends State { + bool _isToggled = false; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + setState(() { + _isToggled = !_isToggled; + }); + }, + child: AnimatedContainer( + // margin: const EdgeInsets.only(left: 20, right: 20), + duration: const Duration(milliseconds: 200), + width: 80, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + color: Colors.blue, + ), + child: Stack( + children: [ + const Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: EdgeInsets.only(left: 8.0), + child: Icon( + Icons.light_mode_outlined, + color: Colors.white, + ), + ), + ), + const Align( + alignment: Alignment.centerRight, + child: Padding( + padding: EdgeInsets.only(right: 8.0), + child: Icon( + Icons.nights_stay_rounded, + color: Colors.white, + ), + ), + ), + AnimatedAlign( + duration: const Duration(milliseconds: 300), + alignment: + _isToggled ? Alignment.centerRight : Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(4.0), + child: Container( + width: 32, + height: 32, + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.white, + ), + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/ui_components/toggles/allToggels/Animated Toggles/disabledToggle.dart b/lib/ui_components/toggles/allToggels/Animated Toggles/disabledToggle.dart new file mode 100644 index 0000000..e7787c8 --- /dev/null +++ b/lib/ui_components/toggles/allToggels/Animated Toggles/disabledToggle.dart @@ -0,0 +1,56 @@ +import 'package:flutter/material.dart'; + +class CustomToggleButton1 extends StatefulWidget { + const CustomToggleButton1({Key? key}) : super(key: key); + + @override + _CustomToggleButton1State createState() => _CustomToggleButton1State(); +} + +class _CustomToggleButton1State extends State { + bool _isToggled = false; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + setState(() { + _isToggled = !_isToggled; + }); + }, + child: IgnorePointer( + ignoring: true, // Disables user interaction + child: AnimatedContainer( + margin: const EdgeInsets.only(left: 140, right: 140), + duration: const Duration(milliseconds: 200), + width: 40, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + color: _isToggled ? Colors.blue : Colors.grey, + ), + child: Stack( + children: [ + AnimatedAlign( + duration: const Duration(milliseconds: 300), + alignment: + _isToggled ? Alignment.centerRight : Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(4.0), + child: Container( + width: 32, + height: 32, + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.white, + ), + ), + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/ui_components/toggles/allToggels/Animated Toggles/modernToggle1.dart b/lib/ui_components/toggles/allToggels/Animated Toggles/modernToggle1.dart new file mode 100644 index 0000000..7ccbc9d --- /dev/null +++ b/lib/ui_components/toggles/allToggels/Animated Toggles/modernToggle1.dart @@ -0,0 +1,53 @@ +import 'package:flutter/material.dart'; + +class CustomToggleButton4 extends StatefulWidget { + const CustomToggleButton4({Key? key}) : super(key: key); + + @override + _CustomToggleButton4State createState() => _CustomToggleButton4State(); +} + +class _CustomToggleButton4State extends State { + bool _isToggled = false; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + setState(() { + _isToggled = !_isToggled; + }); + }, + child: AnimatedContainer( + margin: const EdgeInsets.only(left: 140, right: 140), + duration: const Duration(milliseconds: 200), + width: 40, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + color: _isToggled ? Colors.blue : Colors.grey, + ), + child: Stack( + children: [ + AnimatedAlign( + duration: const Duration(milliseconds: 300), + alignment: + _isToggled ? Alignment.centerRight : Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(4.0), + child: Container( + width: 32, + height: 32, + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.white, + ), + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/ui_components/toggles/allToggels/Animated Toggles/modernToggle2.dart b/lib/ui_components/toggles/allToggels/Animated Toggles/modernToggle2.dart new file mode 100644 index 0000000..19e1d21 --- /dev/null +++ b/lib/ui_components/toggles/allToggels/Animated Toggles/modernToggle2.dart @@ -0,0 +1,80 @@ +import 'package:flutter/material.dart'; + +class CustomToggleButton extends StatefulWidget { + const CustomToggleButton({Key? key}) : super(key: key); + + @override + // ignore: library_private_types_in_public_api + _CustomToggleButtonState createState() => _CustomToggleButtonState(); +} + +class _CustomToggleButtonState extends State { + bool _isToggled = false; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + setState(() { + _isToggled = !_isToggled; + }); + }, + child: AnimatedContainer( + // margin: const EdgeInsets.only(left: 140, right: 140), + duration: const Duration(milliseconds: 200), + width: 80, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + color: _isToggled ? Colors.blue : Colors.grey, + ), + child: Stack( + children: [ + const Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: EdgeInsets.only(left: 8.0), + child: Text( + 'ON', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + ), + ), + const Align( + alignment: Alignment.centerRight, + child: Padding( + padding: EdgeInsets.only(right: 8.0), + child: Text( + 'OFF', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + ), + ), + AnimatedAlign( + duration: const Duration(milliseconds: 300), + alignment: + _isToggled ? Alignment.centerRight : Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(4.0), + child: Container( + width: 32, + height: 32, + decoration: const BoxDecoration( + shape: BoxShape.circle, + color: Colors.white, + ), + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/ui_components/toggles/allToggels/Animated Toggles/sqaureToggle.dart b/lib/ui_components/toggles/allToggels/Animated Toggles/sqaureToggle.dart new file mode 100644 index 0000000..dd72376 --- /dev/null +++ b/lib/ui_components/toggles/allToggels/Animated Toggles/sqaureToggle.dart @@ -0,0 +1,80 @@ +import 'package:flutter/material.dart'; + +class CustomToggleButton5 extends StatefulWidget { + const CustomToggleButton5({Key? key}) : super(key: key); + + @override + // ignore: library_private_types_in_public_api + _CustomToggleButton5State createState() => _CustomToggleButton5State(); +} + +class _CustomToggleButton5State extends State { + bool _isToggled = false; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () { + setState(() { + _isToggled = !_isToggled; + }); + }, + child: AnimatedContainer( + // margin: const EdgeInsets.only(left: 140, right: 140), + duration: const Duration(milliseconds: 200), + width: 80, + height: 40, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(0), + color: _isToggled ? Colors.blue : Colors.grey, + ), + child: Stack( + children: [ + const Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: EdgeInsets.only(left: 8.0), + child: Text( + 'ON', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + ), + ), + const Align( + alignment: Alignment.centerRight, + child: Padding( + padding: EdgeInsets.only(right: 8.0), + child: Text( + 'OFF', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + ), + ), + AnimatedAlign( + duration: const Duration(milliseconds: 300), + alignment: + _isToggled ? Alignment.centerRight : Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(4.0), + child: Container( + width: 32, + height: 32, + decoration: const BoxDecoration( + shape: BoxShape.rectangle, + color: Colors.white, + ), + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/ui_components/toggles/allToggels/Simple Toggles/simpleToggle2.dart b/lib/ui_components/toggles/allToggels/Simple Toggles/simpleToggle2.dart new file mode 100644 index 0000000..6dceecc --- /dev/null +++ b/lib/ui_components/toggles/allToggels/Simple Toggles/simpleToggle2.dart @@ -0,0 +1,81 @@ +import 'package:flutter/material.dart'; + +class ToggelButton2 extends StatefulWidget { + const ToggelButton2({Key? key}) : super(key: key); + + @override + // ignore: library_private_types_in_public_api + _ToggelButton2State createState() => _ToggelButton2State(); +} + +class _ToggelButton2State extends State { + bool _isToggled = false; + bool _toggled = false; + bool _toggle = false; + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Center( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Transform.scale( + scale: 1.5, // Increase this value to adjust the size + child: Switch( + value: _isToggled, + materialTapTargetSize: MaterialTapTargetSize.padded, + activeColor: Colors.blue[800], + inactiveThumbColor: Colors.grey[300], + onChanged: (value) { + setState(() { + _isToggled = value; + }); + }, + ), + ), + const SizedBox( + width: 10, + ), + Transform.scale( + scale: 1.5, // Increase this value to adjust the size + child: Switch( + value: _toggled, + materialTapTargetSize: MaterialTapTargetSize.padded, + activeColor: Colors.purple[600], + inactiveThumbColor: Colors.grey[300], + onChanged: (value) { + setState(() { + _toggled = value; + }); + }, + ), + ), + const SizedBox( + width: 10, + ), + Transform.scale( + scale: 1.5, // Increase this value to adjust the size + child: Switch( + value: _toggle, + materialTapTargetSize: MaterialTapTargetSize.padded, + activeColor: Colors.red[800], + inactiveThumbColor: Colors.grey[300], + onChanged: (value) { + setState(() { + _toggle = value; + }); + }, + ), + ), + ], + ), + ), + ], + ), + ); + } +} diff --git a/lib/ui_components/toggles/toggles.dart b/lib/ui_components/toggles/toggles.dart new file mode 100644 index 0000000..3882e06 --- /dev/null +++ b/lib/ui_components/toggles/toggles.dart @@ -0,0 +1,489 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_component_ui/provider/favorite_provider.dart'; +import 'package:provider/provider.dart'; +import '../../theme/theme.dart'; + +import 'allToggels/Animated Toggles/animatedToggle1.dart'; +import 'allToggels/Animated Toggles/animatedToggle2.dart'; +import 'allToggels/Animated Toggles/disabledToggle.dart'; +import 'allToggels/Animated Toggles/modernToggle1.dart'; +import 'allToggels/Animated Toggles/modernToggle2.dart'; +import 'allToggels/Animated Toggles/sqaureToggle.dart'; +import 'allToggels/Simple Toggles/simpleToggle2.dart'; + +class ToggelButtonScreen extends StatefulWidget { + const ToggelButtonScreen({super.key}); + + @override + State createState() => ToggelButtonScreenState(); +} + +class ToggelButtonScreenState extends State { + final basicSmallToggelButton = [ + const ToggelButton2(), + ]; + List basicSmallToggelButtonColor = [null]; + + final modernWTToggelButton = [ + const CustomToggleButton4(), + ]; + List modernWTToggelButtonColor = [null]; + + final modernToggelButton = [ + const Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + CustomToggleButton(), + SizedBox( + width: 15, + ), + CustomToggleButton5(), + ], + ), + ]; + List modernToggelButtonColor = [null, null]; + + final disabledToggelButton = [ + const CustomToggleButton1(), + ]; + List disabledToggelButtonColor = [null]; + + final animatedToggelButton = [ + const Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + CustomToggleButton2(), + SizedBox( + width: 15, + ), + CustomToggleButton3(), + ], + ) + ]; + List animatedToggelButtonColor = [null, null]; + + @override + Widget build(BuildContext context) { + 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 Resizabel Toggles ", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + basicSmallToggelButton.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: basicSmallToggelButton[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: basicSmallToggelButton[index], + ) as int, + ); + setState(() { + basicSmallToggelButtonColor[index] = + Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: basicSmallToggelButtonColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Modern Toggle ", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + modernWTToggelButton.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: modernWTToggelButton[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: modernWTToggelButton[index], + ) as int, + ); + setState(() { + modernWTToggelButtonColor[index] = + Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: modernWTToggelButtonColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Modern Toggles With Text", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + modernToggelButton.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: modernToggelButton[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: modernToggelButton[index], + ) as int, + ); + setState(() { + modernToggelButtonColor[index] = + Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: modernToggelButtonColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Disabled Toggle", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + disabledToggelButton.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: disabledToggelButton[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: disabledToggelButton[index], + ) as int, + ); + setState(() { + disabledToggelButtonColor[index] = + Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: disabledToggelButtonColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + Align( + alignment: Alignment.centerLeft, + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Text("Animated Toggles With Icons ", + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: MyTheme.lightBluishColor)), + ), + ), + Wrap( + direction: Axis.horizontal, + children: List.generate( + animatedToggelButton.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: animatedToggelButton[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: animatedToggelButton[index], + ) as int, + ); + setState(() { + animatedToggelButtonColor[index] = + Colors.amber; + }); + }, + child: Icon( + Icons.star_border_outlined, + color: animatedToggelButtonColor[index], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ], + ), + ), + ), + ); + } +}