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:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature
). - Make your changes.
- Commit your changes (
git commit -m 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature
). - 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!