css 1.0.5

A CSS library for Flutter that facilitates minimal code styling of widgets, simplifying the development of consistent and elegant UI.

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

• see all font family here: [https://fonts.google.com]

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