flartdart 1.2.0

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

Flart 🎨

A high-performance, Flutter-inspired UI framework for pure Dart Web applications.

Build stunning, responsive, and interactive web applications using the familiar declarative syntax of Flutter—all in 100% pure Dart. Flart bridges the gap between the power of web technologies (HTML/CSS/JS) and the developer experience of Flutter.

---

🚀 Why Flart?

• 🎯 Flutter-Native Syntax: If you know Flutter, you know Flart. Use Row, Column, Container, Scaffold, and StatefulWidget just like you do in Flutter.
• 🏗️ 100+ Pre-built Widgets: From basic layout components to complex pickers, media players, and animated transitions.
• ⚙️ Zero External Dependencies: A lightweight core built on top of standard web APIs.
• 🛠️ Integrated CLI: Generate project templates instantly with the flartdart command.
• 🎨 Infinite Styling: Native support for BoxDecoration, TextStyle, and a unique rawCss property for surgical style overrides.
• ⚡ Performance First: Lightweight HTML/CSS rendering with optimized DOM updates.
• 📱 Responsive by Design: Built-in MediaQuery and flexible layout widgets for seamless mobile & desktop support.

---

🛠️ CLI Tool

The fastest way to get started is by using the Flartdart CLI.

Installation

dart pub global activate flartdart

Usage

# Create a new project
flartdart create my_awesome_app

# Run your app
cd my_awesome_app
dart pub get
dart run build_runner serve

---

📦 Installation

Add flartdart to your pubspec.yaml:

dependencies:
  flartdart: ^1.0.0

Then, fetch the dependencies:

dart pub get

---

🎬 Quick Start

The Classic "Hello World"

import 'package:flartdart/flartdart.dart';

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

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return FDMaterialApp(
      title: 'My First Flart App',
      home: FDScaffold(
        appBar: FDAppBar(
          title: FDText('Hello Flart!'),
          backgroundColor: FlartColors.blue,
        ),
        body: FDCenter(
          child: FDColumn(
            mainAxisAlignment: AxisAlignment.center,
            children: [
              FDContainer(
                padding: EdgeInsets.all(20),
                decoration: BoxDecoration(
                  color: FlartColors.blueGrey,
                  borderRadius: BorderRadius.circular(12),
                  boxShadow: [
                    BoxShadow(color: '#00000033', blurRadius: 10)
                  ],
                ),
                child: FDText(
                  'Welcome to the future of Dart Web 🚀',
                  style: TextStyle(color: FlartColors.white, fontSize: 20),
                ),
              ),
              FDSizedBox(height: 24),
              FDElevatedButton(
                onPressed: () => print('Let\'s build something!'),
                child: FDText('Get Started'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

🧩 Comprehensive Widget Ecosystem

Flart is divided into logical categories to help you build everything from simple blogs to complex dashboards.

🏗️ Structure & Layout

• FDScaffold, FDAppBar, FDDrawer, FDBottomNavigationBar
• FDContainer, FDCard, FDColumn, FDRow, FDStack, FDWrap
• FDListView, FDGridView, FDSingleChildScrollView

✍️ Text & Typography

• FDText, FDRichText, FDTextSpan, FDLinkText, FDSelectableText

🖱️ Buttons & Interaction

• FDElevatedButton, FDTextButton, FDIconButton, FDGestureDetector

📝 Forms & Inputs

• FDTextField, FDTextFormField, TextArea, FDCheckbox, FDSwitch, FDSlider
• AutocompleteField, ColorPicker, FileUpload

📅 Pickers

• FDDatePicker, FDTimePicker, FDDateRangePicker, FDMonthPicker, FDWeekPicker, DateTimePicker

🎬 Animations & Effects

• AnimatedContainer, AnimatedOpacity, AnimatedScale, AnimatedRotation, FadeIn
• AnimationController, Tween, Curves

🎥 Media & Painting

• VideoPlayer, AudioPlayer, YouTubePlayer, MapEmbed
• FDCustomPaint, FDSvgPicture

---

🏗️ Architecture: The Bridge

Flart works by transpiling Dart widget structures into highly optimized HTML, CSS, and interactive JavaScript.

1. Declaration: You define your UI in Dart using a nested widget tree.
2. Rendering: Each widget implements a render() method that returns a string of HTML/CSS.
3. Interactivity: Event callbacks (like onPressed) are managed via a CallbackManager that bridges JavaScript events back into Dart logic.
4. State: StatefulWidget provides a familiar lifecycle (initState, setState, dispose) for managing dynamic data.

---

📖 Resource Links

• 📚 Detailed Widget Guide: Exhaustive reference with code samples for every widget.
• 🤝 Contributing: Learn how to help us improve Flart.
• 🚀 Example Projects: Real-world implementations and demos.
• 📄 Changelog: Stay updated with the latest releases.

---

🤝 Contributing

We love contributions! Whether it's fixing a bug, adding a new widget, or improving the documentation, your help is welcome. Please check out our Contributing Guidelines.

---

📜 License

Flart is open-source software licensed under the MIT License. See the LICENSE file for more information.

---

Built with ❤️ for the Dart Community