Flutter apps and web adaptive UI layout

Question

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?

score 2 · Answer 1 · answered Sep 18 '22 at 09:58

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

score 1 · Answer 2 · answered Sep 18 '22 at 05:31

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.

score 1 · Answer 3 · answered Sep 20 '22 at 07:30

You should try responsive_framework pkg. I have used it in my Single code base and created different screen resolution breakpoints as per my use cases.

For ex.

builder: (context, widget) => ResponsiveWrapper.builder(
               BouncingScrollWrapper.builder(context, widget),
               maxWidth:  MediaQuery.of(context).size.width/3,
               minWidth: 450,
               defaultScale: true,
               breakpoints: [
                 ResponsiveBreakpoint.resize(450, name: MOBILE),
                 ResponsiveBreakpoint.autoScale(800, name: TABLET),
                 ResponsiveBreakpoint.autoScale(1000, name: TABLET),
                 ResponsiveBreakpoint.resize(1200, name: DESKTOP),
                 ResponsiveBreakpoint.autoScale(2460, name: "4K"),
               ],
               background: Container(color: Color(0xFFF5F5F5))
 ),

Accordingly, use breakpoints for your UI.

Or

You can create your own screen configs using MediaQuery in a separate file e.g., SizeConfig

For ex.

For Mobile > max_width x maxheight can be 300 x 480. likewise for Tablet and Desktop. Then you can use it to inflate list items in GridView (for crossAxisCount) and ListView items

Flutter apps and web adaptive UI layout

3 Answers3

Linked