This extension provides a convenient way to style Flutter widgets using CSS-like properties. It offers options for setting padding, margin, colors, fonts, events, icons, borders, and more.


To use this extension, simply import it and apply it to your widget using the css method. Here's an example:

import 'package:flutter/material.dart';
import 'package:css/css.dart';

void main() {
  runApp(MaterialApp(home: Main(), debugShowCheckedModeBanner: false));

class Main extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('css Demo'),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
            w: double.infinity,
            p: 0,
            my: 10,
            r: 0,
            borderColor: Colors.teal,
            borderWidth: 1,
            fontSize: 20,
            fontWeight: FontWeight.bold,
            icon: Icon(Icons.dashboard_rounded),
            onPressed: () => print("onPressed"),
            onLongPress: () => print("onLongPress"),
            onHover: (bool) {
              if (bool) print("onHover $bool");
              if (!bool) print("onHover $bool");

Supported Properties

Width and Height

Property Type Description Example
w double Width w: double.infinity
h double Height h: 100

Padding and Margin

Property Type Description Example
p double Padding (all sides) p: 16
px double Horizontal padding px: 10
py double Vertical padding py: 20
pt double Top padding pt: 8
pr double Right padding pr: 12
pb double Bottom padding pb: 8
pl double Left padding pl: 12
m double Margin (all sides) m: 16
mx double Horizontal margin mx: 10
my double Vertical margin my: 20
mt double Top margin mt: 8
mr double Right margin mr: 12
mb double Bottom margin mb: 8
ml double Left margin ml: 12


Property Type Description Example
cb dynamic Background color cb: Colors.yellow
ct dynamic Text color ct: Colors.blue


Property Type Description Example
fontSize double Font size fontSize: 16
fontFamily string Font family fontFamily: "Poppins"
fontWeight dynamic Font weight fontWeight: FontWeight.bold


Property Type Description Example
onPressed function On press event onPressed: ()=>print("onPressed")
onLongPress function On long press event onLongPress: ()=>print("onLongPress")
onHover function On hover event onHover: (bool)=>bool? print("onHover $bool"):print("onHover $bool")


Property Type Description Example
icon widget Icon widget icon: Icon(Icons.add)


Property Type Description Example
borderColor dynamic Border color borderColor: Colors.teal
borderWidth double Border width borderWidth: 2
r double Border radius r: 8


Don't forget to like this ๐Ÿ‘at https://pub.dev/packages/css