Flutter适配移动端和web不同尺寸

用到的库

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

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/16540.html

发表评论

登录后才能评论