Provide a easy way to make responsive UI for Flutter Applications in mobile, desktop and web, allow different widget size for each screen size and device orientation..
Made by Marvin Quevedo and Víctor Guardiola of FlutterEs Community.
Este paquete ha sido creado por la comunidad de Flutter en Español, si deseas ser parte de nosotros, puedes visitar cualquiera de estos links:
dependencies:
responsive: 0.2.3You have two ways of use it:
You can use the ReponsiveRow widget and the FlexResponsive widget to make the layout
or
you can use the static method Responsive.calcColumns to assign the correct number of columns to a widget like a GridView.
import 'package:flutter/material.dart';
import 'package:responsive/flex_widget.dart';
import 'package:responsive/responsive_row.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(),
body: ListView(
children: <Widget>[
ResponsiveRow(
columnsCount: 12,
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
FlexWidget(
child: Container(
height: 100,
color: Colors.amber,
),
xs: 4,
xsOffset: 2,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
xsLandOffset: 0,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.red,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.indigo,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.lime,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.teal,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.green,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.deepOrange,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.amber,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.grey,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.black,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.brown,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
FlexWidget(
child: Container(
height: 100,
color: Colors.cyan,
),
xs: 6,
sm: 3,
md: 2,
lg: 1,
xsLand: 4,
smLand: 2,
mdLand: 1,
lgLand: 1,
),
],
)
],
),
),
);
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent