Add Web Support to your flutter app

ApparenceKit CLI has a command to add the web support to your flutter app. This will generate a web folder with all the necessary files and dependencies to run your app on the web.

Open a terminal and run the following command in the root of your project:

dart pub global run apparence_cli web --name=test .

Run your app on the web

To run your app on the web, you need to run the following command:

flutter run -d chrome --dart-define=ENV=dev

Don't use dart:io

Dart io package is not supported on the web. It's recommended to use the universal_io package instead that will automatically use the correct package depending on the platform.

Don't use import 'dart:io'. Use import 'package:universal_io/io.dart'.

How to create a responsive layout

Flutter has powerful tools to create responsive layouts. The first is the LayoutBuilder widget. It allows you to get the available space and to adapt your layout to it.

The second is the MediaQuery widget. It allows you to get the screen size and to adapt your layout to it.

I highly recommend you to use the LayoutBuilder widget. It's more flexible and more powerful.

ResponsiveLayoutBuilder

To help you to create responsive layouts, we have created a ResponsiveLayoutBuilder widget.

return ResponsiveLayout(
    small: ...,
    medium: ...,
    large: ...,
    xlarge: ...,
);

It uses the [LayoutBuilder] widget to get the current device width and returns the widget that matches the current device type. Breakpoints are:

  • small: < 768
  • medium: >= 768
  • large: >= 1024
  • xlarge: >= 1280

👉 It's designed as mobile first meaning that if you don't provide a widget for a specific device type, it will fallback to the previous one. (the small widget is required)

Handling navigation for web

The navigation is handled by the Bart plugin (see here). The advantage of using Bart is that you can use the same code for mobile and web. And still have a working navigation without any code change. It allows you to handle the navigation from routes and to use the browser back button. Check the Routes and navigation documentation if you want to know more about navigation.

For web we let you choose between two navigation modes: You can choose to use the material sidebar NavigationRail

Like this

return BartScaffold(
    routesBuilder: subRoutes,
    showBottomBarOnStart: true,
    bottomBar: BartBottomBar.material3(),
    sideBarOptions: RailSideBarOptions(
        extended: true,
        gravity: Gravity.left,
    ),
)

(To change the theme you can do it like all regular material theme in the ThemeData).

Or you can make your own

return BartScaffold(
    routesBuilder: subRoutes,
    showBottomBarOnStart: true,
    bottomBar: BartBottomBar.material3(),
    sideBarOptions: CustomSideBarOptions(
        gravity: Gravity.left,
        sideBarBuilder: ((onTapItem, currentItem) => ...)
    ),
)

It's up to you to choose the one you prefer.