Adaptive Design

Of course, we support adaptive design as in Flutter the same application can be compiled as "native" but also as web application. There we have built our own package.

m8ty_adaptive_design

Depending on scenario many of the screens may fit fine for the target device. Only in some exception cases, we may override the screen or elements of the screen. Therefore, we have many of different mixins simplifying target screen override.

Here a simple example:

class MyWidget extends StatelessWidget
    with PlatformWearMixin, PlatformWebMixin, PlatformAndroidMixin, PlatformAndroidTVMixin {
  const MyWidget({super.key});

  @override
  Widget buildDefault(BuildContext context) {
    return const Text("default");
  }

  @override
  Widget buildAndroidTV(BuildContext context) {
    return const Text("androidTV");
  }

  @override
  Widget buildAndroid(BuildContext context) {
    return const Text("android");
  }

  @override
  Widget buildWeb(BuildContext context) {
    return const Text("web");
  }

  @override
  Widget buildWear(BuildContext context, WearShape shape) {
    return const Text("wear");
  }
}

As you can see, the default build method does not exist anymore. There is a buildDefault method which should be used for the default Widget definition. Then depending on the used mixin you have to return appropriate Widget in the specific method. It is up to you to decide for which target platform you do not want to overwrite the widget and as you can see, combinations of mixins are also possible.

Mixin	Description
PlatformAndroidMixin	For all Android devices
PlatformAndroidTabletMixin	For Android Tablet
PlatformAndroidTVMixin	Android TV
PlatformDesktopMacOSMixin	Desktop Mac OS
PlatformDesktopMixin	Desktop in generally. Can be Linux, Windows etc.
PlatformIOSMixin	IOS Phone
PlatformIOSTabletMixin	iPad
PlatformIOSTVMixin	Apple TV
PlatformWearMixin	All Wear devices
PlatformWearWatchOSMixin	Apple Watch
PlatformWearOSMixin	Android Wear
PlatformWebDesktopMixin	Web Desktop
PlatformWebMixin	Web in generally
PlatformWebTabletMixin	Web Tablet

Last modified: 10 December 2023