📦FEAT: MUICollapsibleButton class

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 

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
 
 <hr>
 

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<ButtonsView> {
   bool radioButton = false;
+  bool isCollapsible = false;
 
   void onButtonPressed(String button) {
     final snackBar = SnackBar(
@@ -130,6 +132,29 @@ class _ButtonsViewState extends State<ButtonsView> {
           ),
           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<ButtonsView> {
             onPressed: () => onButtonPressed("Secondary Outlined Block Button"),
           ),
           const SizedBox(height: 16.0),
-
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceAround,
             children: [

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: () {},
+        ),
+      ],
+    );
+  }
+}

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:

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';

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<BoxShadow>? boxShadows;
+
+  @override
+  // ignore: library_private_types_in_public_api
+  _MUICollapsibleButtonState createState() => _MUICollapsibleButtonState();
+}
+
+class _MUICollapsibleButtonState extends State<MUICollapsibleButton>
+    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,
+          )
+      ],
+    );
+  }
+}

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