flutter_responsive_grid 1.0.5

Flutter Android iOS web

A responsive grid layout for Flutter. With ResponsiveGrid and ResponsiveGridItem you can get the same behavior of Boostrap Grid System

responsive_grid #

Responsive grid for Flutter

pic1 pic2

Getting Started #

Add ResponsiveGridItem inside a ResponsiveGrid

ResponsiveGrid(
  spacing: 16,
  runSpacing: 16,
  children: [
    ResponsiveGridItem(
      lg: 12,
      child: Container(
        padding: EdgeInsets.all(8.0),
        color: Colors.blue,
        child: Center(child: Text("LG 12")),
      ),
    ),
    ResponsiveGridItem(
      xs: 6,
      sm: 3,
      child: Container(
        padding: EdgeInsets.all(8.0),
        color: Colors.orange,
        child: Center(child: Text("XS 6\nSM 3")),
      ),
    ),
    ResponsiveGridItem(
      xs: 6,
      sm: 3,
      child: Container(
        padding: EdgeInsets.all(8.0),
        color: Colors.green,
        child: Center(child: Text("XS 6\nSM 3")),
      ),
    ),
    ResponsiveGridItem(
      xs: 6,
      sm: 2,
      child: Container(
        padding: EdgeInsets.all(8.0),
        color: Colors.purple,
        child: Center(child: Text("XS 6\nSM 2")),
      ),
    ),
    ResponsiveGridItem(
      xs: 6,
      sm: 2,
      child: Container(
        padding: EdgeInsets.all(8.0),
        color: Colors.yellow,
        child: Center(child: Text("XS 6\nSM 2")),
      ),
    ),
    ResponsiveGridItem(
      xs: 6,
      sm: 2,
      child: Container(
        padding: EdgeInsets.all(8.0),
        color: Colors.grey,
        child: Center(child: Text("XS 6\nSM 2")),
      ),
    ),
    ResponsiveGridItem(
      xs: 6,
      sm: 2,
      child: Container(
        padding: EdgeInsets.all(8.0),
        color: Colors.red,
        child: Center(child: Text("XS 6\nSM 2")),
      ),
    ),
  ],
)

Parameters #

ResponsiveGrid

Parameter nameTypeDescriptionRequiredDefault value
childrenListItems to be shownyes-
colCountintCol count of the grid systemno12
runSpacingdoubleSpace betwen each rowno0.0
spacingdoubleSpace betwen each colno0.0
runSpacingdoubleSpace betwen each rowno0.0
useIntrinsicHeightboolEach row use intrinsict height or notnotrue
mainAxisAlignmentMainAxisAlignmentMain axis alignmentnoMainAxisAlignment.center
crossAxisAlignmentCrossAxisAlignmentCross axis alignmentnoif 'useIntrinsicHeight' is true the default value is CrossAxisAlignment.stretch, else is CrossAxisAlignment.start

ResponsiveGridItem

Parameter nameTypeDescriptionRequiredDefault value
xsintCol count to XS screensno-
smintCol count to SM screensno-
mdintCol count to MD screensno-
lgintCol count to LG screensno-
xlintCol count to XL screensno-
childWidgetWidget to be shownyes-

Screen size #

TypeMax Width
xs576
sm768
md992
lg1200
xl-
2
likes
80
pub points
53%
popularity

A responsive grid layout for Flutter. With ResponsiveGrid and ResponsiveGridItem you can get the same behavior of Boostrap Grid System

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

fede.amura@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_responsive_grid