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

Overview

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

Android Mobile

Android Wear

Android TV

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

Default Relationship

Please raise a issue/provide feedback in github repository.

Licence

Apache License 2.0

You might also like...

A script to disable and re-enable CORS checks for Flutter's Chrome instance

A script to disable and re-enable CORS checks for Flutter's Chrome instance Note This script only disables CORS checks for local testing, and will not

Nov 15, 2022

Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui.

Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui.

tenon_mortise Easily build your Widgets, Avoid parenthesis nesting, easy to build UI, A little like swift-ui. Getting Started Usage To use this plugin

Dec 15, 2022

Mangato - An Android & IOS app to read manga on your phone without ads.

Mangato - An Android & IOS app to read manga on your phone without ads.

Mangato Read your favorite Japanese manga on Mangato including Attack on Titan, Fairy Tail, The Seven Deadly Sins, Fuuka, One Piece, and more. WARNING

Nov 21, 2022

📦flutter localstorage for ios/android/desktop/web

Localstorage Simple json file-based storage for flutter Installation Add dependency to pubspec.yaml dependencies: ... localstorage: ^4.0.0+1 Run i

Dec 16, 2022

A mobile application that visualizes various sorting algorithms such as Bubble sort, selection sort, quick sort etc. The sorting process is visualized as the rearrangement of vertical lines of different lengths from shortest to tallest.

A mobile application that visualizes various sorting algorithms such as Bubble sort, selection sort, quick sort etc. The sorting process is visualized as the rearrangement of vertical lines of different lengths from shortest to tallest.

Sorting Visualiser This is a simple sorting visualisation app built using the flutter framework. The user can select sorting algorithms like Bubble so

May 13, 2022

Creating terminal-based UIs and games in Dart should be accessible and fun!

Creating terminal-based UIs and games in Dart should be accessible and fun!

griddle Griddle simplifies the concept of creating 2D games or UI applications within a 2D-matrix, or grid, which in turn makes it a suitable cross-pl

Dec 19, 2022

Todo app - contains same UI and different state management techniques (without using StatefulWidget)

Todo app - contains same UI and different state management techniques (without using StatefulWidget)

This repo contains same UI and different state management techniques (without using StatefulWidget) to compare and prefer based on your coding style.

May 19, 2022

This plugin allows Flutter desktop apps to Retrieve information about screen size, displays, cursor position, etc.

screen_retriever This plugin allows Flutter desktop apps to Retrieve information about screen size, displays, cursor position, etc. screen_retriever P

Dec 6, 2022

Another way to build Flutter applications for mobile, web and desktop using the powerful of MVC Design Pattern.

Another way to build Flutter applications for mobile, web and desktop using the powerful of MVC Design Pattern.

Karee Another way to build Flutter applications for mobile, web and desktop using the powerful of MVC Design Pattern. + = About Karee Karee is a frame

Sep 29, 2022
Owner
Rahul Kumar
Rahul Kumar
Simple tool to open WhatsApp chat without saving the number, developed using Google's Flutter Framework. for Android/ IOS/ Desktop/ Web

OpenWp Simple tool to open WhatsApp chat without saving the number Explore the docs » View Demo · Report Bug · Request Feature Table of Contents About

Swarup Bhanja Chowdhury 15 Nov 1, 2022
null 1 Jan 20, 2022
My collection of bricks to help you build projects faster or nothing else will 😆

My collection of bricks to help you build projects faster or nothing else will ?? Bricks ?? Brick Description Version annoying_analysis_options A bric

Prince Nna 4 Aug 20, 2022
Encode App-Dev is a open source project which contains different projects of Application development, Android development, IOS development, Flutter, Kotlin, Dart, Java, Swift etc.

HACKTOBERFEST 2022 Encode App-Dev is an open source project which contains different projects of Application development, Android development, IOS dev

null 4 Dec 4, 2022
My flutter (android, ios) UI design examples 🎈 - user profile UIs, food order ui, splashscreen, mask widget usage, settings page ui

Flutter UI Design Examples ?? This repository contains the flutter ui designs I designed while learning. Doctor Appointment App UI Packages in use: fl

Aleyna Eser 23 Nov 14, 2022
A Flutter widget that checks and displays the version status of application and you can easily guide user to update your app

A most easily usable Flutter widget about application version check! 1. About 1.

Kato Shinya 1 Dec 16, 2021
This is the UI of Furniture App made using Flutter SDK. The original design was made by someone else in dribble and I tried to create the screens of that UI using Flutter

Furniture App - Responsive Flutter UI Watch it on YouTube Responsive UI Fetch Data From API Custom Loading Indicator Packages we are using: flutter_sv

null 6 Dec 3, 2022
Chance Dart is a free Open Source project that lets you create random strings, integers, and other things to help with tiresome tasks, especially when building automated tests or wherever else you require anything random.

Chance Dart Random generator helper for Dart Homepage • Documentation Overview Chance Dart is a free Open Source project that lets you create random s

Ayotomide 55 Dec 27, 2022
A pure Dart utility library that checks for an internet connection by opening a socket to a list of specified addresses, each with individual port and timeout. Defaults are provided for convenience.

data_connection_checker A pure Dart utility library that checks for an internet connection by opening a socket to a list of specified addresses, each

Kristiyan Mitev 103 Nov 29, 2022