用到的库
这款开源的库,可以实现不同屏幕尺寸的适配.responsive_builder
使用方法
1. pubspec.yaml
引入库 responsive_builder: ^0.3.0
2. 代码引用 import 'package:responsive_builder/responsive_builder.dart';
3. 像使用普通控件一样,使用如下代码:
ResponsiveBuilder(
builder: (context, sizingInformation) {
if (sizingInformation.deviceScreenType ==
DeviceScreenType.desktop) {
return Container(
color: Colors.blue,
child: Text("desktop"),
);
}
if (sizingInformation.deviceScreenType ==
DeviceScreenType.tablet) {
return Container(
color: Colors.red,
child: Text("tablet"),
);
}
if (sizingInformation.deviceScreenType ==
DeviceScreenType.watch) {
return Container(
color: Colors.yellow,
child: Text("watch"),
);
}
return Container(
color: Colors.green,
child: Text("mobile"),
);
},
),
以上代码,可以在不同尺寸的情况下,返回不同的Container.