flutterwind

Description:

flutterwind

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",
),
],
),
)
copied to clipboard