Flutter 適配移動端和web不同尺寸

用到的庫

這款開源的庫,可以實現(xiàn)不同屏幕尺寸的適配.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)
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容