flutter_responsive_grid 1.0.5 icon indicating copy to clipboard operation
flutter_responsive_grid: ^1.0.5 copied to clipboard

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-
3
likes
90
pub points
35%
popularity

Publisher

unverified uploader

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

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_responsive_grid