用到的库

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

其余参考文章