Flutter 应用程序和 Web 自适应 UI 布局

Question

我一直在开发 flutter 移动应用程序，已经向 AppStore/PlayStore 发布了多个版本。 该代码是为移动应用程序设计而构建的。

我目前正在寻求使用相同代码库的支持网站。

同时支持移动应用和 Web 的问题之一是 UI 布局不同。

例如:我们将在网络中使用顶部栏操作，而在移动应用程序中使用底部栏导航。 我想我可以使用 kIsWeb 来创建不同的 appBar 和 BottomNavigationBar 对于每个屏幕中的每个 Scaffold 小部件。

if (kIsWeb){
\\ web code
}
else{
\\ app code
}

构建适用于使用相同代码库的移动应用和网站的自适应 UI 的最佳策略是什么？

Answer 1

根据您的用例修改此内容:)

1.) 定义约束

const mobileWidth = 480;
const tabletWidth = 900;
const desktopWidth = 1180;

2.) 创建一个响应式小部件，根据屏幕尺寸更改布局

class ResponsiveLayout extends StatelessWidget {
  const ResponsiveLayout({
    Key? key,
    this.mobileView,
    this.tabletView,
    this.desktopView,
  }) : super(key: key);
  final Widget? mobileView;
  final Widget? tabletView;
  final Widget? desktopView;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, dimens) {
      if (dimens.maxWidth <= tabletWidth) {
        if (dimens.maxWidth <= mobileWidth) {
          return mobileView ?? Text("Mobile view");
        } else {
          return tabletView ?? Text("Tablet view");
        }
      } else {
        return desktopView ?? Text("Desktop view");
      }
    });
  }
}

3.) 在您想要的地方使用此响应式小部件

class CourseScreen extends StatelessWidget {
  const CourseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const ResponsiveLayout(
      mobileView: CourseMobileScreen(),
      tabletView: CourseTabletScreen(),
      desktopView: CourseDesktopScreen(),
    );
  }
}