flutterwind 0.0.1 copy "flutterwind: ^0.0.1" to clipboard
flutterwind: ^0.0.1 copied to clipboard

Style your Flutter widgets like Tailwind CSS.

Flutterwind #

Style your Flutter widgets with TailwindCSS-like syntax.

Example #

// Example: A simple card

// Without Flutterwind - 39 lines of code
Container(
  padding: EdgeInsets.all(8),
  margin: EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text(
        'Hello World',
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
          color: Colors.black,
        ),
      ),
      const SizedBox(height: 8),
      Text(
        'This is a simple card',
        style: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.normal,
          color: Colors.grey.shade600,
        ),
      ),
    ],
  ),
)

// With Flutterwind - 17 lines of code
Container.fw(
  style: "p-8 m-8 bg-white rounded-lg shadow-md",
  child: Column.fw(
    style: "items-center justify-center",
    children: [
      Text.fw(
        "Hello World",
        style: "text-2xl font-bold text-black",
      ),
      const SizedBox(height: 8),
      Text.fw(
        "This is a simple card",
        style: "text-base font-normal text-gray-600",
      ),
    ],
  ),
)
1
likes
150
points
18
downloads

Publisher

unverified uploader

Weekly Downloads

Style your Flutter widgets like Tailwind CSS.

Homepage
Repository (GitHub)

Documentation

API reference

License

MIT (license)

More

Packages that depend on flutterwind