mioceen_design_system 0.1.0

A design system package for Flutter, including color, typography, icons and more

Here's a sample README.md for your Dart package called mioceen_design_system:

---

Mioceen Design System

The Mioceen Design System is a reusable set of UI components and design tokens that enables a consistent, scalable, and accessible design experience across the Mioceen business management platform. It provides ready-to-use Flutter widgets and styles that align with Mioceen’s design principles.

Features

• Custom Widgets: Pre-built UI components like buttons, forms, inputs, modals, etc., following Mioceen’s design guidelines.
• Typography: Standardized fonts, sizes, and weights to ensure consistency across the app.
• Color Palette: A consistent set of colors, including primary, secondary, background, and accent colors.
• Spacing & Layout: Utilities for consistent margins, padding, and layouts.
• Responsive Design: Widgets that adapt to different screen sizes and orientations.
• Custom Themes: Dark and light theme support, ensuring that the design system is flexible in all contexts.

Installation

Add mioceen_design_system to your pubspec.yaml dependencies:

dependencies:
    mioceen_design_system: ^0.0.1

Then, run the following command in your terminal to fetch the package:

flutter pub get

Usage

Importing the Design System

To start using the design system in your Flutter project, import the package:

import 'package:mioceen_design_system/mioceen_design_system.dart';

Example: Using a Custom Button

import 'package:flutter/material.dart';
import 'package:mioceen_design_system/mioceen_design_system.dart';

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Mioceen Design System Example')),
      body: Center(
        child: MioceenButton(
          text: 'Click Me',
          onPressed: () {
            // Your action here
          },
        ),
      ),
    );
  }
}

Customizing the Theme

Mioceen Design System allows you to easily apply and customize themes across your app. To apply the design system theme globally:

import 'package:flutter/material.dart';
import 'package:mioceen_design_system/mioceen_design_system.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mioceen App',
      theme: MioceenTheme.lightTheme,
      darkTheme: MioceenTheme.darkTheme,
      home: ExamplePage(),
    );
  }
}

Available Widgets

• MioceenButton: A highly customizable button component.
• MioceenInputField: Styled input fields for forms.
• MioceenCard: Pre-designed card layouts for displaying content.
• MioceenModal: Customizable modals for displaying dialogs.
• And more...

Contributing

We welcome contributions to the Mioceen Design System. To contribute:

1. Fork the repository.
2. Create a new branch (git checkout -b feature/your-feature).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some feature').
5. Push to the branch (git push origin feature/your-feature).
6. Open a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

This README provides an overview of your package, how to install it, a usage example, and contribution guidelines. You can add more details as the design system evolves!