flutter pub add responsive基于插件公开信息、社区数据与项目使用情况整理的选型参考。
响应式包简化了在Flutter应用中跨移动、桌面和Web平台创建自适应用户界面的过程。它使开发者能够根据屏幕尺寸和设备方向定义不同的控件大小和布局，确保一致且最优的UI体验。通过直观的API，该包简化了响应式设计，无需复杂的条件逻辑或手动媒体查询处理。对于针对具有不同屏幕尺寸的多种设备形态的应用程序而言，该包尤其有用。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
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](mailto:victor.guardiola@gmail.com) 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.3
You 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,
),
],
)
],
),
),
);
}
}
暂无相关数据。