Flutter:Reponsive Design

Build Your Responsive Flutter Layout like A Pro

Responsive grid properties include:

  • xs stands for extra small (for phones — screens less than 768px wide)
  • sm stands for small (for tablets — screens equal to or greater than 768px wide)
  • md stands for medium (for small laptops — screens equal to or greater than 992px wide)
  • lg stands for large (for laptops and desktops — screens equal to or greater than 1200px wide)
Image for post
Image for post

修改 pubspec.yaml

//在dependencies中加入responsive_grid: ^1.0.1
dependencies:
responsive_grid: ^1.0.1

修改lib/main.dart

import 'package:flutter/material.dart';
import 'package:responsive_grid/responsive_grid.dart';

void main() => runApp(MaterialApp(
title: 'Responsive Layout',
home: HomePage(),
debugShowCheckedModeBanner: false,
),
);

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Responsive Layout"),
centerTitle: true,
),
body: SingleChildScrollView(
child: Container(
child:

ResponsiveGridRow(
children: [
ResponsiveGridCol(
lg: 12,
child: Container(
height: 100,
alignment: Alignment.center,
color: Colors.purple,
child: Text('Colunm 1', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
),
),
ResponsiveGridCol(
xs: 6,
md: 3,
child: Container(
height: 100,
alignment: Alignment.center,
color: Colors.green,
child: Text("Colunm 2, Row 1", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
),
),
ResponsiveGridCol(
xs: 6,
md: 3,
child: Container(
height: 100,
alignment: Alignment.center,
color: Colors.orange,
child: Text("Colunm 2, Row 2", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
),
),
ResponsiveGridCol(
xs: 6,
md: 3,
child: Container(
height: 100,
alignment: Alignment.center,
color: Colors.red,
child: Text("Colunm 3, Row 1", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),),
),
),
ResponsiveGridCol(
xs: 6,
md: 3,
child: Container(
height: 100,
alignment: Alignment.center,
color: Colors.blue,
child: Text("Colunm 3, Row 2", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),),
),
),
ResponsiveGridCol(
child: Container(
height: 100,
alignment: Alignment.center,
color: Colors.yellow,
child: Text("Colunm 4", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),),
),
),
ResponsiveGridCol(
child: Container(
height: 100,
alignment: Alignment.center,
color: Colors.red,
child: Text("Colunm 5", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),),
),
),
ResponsiveGridCol(
xs: 6,
md: 3,
child: Container(
height: 100,
alignment: Alignment.center,
color: Colors.green,
child: Text("Colunm 6, Row 1", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
),
),
ResponsiveGridCol(
xs: 6,
md: 3,
child: Container(
height: 100,
alignment: Alignment.center,
color: Colors.orange,
child: Text("Colunm 6, Row 2", style: TextStyle(fontSize: 18, fontWeight: FontWeight.w500)),
),
),
]
),

),
),
);
}
}

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store