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-

Libraries

flutter_responsive_grid