flutter pub add responsive根據套件公開資料產生的選型評估，僅供參考。
響應式套件簡化了在Flutter應用中跨行動裝置、桌面與網頁平台建立適應性使用者介面的過程。它讓開發者能根據螢幕尺寸與裝置方向定義不同的組件大小與版面配置，確保一致且最佳的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,
),
],
)
],
),
),
);
}
}
暫無相關資料。