Build different UIs for Android, iOS, Web, Desktop, Wear, TV etc without the if/else checks in your widgets

platform_widget_mixin

Plugin to decouple widgets based on various platform properties.

Features

Build different UIs for Android, iOS, Web, Desktop, Wear, TV etc without the if/else checks in your widgets.

Getting started

pub add platform_widget_mixin

Example Screenshots

Example code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:platform_widget_mixin/platform_widget_mixin.dart';
import 'package:wear/wear.dart';

void main() async {
  await initialize();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget with PlatformWidgetMixin {
  const MyApp({super.key});

  @override
  Widget buildAndroid(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.purple),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: child,
    );
  }

  @override
  Widget buildIOS(BuildContext context) {
    return CupertinoApp(
      theme: const CupertinoThemeData(primaryColor: Colors.purple),
      home: child,
    );
  }

  @override
  Widget? get child => const HomePage();
}

class HomePage extends StatelessWidget with PlatformWidgetMixin {
  const HomePage({super.key});

  @override
  Widget buildAndroid(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const _ToolbarTitle(),
      ),
      body: child,
    );
  }

  @override
  Widget buildIOS(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: const CupertinoNavigationBar(
          middle: _ToolbarTitle(),
        ),
        child: child);
  }

  @override
  Widget buildWear(BuildContext context, WearShape shape) {
    return Scaffold(
      body: child,
    );
  }

  @override
  Widget get child => const Center(child: PlatformNameWidget());
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('Example App');
  }
}

class PlatformNameWidget extends StatefulWidget {
  const PlatformNameWidget({super.key});

  @override
  State<PlatformNameWidget> createState() => _PlatformNameWidgetState();
}

class _PlatformNameWidgetState extends State<PlatformNameWidget>
    with PlatformWidgetMixin {
  @override
  Widget buildAndroid(BuildContext context) => const Text('Android mobile');

  @override
  Widget buildIOS(BuildContext context) => const Text('iPhone');

  @override
  Widget buildIPad(BuildContext context) => const Text('iPad');

  @override
  Widget buildMacOS(BuildContext context) => const Text('Mac');

  @override
  Widget buildAndroidTV(BuildContext context) => const Text('Android TV');

  @override
  Widget buildAndroidTablet(BuildContext context) =>
      const Text('Android Tablet');

  @override
  Widget buildDesktop(BuildContext context) => const Text('Desktop');

  @override
  Widget buildTV(BuildContext context) => const Text('TV');

  @override
  Widget buildTablet(BuildContext context) => const Text('Tablet');

  @override
  Widget buildTvOS(BuildContext context) => const Text('Apple TV');

  @override
  Widget buildWeb(BuildContext context) => const Text('Web');

  @override
  Widget buildWebDesktop(BuildContext context) => const Text('Web Desktop');

  @override
  Widget buildWebMobile(BuildContext context) => const Text('Web Mobile');

  @override
  Widget buildWebTablet(BuildContext context) => const Text('Web Tablet');

  @override
  Widget buildWear(BuildContext context, WearShape wearShape) =>
      const Text('Wear');

  @override
  Widget buildWatchOS(BuildContext context, WearShape shape) =>
      const Text('Apple Watch');

  @override
  Widget buildWearOS(BuildContext context, WearShape shape) =>
      const Text('Android Wear');
}

Additional information

Default relationship

Please raise a issue/provide feedback in github repository.

Licence

Apache License 2.0

GitHub

View Github