用到的库

这款开源的库,可以实现不同屏幕尺寸的适配.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.

[其他参考文章](https://medium.com/flutter-community/easy-responsive-ui-in-flutter-web-flutter-web-series-part-2-ace93f49a512)