I have been working on flutter mobile apps, already released multiple version to AppStore/PlayStore. The code is built for mobile app design.

I am currently looking to support website using the same codebase.

One of the issue with supporting both mobile apps and web is that the UI layout is different.

For example: We will have top bar actions in web but bottom bar navigation in mobile apps. I think I can use kIsWeb like below to create different appBar and bottomNavigationBar for each Scaffold widget in each screen.

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

What is the best strategy to build adaptive UI which works for mobile apps and website using same codebase?

CodePudding user response：

Most likely UI depends on screen size rather than it is running on web or not. The web page can be resized and needed to maintain UI. Mostly I prefer using LayoutBuilder for responsiveness. You can also find some good package on pub. While there are some different functionality/feature depends on between os app/ web app, in this case I use kIsWeb. A web app can be used by android browser.

You can check more about adaptive-responsive design.

CodePudding user response：

Modify this according to your use case :)

1.) Define constraints

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

2.) Create a Responsive widget which change layout according to screen size

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.) Use this responsive widget where you want

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(),
    );
  }
}