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 skycosmic command, follow these two steps:

1. Add the Package #

Add stisla_flutter to your pubspec.yaml dependencies:

2. Activate Stisla CLI (Global)

To enable the command-line tool, activate it globally on your machine:

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 skycosmic create button

Usage Example:

skycosmic 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:

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:

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

Rizaldi Naldian Putra

GitHub: @rizaldinaldianputra

Email: [email protected]

Made with ❤️ for the Flutter Community