stisla 0.0.2
stisla: ^0.0.2 copied to clipboard
Paket untuk membuat komponen Flutter Stisla dengan CLI
Stisla Flutter Framework 🚀 #
Build professional admin dashboards with the speed of light.
Bringing the iconic Stisla Admin design system to the Flutter ecosystem.
🔥 Why Stisla Flutter? #
Stisla Flutter is a productivity-first framework that combines a robust UI Kit with a powerful Command Line Interface (CLI). Stop writing boilerplate code for every button, card, or form. Generate them instantly and keep your design consistent.
- ✨ Instant Scaffolding: Create components via CLI in seconds.
- 🎨 Stisla Design Language: Pixel-perfect implementation of the Stisla Admin Template.
- 📱 Fully Responsive: Adapts beautifully to Mobile, Tablet, and Desktop.
- 🛠 Highly Customizable: Easy to override styles to match your brand.
⚙️ Installation #
To use the framework and the stisla command, follow these two steps:
1. Add the Package #
Add stisla_flutter to your pubspec.yaml dependencies:
dependencies:
stisla_flutter: ^1.0.0
2. Activate Stisla CLI (Global)
To enable the command-line tool, activate it globally on your machine:
code
Bash
dart pub global activate stisla_flutter
Pro Tip: Make sure your Dart SDK's bin folder is in your system's PATH to run the commands from anywhere.
🛠️ CLI Usage (The Magic Part)
Our CLI handles the boring stuff. Simply run a command, and the component is ready to use.
Command Action
stisla create button <Name> 🔘 Generates a styled Stisla Button
stisla create card <Name> 🃏 Generates a Dashboard Statistic Card
stisla create input <Name> ⌨️ Generates a pre-validated Form Input
stisla create page <Name> 📄 Generates a full Page Scaffold
Usage Example:
code
Bash
stisla create button SubmitOrder
This will automatically create lib/stisla_components/buttons/submit_order.dart.
🚀 Getting Started
Initialize the Stisla theme in your main.dart to unlock the full design system:
code
Dart
import 'package:flutter/material.dart';
import 'package:stisla_flutter/stisla_flutter.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stisla Admin Dashboard',
debugShowCheckedModeBanner: false,
// Apply Stisla's clean professional themes
theme: StislaTheme.light(),
darkTheme: StislaTheme.dark(),
home: const DashboardPage(),
);
}
}
📂 Project Structure
The CLI automatically organizes your code following clean architecture principles:
code
Text
lib/
└── 🏗️ stisla_components/
├── 🔘 buttons/ # Generated Button Widgets
├── 📦 cards/ # Generated UI Cards
├── ⌨️ inputs/ # Generated Form Fields
└── 📑 pages/ # Full Scaffolded Pages
🤝 Contributing
We are open to new components and improvements!
Fork the project.
Create your feature branch (git checkout -b feature/NewComponent).
Commit your changes (git commit -m 'Add awesome component').
Push to the branch (git push origin feature/NewComponent).
Open a Pull Request.
📜 License
This project is licensed under the MIT License.
📞 Let's Connect
Your Name
GitHub: @yourusername
Email: hello@example.com
<p align="center">
Made with ❤️ for the Flutter Community
</p>