diff --git a/CHANGELOG.md b/CHANGELOG.md index 732c6f3..1fee744 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,11 @@ +## 0.0.5 + - Readme updated + ## 0.0.4 - Fix : MUIInputField ## 0.0.3 - - Dart Formatted + - Dart Formatted ## 0.0.2 - Dart Formatted diff --git a/README.md b/README.md index e511fdc..fc99a75 100644 --- a/README.md +++ b/README.md @@ -233,7 +233,7 @@ Primary Carousal ), ``` -For more code samples, you can head on to our documentaion (under construction). +For more code samples, you can head on to our documentaion at . https://modularui.site
diff --git a/example/lib/components/buttons.dart b/example/lib/components/buttons.dart index 6c08548..53d2ed3 100644 --- a/example/lib/components/buttons.dart +++ b/example/lib/components/buttons.dart @@ -1,8 +1,9 @@ +import 'package:example/widgets/collapsible_unit.dart'; import 'package:example/widgets/custom_snackbar.dart'; import 'package:example/widgets/shadow.dart'; import 'package:example/widgets/text.dart'; -import 'package:modular_ui/modular_ui.dart'; import 'package:flutter/material.dart'; +import 'package:modular_ui/modular_ui.dart'; Widget button() { return const ButtonsView(); @@ -19,6 +20,7 @@ class ButtonsView extends StatefulWidget { class _ButtonsViewState extends State { bool radioButton = false; + bool isCollapsible = false; void onButtonPressed(String button) { final snackBar = SnackBar( @@ -130,6 +132,29 @@ class _ButtonsViewState extends State { ), const SizedBox(height: 16.0), + // Collapsible Button + text("Secondary Outlined Button"), + const SizedBox(height: 6), + MUISecondaryOutlinedButton( + bgColor: Colors.white, + text: "Secondary Outlined Button", + onPressed: () => onButtonPressed("Secondary Outline Button"), + ), + const SizedBox(height: 16.0), + + text("Collapsible Button"), + const SizedBox(height: 6), + MUICollapsibleButton( + actionIcon: + isCollapsible ? Icons.arrow_drop_up : Icons.arrow_drop_down, + collapsibleChild: const CollapsibleUnit(), + text: 'Collapsible Button', + onPressed: () { + isCollapsible = !isCollapsible; + }, + ), + const SizedBox(height: 16.0), + /// Primary Block Button text("Primary Block Button"), const SizedBox(height: 6), @@ -203,7 +228,6 @@ class _ButtonsViewState extends State { onPressed: () => onButtonPressed("Secondary Outlined Block Button"), ), const SizedBox(height: 16.0), - Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ diff --git a/example/lib/widgets/collapsible_unit.dart b/example/lib/widgets/collapsible_unit.dart new file mode 100644 index 0000000..205f9ed --- /dev/null +++ b/example/lib/widgets/collapsible_unit.dart @@ -0,0 +1,25 @@ +import 'package:flutter/material.dart'; +import 'package:modular_ui/modular_ui.dart'; + +class CollapsibleUnit extends StatelessWidget { + const CollapsibleUnit({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return MUIPrimaryCard( + title: 'UI/UX Review Check', + description: + 'The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona', + image: Image.network( + 'https://images.unsplash.com/photo-1540553016722-983e48a2cd10?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800&q=80', + fit: BoxFit.cover, + ), + buttons: [ + MUIPrimaryButton( + text: 'Read More', + onPressed: () {}, + ), + ], + ); + } +} diff --git a/example/pubspec.lock b/example/pubspec.lock index 263cc4c..a1b49fc 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -113,7 +113,7 @@ packages: path: ".." relative: true source: path - version: "0.0.3" + version: "0.0.5" path: dependency: transitive description: diff --git a/lib/modular_ui.dart b/lib/modular_ui.dart index 3b4b1c8..52c2e1c 100644 --- a/lib/modular_ui.dart +++ b/lib/modular_ui.dart @@ -19,7 +19,7 @@ export 'src/buttons/secondary_button.dart'; export 'src/buttons/secondary_block_level_button.dart'; export 'src/buttons/secondary_outlined_button.dart'; export 'src/buttons/secondary_outlined_block_level_button.dart'; - +export 'src/buttons/collapsible_button.dart'; /// Cards export 'src/cards/blog_card.dart'; export 'src/cards/primary_card.dart'; diff --git a/lib/src/buttons/collapsible_button.dart b/lib/src/buttons/collapsible_button.dart new file mode 100644 index 0000000..7c196bf --- /dev/null +++ b/lib/src/buttons/collapsible_button.dart @@ -0,0 +1,129 @@ + +import 'package:flutter/material.dart'; +import 'package:modular_ui/modular_ui.dart'; + +class MUICollapsibleButton extends StatefulWidget { + const MUICollapsibleButton({ + super.key, + required this.collapsibleChild, + required this.text, + this.bgColor = Colors.black, + this.textColor = Colors.white, + this.borderRadius = 10, + this.hapticsEnabled = false, + this.animationDuration = 250, + this.widthFactorUnpressed = 0.04, + this.widthFactorPressed = 0.035, + this.heightFactorUnPressed = 0.03, + this.heightFactorPressed = 0.03, + this.maxHorizontalPadding = 70, + this.leadingIcon, + this.actionIcon, + this.iconColor = Colors.white, + this.boxShadows, + required this.onPressed, + this.collapsibleChildSpacing = 15, + }); + + /// The Widget to display when the button is pressed. + final Widget collapsibleChild; + + /// The spacing between the button and the collapsible child widget. + final double? collapsibleChildSpacing; + + /// The Text to display inside the button. + final String text; + + /// Background Color of The Primary Button, default: black. + final Color bgColor; + + /// Text Color of the Primary Button, default: white. + final Color textColor; + + /// Border Radius for Primary Button, default: 10. + final double borderRadius; + + /// Animation Duration in Milliseconds, default: 250 ms. + final int animationDuration; + + /// Enables Light Haptic Feedback. + final bool hapticsEnabled; + + /// A double value which gets multiplied by the current screen width when the button is not pressed. + final double widthFactorUnpressed; + + /// A double value which gets multiplied by the current screen width when the button is pressed. + final double widthFactorPressed; + + /// A double value which gets multiplied by the current screen height when the button is pressed. + final double heightFactorPressed; + + /// A double value which gets multiplied by the current screen height when the button is not pressed. + final double heightFactorUnPressed; + + /// A double value which determines maximum horizontal padding a button can accumulate + /// Play with this value if you want to use the button on a larger screen size + final double maxHorizontalPadding; + + /// Optional leading icon for the button. + final IconData? leadingIcon; + + /// Optional action icon for the button. + final IconData? actionIcon; + + /// Icon color for both leading and action icons, default: white. + final Color iconColor; + + /// On Pressed Function. + final void Function() onPressed; + + /// Box shadows for button + final List? boxShadows; + + @override + // ignore: library_private_types_in_public_api + _MUICollapsibleButtonState createState() => _MUICollapsibleButtonState(); +} + +class _MUICollapsibleButtonState extends State + with SingleTickerProviderStateMixin { + bool _isCollapsibleButtonSelected = false; + + @override + Widget build(BuildContext context) { + return Column( + children: [ + MUIPrimaryButton( + actionIcon: widget.actionIcon, + onPressed: () { + setState(() { + _isCollapsibleButtonSelected = !_isCollapsibleButtonSelected; + }); + widget.onPressed(); + }, + text: widget.text, + bgColor: widget.bgColor, + textColor: widget.textColor, + borderRadius: widget.borderRadius, + animationDuration: widget.animationDuration, + hapticsEnabled: widget.hapticsEnabled, + widthFactorUnpressed: widget.widthFactorUnpressed, + widthFactorPressed: widget.widthFactorPressed, + heightFactorPressed: widget.heightFactorPressed, + heightFactorUnPressed: widget.heightFactorUnPressed, + maxHorizontalPadding: widget.maxHorizontalPadding, + leadingIcon: widget.leadingIcon, + iconColor: widget.iconColor, + boxShadows: widget.boxShadows, + ), + if (_isCollapsibleButtonSelected) + Padding( + padding: EdgeInsets.only( + top: widget.collapsibleChildSpacing!, + ), + child: widget.collapsibleChild, + ) + ], + ); + } +} diff --git a/pubspec.yaml b/pubspec.yaml index ba77012..f3bbbf1 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,6 @@ name: modular_ui description: "Pre-built beautiful flutter widgets Inspired by material-tailwind and shadcn/ui" -version: 0.0.4 +version: 0.0.5 homepage: https://modularui.site repository: https://github.com/opxica/modular-ui