almohad_design_system 0.0.4

A personalized design system for Flutter applications, providing reusable UI components like buttons, cards, chat bubbles, and more.

Flutter Design System

Flutter Design System is a collection of reusable UI components for Flutter applications, including buttons, cards, chat bubbles, and more.

Features

• Reusable Components: Pre-built widgets for buttons, cards, chat bubbles, and more.
• Customizable: Easily modify styles and layouts to match your design needs.
• Lightweight: Designed for efficiency with minimal dependencies.

Installation

Add the following to your pubspec.yaml:

dependencies:
  flutter_design_system: latest_version

🎨 UI Components

🔘 Button

  DesignSystem.button(
    text: "Primary Button",
    onPressed: () {
      debugPrint("Primary Button Clicked");
    },
    type: ButtonType.primary,
    textColor: Colors.white,
    animationType:
        ButtonAnimationType.slide,
  ),

DesignSystem.chatBubble(
  message: ChatMessage(
    text: "Hello, how are you?",
    time: DateTime.now(),
  ),
  isSender: true,
);

DesignSystem.audioPlayer(
  audioUrl: "https://www.example.com/audio.mp3",
  audioTitle: "Voice Note",
  status: ChatStatus.sent,
  backgroundColor: Colors.blue,
  doneColor: Colors.green,
  isSender: true,
  showUserAvatar: true,
  userAvatar: NetworkImage("https://www.example.com/avatar.jpg"),
  time: DateTime.now(),
);

DesignSystem.textField(
  label: "Username",
  hintText: "Enter your username",
);

DesignSystem.container(
  color: Colors.blueAccent,
  borderRadius: 10,
  padding: const EdgeInsets.all(16),
  child: Text("Hello Container!"),
);

DesignSystem.parallaxImage(
  imageUrl: "https://www.example.com/image.jpg",
  height: 200,
  parallaxFactor: 0.3,
);

DesignSystem.liveTime(
  child: Text("Live Date & Time"),
);

DesignSystem.glass(
  child: Text("Glass Effect"),
);

DesignSystem.neu(
  child: Icon(Icons.star, size: 40),
);

DesignSystem.expandedContent(
  expandedChildren: [
    Text("Expanded Content 1"),
    Text("Expanded Content 2"),
  ],
  collapsedContent: Text("Tap to Expand"),
);

✅ What's Improved?

• Structured Markdown format 📑.
• Code blocks for each widget 🏗️.
• Clear section headers for better readability 🎯.

Let me know if you need further refinements! 🚀

🔙 Handling Android Back Navigation (Android 13+)

Starting from Android 13 (API 33), Android requires apps to register OnBackInvokedCallback for back gesture support.

To enable this in your Flutter app, make sure you are using Flutter 3.7+ (or later).

✅ Solution

Add this inside your AndroidManifest.xml:

<manifest>
    <application
        android:enableOnBackInvokedCallback="true"
        ... >
    </application>
</manifest>