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