flartdart 1.4.0

A comprehensive Flutter-inspired UI framework for Dart Web applications with 100+ widgets, animations, forms, and media support.

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.3.0)

• 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.
• Premium UI Components: FDSkeleton shimmer loaders, FDSliverAppBar with scroll effects, and FDSnackBar.
• Flutter-Style Canvas: A high-level Canvas and Paint API for custom 2D drawing.

---

🚀 Getting Started

1. Installation

In your pubspec.yaml:

dependencies:
  flartdart: ^1.3.0

2. A Simple Reactive App

import 'package:flartdart/flartdart.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FDMaterialApp(
      title: 'Flart App',
      home: const HomePage(),
    );
  }
}

---

🏛️ 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}');
  },
)

🔨 Builders

Need a new context or theme data deeper in the tree? Use FDBuilder:

FDBuilder(
  builder: (context) {
    final theme = Theme.of(context);
    return FDContainer(color: theme.primaryColor);
  },
)

---

�🏗️ Building for Production

Flart is designed to be lightweight. To bundle your app:

1. Compile to Javascript:

   dart compile js -O2 web/main.dart -o build/main.js
   

2. Optimize: Use the -O2 or -O4 flags for tree-shaking and minification.

---

📄 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.