CSS

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.

Usage

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 {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('css Demo'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(),
          Text("text").css(
            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

Colors

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

Fonts

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

Events

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")

Icon

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

Borders

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

Notes

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

Libraries

css