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/bottom_navbars/bottom_navbars.dart b/lib/ui_components/bottom_navbars/bottom_navbars.dart index 3bd08dd..15811d4 100644 --- a/lib/ui_components/bottom_navbars/bottom_navbars.dart +++ b/lib/ui_components/bottom_navbars/bottom_navbars.dart @@ -88,9 +88,30 @@ class BottomNavBarScreenState extends State { ), GestureDetector( onTap: () { - favProviderModel - .add(basicbottomNavbarIndex[index]); - setState(() {}); + 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], + ) as int, + ); + setState(() { + basicbottomNavbarColor[index] = + Colors.amber; + }); + }, child: Icon( Icons.star_border_outlined, @@ -153,9 +174,29 @@ class BottomNavBarScreenState extends State { ), GestureDetector( onTap: () { - favProviderModel - .add(animatedbottomNavbarIndex[index]); - setState(() {}); + 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], + ) as int, + ); + setState(() { + animatedbottomNavbarColor[index] = + Colors.amber; + }); }, child: Icon( Icons.star_border_outlined, @@ -218,9 +259,28 @@ class BottomNavBarScreenState extends State { ), GestureDetector( onTap: () { - favProviderModel - .add(fabbottomNavbarIndex[index]); - setState(() {}); + 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], + ) as int, + ); + setState(() { + fabbottomNavbarColor[index] = Colors.amber; + }); }, child: Icon( Icons.star_border_outlined, 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 index e69de29..3882e06 100644 --- a/lib/ui_components/toggles/toggles.dart +++ 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], + ), + ), + ], + ), + ), + ], + ), + ), + ), + ), + ], + ), + ), + ), + ); + } +}