FlartDart 🚀 #

A Comprehensive, Developer-First Flutter-Inspired Framework for Dart Web Applications.

FlartDart brings the power, reactivity, and declarative UI of Flutter to the web using pure Dart. No external dependencies, no complex transpilation—just clean, performant, and beautiful web apps.

🌟 Key Features (v1.5.0) #

• Integrated CLI: A powerful flartdart tool for project creation, serving, and building.
• Responsive Power: Built-in ScreenUtil and numeric extensions (.w, .h, .sp) for perfect UI across devices.
• 100+ Core Widgets: Everything from FDContainer and FDColumn to FDSliverAppBar and FDDataTable.
• Reactive State Management: Implementation of ChangeNotifier, FDProvider, and a Stacked-style FDViewModelBuilder.
• Native-feel Animations: High-level FDAnimate helper, Hero transitions (foundation), and built-in transitions for all interactive widgets.
• Modern Routing: Sophisticated PageNavigator with Path Parameters (e.g., /user/:id) and history management.
• Forms & Validation: Integrated FDForm and FDTextFormField with easy validation logic and GlobalKey control.

🛠️ Flartdart CLI #

The framework comes with a dedicated CLI to manage your projects.

1. Installation #

Activate the tool globally from the package source:

dart pub global activate --source path .

2. Available Commands #

📱 Responsive Design (ScreenUtil) #

Flart treats responsiveness as a first-class citizen. Using the 1440x900 desktop design standard by default, you can scale any number.

1. Initialize #

void main() {
  ScreenUtil.init(); // Defaults to 1440x900
  runApp(const MyApp());
}

2. Use Responsive Units #

FDContainer(
  width: 300.w,  // Scaled width
  height: 200.h, // Scaled height
  padding: EdgeInsets.all(20.w),
  child: FDText(
    'Responsive Title',
    style: TextStyle(fontSize: 24.sp), // Scaled font
  ),
)

🚀 Getting Started #

1. Installation #

In your pubspec.yaml:

dependencies:
  flartdart: ^1.5.0

🏛️ Modern Architecture #

Stacked-style ViewModels #

Tired of complex state registration? Use FDViewModelBuilder for zero-config reactive logic:

class CounterViewModel extends ViewModel {
  int count = 0;
  void increment() {
    count++;
    notifyListeners();
  }
}

// In your View
FDViewModelBuilder<CounterViewModel>(
  viewModelBuilder: () => CounterViewModel(),
  builder: (context, model, child) => FDText('Count: ${model.count}'),
)

🛣️ Advanced Routing #

Flart supports path parameters out of the box:

// Registering routes
PageNavigator.routes = {
  '/': (params) => const HomePage(),
  '/details/:id': (params) => DetailPage(id: params['id']!),
};

// Navigating
PageNavigator.pushNamed('/details/42');

🎨 Premium UI & Animations #

🎬 Entrance Animations #

Bring your UI to life with a single wrapper:

FDAnimate(
  fadeIn: true,
  slideY: 20,
  duration: Duration(milliseconds: 600),
  child: MyCard(),
)

🧱 Shimmer Loaders #

Perfect for modern data-fetching UX:

isLoading 
  ? FDSkeleton(height: 100, borderRadius: BorderRadius.circular(8)) 
  : RealContent()

🖌️ Custom Painting #

Use the high-level Canvas API:

class MyPainter extends CustomPainter {
  void paint(Canvas canvas, Size size) {
    canvas.drawCircle(100, 100, 50, Paint()..color = FlartColors.blue);
  }
}

📡 Async Flow & Builders #

Flart brings Flutter's signature async patterns to Dart web. Use StreamBuilder for real-time data flows and FutureBuilder for one-time fetches.

📡 StreamBuilder #

Listen to any stream (like WebSockets) and rebuild automatically:

FDStreamBuilder<int>(
  stream: myTimerStream(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const FDText('Connecting...');
    }
    return FDText('Current Value: ${snapshot.data}');
  },
)

🛠️ Building for Production #

To build your application for production:

flartdart build --release

Optimization and tree-shaking are handled automatically by the CLI.

💳 Support the Project #

If you love Flartdart and find it useful, consider supporting our development! Your contributions help us maintain the framework and build new features.

You can also use the CLI at any time to get the support link:

flartdart donate

📄 License & Contribution #

Flart is Open Source. We love contributors! Check our GitHub Issues to see what we're working on.

Created with ❤️ by the Heebu Team.