用到的库
这款开源的库,能够实现不同屏幕尺寸的适配.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.
其余参考文章