Target the specific design of Material for Android and Cupertino for iOS widgets through a common set of Platform aware widgets

Last update: Jun 26, 2022

Flutter Platform Widgets

Flutter Platform Widgets

Pub GitHub

This project is an attempt to see if it is possible to create widgets that are platform aware. Currently in order to render targeted Material or Cupertino device specific styles, you need to either conditionally check the platform or create a set of widgets to render differently depending on the running platform.

This package supports the Stable release as a full released version.

Beta or Dev channels might be supported when there is a pre-release version. Please check the CHANGELOG for version compatibility version.

Due to Master being in rapid development this package is unable to support Master. If this support is required then it is best to fork the repo and locally reference the forked version where changes can be made appropriately.

Installation

pub.dev: https://pub.dev/packages/flutter_platform_widgets

How it works

The flutter ThemeData object used with the Theme widget has a platform property. This defaults to TargetPlatform.android on Android and TargetPlatform.ios on iOS (also for macos etc), but when creating a ThemeData object, it can be set programmatically. Calling Theme.of(context).platform will return the current platform. Several Flutter library widgets use this field to change how they are rendered, and all of the Flutter Platform Widgets library widgets use this field to render the platform specific versions of things.

Configuration

See PlatformProvider for configuration options.

Widgets

These set of widgets allow for rendering based on the target platform using a single cross platform set of widget.

alt text

alt text

Each PlatformWidget provides common properties directly as constructor arguments. If required further customization can be achieved by using the platform widget builder. See the Enhance section of each widget.

PlatformWidget

A widget that will render either the material widget or cupertino widget based on the target platform. The widgets themselves do not need to be specifically Material or Cupertino.

return PlatformWidget(
  cupertino: (_, __) => Icon(CupertinoIcons.flag),
  material: (_, __)  => Icon(Icons.flag),
);

PlatformText

A widget that will render uppercase for material. Cupertino will remain unchanged.

return PlatformText('Cancel');

PlatformSwitch

A switch widget that will use a Switch for material or a CupertinoSwitch for cupertino.

return PlatformSwitch(
  onChanged: (bool value) {},
  value: value,
);

Enhance

return PlatformSwitch(
  onChanged: (bool value) {},
  value: value,
  material: (_, __)  => MaterialSwitchData(...),
  cupertino: (_, __) => CupertinoSwitchData(...)
);

PlatformSlider

A slider widget that will use a Slider for material or a CupertinoSlider for cupertino

return PlatformSlider(
  onChanged: (bool value) {},
  value: value,
);

Enhance

return PlatformSlider(
  onChanged: (bool value) {},
  value: value,
  material: (_, __)  => MaterialSliderData(...),
  cupertino: (_, __) => CupertinoSliderData(...)
);

PlatformTextField

A text field widget that will use a TextField for material or a CupertinoTextField for cupertino.

return PlatformTextField();

Enhance

return PlatformTextField(
  material: (_, __)  => MaterialTextFieldData(...),
  cupertino: (_, __) => CupertinoTextFieldData(...)
);

PlatformButton

A button that will render a RaisedButton or FlatButton for material or a CupertinoButton for cupertino.

return PlatformButton(
  onPressed: () => print('send'),
  child: PlatformText('Send'),
);

Enhance

Extend with PlatformBuilder for material or cupertino.

return PlatformButton(
  onPressed: () => print('send'),
  child: PlatformText('Send'),
  material: (_, __)  => MaterialRaisedButtonData(...),
  cupertino: (_, __) => CupertinoButtonData(...)
);

Note: For material you can use the FlatButton instead. To do this use the MaterialFlatButtonData on the materialFlat argument.

Note: For cupertino you can use the CupertinoButton.filled instead. To do this use the CupertinoFilledButtonData on the cupertinoFilled argument.

return PlatformButton(
 onPressed: () => print('send'),
 child: PlatformText('Send'),
 materialFlat: (_, __)    => MaterialFlatButtonData(),
 cupertinoFilled: (_, __) => CupertinoFilledButtonData(),
);

PlatformIconButton

A clickable (tappable) button with an icon. Uses IconButton for material or CupertinoButton for cupertino.

return PlatformIconButton(
  onPressed: () => print('info pressed'),
  materialIcon: Icon(Icons.info),
  cupertinoIcon: Icon(
    CupertinoIcons.info,
    size: 28.0,
  ),
);

Enhance

Extend with PlatformBuilder for material or cupertino.

Widget infoIconButton() {
  return PlatformIconButton(
    onPressed: () => print('info pressed'),
    materialIcon: Icon(Icons.info),
    cupertinoIcon: Icon(CupertinoIcons.info),
    material: (_, __)  => MaterialIconButtonData(...),
    cupertino: (_, __) => CupertinoIconButtonData(...),
  );
}

PlatformApp

A top level widget for the application that uses MaterialApp for material or CupertinoApp for cupertino.

return PlatformApp(
  title: 'Flutter Demo',
  home: ...
);

or

return PlatformApp.router(
  routeInformationParser: ...
  routerDelegate: ...
)

Enhance

Extend with PlatformBuilder for material or cupertino.

return PlatformApp(
  home:  ...
  material: (_, __)  => MaterialAppData(...)
  cupertino: (_, __) => CupertinoAppData(...)
);

or

return PlatformApp.router(
  material: (_, __)  => MaterialAppRouterData(...)
  cupertino: (_, __) => CupertinoAppRouterData(...)
);

PlatformScaffold

A Scaffold that provides the correctly hosted header (AppBar) and navigation bar (Bottom Bar) for each platform. Uses Scaffold for material or CupertinoTabScaffold for cupertino with bottom tabs or CupertinoPageScaffold for cupertino without bottom tabs.

return PlatformScaffold(
  appBar: PlatformAppBar()
  body: _buildContent(),
  bottomNavBar: PlatformNavBar(),
  iosContentPadding: false,
  iosContentBottomPadding: false
);

Note that the use of iosContentPadding = true is only required if the content is being obstructed behind the appBar. iosContentBottomPadding is used if the content needs to be above the navBar and not go behind it. This will not have the translucent effect for iOS when these are set to true. If that is desirable, then the scrolling and content alignment need to be managed yourself.

Enhance

Extend with PlatformBuilder for material or cupertino.

return PlatformScaffold(
  appBar: PlatformAppBar()
  body: _buildContent(),
  bottomNavBar: PlatformNavBar(),
  material: (_, __)  => MaterialScaffoldData(...)
  cupertino: (_, __) => CupertinoPageScaffoldData(...);
);

Both the material and cupertino builders are optional. If not provided the Container placeholder widget will be returned.

PlatformTabScaffold

Note: Using PlatformTabScaffold provides a more refined and flexible experience than using PlatformScaffold.

A Scaffold that provides the correctly hosted header (AppBar) and navigation bar (Bottom Bar) for each platform. Uses Scaffold for material or CupertinoTabScaffold for cupertino with bottom tabs.

return PlatformTabScaffold(
  tabController: tabController,
  appBarBuilder: (_, index) => PlatformAppBar(),
  bodyBuilder: (context, index) => _buildContent(index),
  items: _items(context),
);

More more detailed example look at:

Note that the use of iosContentPadding = true is only required if the content is being obstructed behind the appBar. iosContentBottomPadding is used if the content needs to be above the navBar and not go behind it. This will not have the translucent effect for iOS when these are set to true. If that is desirable, then the scrolling and content alignment need to be managed yourself.

Enhance

Extend with PlatformBuilder for material or cupertino.

return PlatformTabScaffold(
  tabController: tabController,
  appBarBuilder: (_, index) => PlatformAppBar(),
  bodyBuilder: (context, index) => _buildContent(index),
  items: _items(context),
  material: (_, __)  => MaterialTabScaffoldData(...)
  cupertino: (_, __) => CupertinoTabScaffoldData(...);
  materialtabs: (_, __) => MaterialNavBarData(...)
  cupertinoTabs: (_, __) => CupertinoTabBarData(...);
);

Both the material and cupertino builders are optional. If not provided the SizedBox.shrink() placeholder widget will be returned. material can be replaced with materialBuilder for dynamic rendering on index change cupertino can be replaced with cupertinoBuilder for dynamic rendering on index change

PlatformAppBar

The AppBar is the top Header bar with a title, left-side or right-side buttons. Uses AppBar for material or CupertinoNavigationBar for cupertino.

return PlatformAppBar(
    title: new Text('Platform Widgets'),
    leading: PlatformIconButton(),
    trailingActions: <Widget>[
      PlatformIconButton(),
    ],
  );

In Cupertino if a solid color header is required and there is a ListView on the page, you would need to add some alpha to the color so that the ListView is not pushed down too far

     appBar: PlatformAppBar(
       title: Text('iOS Colored Header'),
       cupertino: (_, __) => CupertinoNavigationBarData(
             // Issue with cupertino where a bar with no transparency
             // will push the list down. Adding some alpha value fixes it (in a hacky way)
             backgroundColor: Colors.lightGreen.withAlpha(254),
           ),
     ),

Enhance

Extend with PlatformBuilder for material or cupertino.

return PlatformAppBar(
  title: new Text('Platform Widgets'),
  leading: PlatformIconButton(),
  trailingActions: <Widget>[
    PlatformIconButton(),
  ],
  material: (_, __)  => MaterialAppBarData(...),
  cupertino: (_, __) => CupertinoNavigationBarData(...),
);

PlatformNavBar

The NavBar is placed at the bottom of the page with a set of buttons that typically navigate between screens. Implementing this widget requires the parent widget to manage the currentIndex of the page and to set PlatformNavBar.currrentIndex. Uses BottomAppBar with BottomNavigationBar for material or CupertinoTabBar for cupertino.

return PlatformNavBar(
  currentIndex: _selectedTabIndex,
  itemChanged: (index) => setState(
        () {
          _selectedTabIndex = index;
        },
      ),
  items: [
    BottomNavigationBarItem(),
    BottomNavigationBarItem(),
  ],
);

Enhance

Extend with PlatformBuilder for material or cupertino.

return PlatformNavBar(
  currentIndex: _selectedTabIndex,
  itemChanged: (index) => setState(
        () {
          _selectedTabIndex = index;
        },
      ),
  items: [
    BottomNavigationBarItem(),
    BottomNavigationBarItem(),
  ],
  material: (_, __)  => MaterialNavBarData(...),
  cupertino: (_, __) => CupertinoTabBarData(...),
);

PlatformPopupMenu

The PlatformPopupMenu will render a using a PopupMenuButton for material or use a CupertinoActionSheet for cupertino which will display a list of actions.

return PlatformPopupMenu(
  options: [
    PopupMenuOption(label: 'One', onTap: _navToPageOne),
    PopupMenuOption(label: 'Two', onTap: _navToPageTwo),
    PopupMenuOption(label: 'Three', onTap: _navToPageThree)
  ],
  icon: Icon(
    context.platformIcon(
      material: Icons.more_vert_rounded,
      cupertino: CupertinoIcons.ellipsis,
    ),
  ),
);

Enhance

Extend with PlatformBuilder for material or cupertino.

return PlatformPopupMenu(
  options: [
    PopupMenuOption(label: 'One', onTap: _navToPageOne),
    PopupMenuOption(label: 'Two', onTap: _navToPageTwo),
    PopupMenuOption(label: 'Three', onTap: _navToPageThree)
  ],
  icon: Icon(
    context.platformIcon(
      material: Icons.more_vert_rounded,
      cupertino: CupertinoIcons.ellipsis,
    ),
  ),
  material: (_, __)  => MaterialPopupMenuData(...),
  cupertino: (_, __) => CupertinoPopupMenuData(...),
);

PlatformAlertDialog

The AlertDialog will render a caption/title, body/text and a set of action buttons specific for the platform. Uses AlertDialog for material or CupertinoAlertDialog for cupertino.

Note use showPlatformDialog instead of either showDialog from the Material library or showCupertinoDialog from the Cupertino library.

alt text

alt text

showPlatformDialog(
  context: context,
  builder: (_) => PlatformAlertDialog(
    title: Text('Alert'),
    content: Text('Some content'),
    actions: <Widget>[
      PlatformDialogAction(),
      PlatformDialogAction(),
    ],
  ),
);

Enhance

Extend with PlatformBuilder for material or cupertino.

showDialog(
  context: context,
  builder: (_) => PlatformAlertDialog(...),
  cupertino: (_, __) => CupertinoAlertDialogData(...),
  material: (_, __)  => MaterialAlertDialogData(...),
)

PlatformDialogAction

The DialogAction widget is used to describe the set of buttons on the AlertDialog. Uses TextButton for material or CupertinoDialogAction for cupertino. If you want to use FlatButton for material which is the default pre v1.9.0 then set legacyMaterialDialogActionButtons setting on PlatformProvider

PlatformDialogAction(
  child: PlatformText('Cancel'),
  onPressed: () => Navigator.pop(context),
),

Enhance

Extend with PlatformBuilder for material or cupertino.

PlatformDialogAction(
  child: PlatformText('Cancel'),
  onPressed: () => Navigator.pop(context),
  material: (_, __)  => MaterialDialogActionData(...),
  cupertino: (_, __) => CupertinoDialogActionData(...),
),

PlatformCircularProgressIndicator

A circular looking progress indicator. Uses CircularProgressIndicator for material or CupertinoActivityIndicator for cupertino.

return PlatformCircularProgressIndicator();

Enhance

Extend with PlatformBuilder for material or cupertino.

return PlatformCircularProgressIndicator(
  material: (_, __)  => MaterialProgressIndicatorData(...),
  cupertino: (_, __) => CupertinoProgressIndicatorData(...),
);

PlatformPageRoute

This function can be used within the Navigator to push either the MaterialPageRoute for material or CupertinoPageRoute for cupertino.

  Navigator.push(
    context,
    platformPageRoute(
      context: context,
      builder: pageToDisplayBuilder,
    ),
  );

Enhance

Extend with PlatformBuilder for material or cupertino.

return platformPageRoute(
  context: context,
  material: (_, __)  => MaterialPageRouteData(...),
  cupertino: (_, __) => CupertinoPageRouteData(...),
);

PlatformPage

This function can be used within flutter's Navigator 2 to push either the MaterialPage for material or CupertinoPage for cupertino.

    platformPage(
      context: context,
      child: child,
    ),
  );

Enhance

Extend with PlatformBuilder for material or cupertino.

return platformPage(
  context: context,
  material: (_, __)  => MaterialPageData(...),
  cupertino: (_, __) => CupertinoPageData(...),
);

ShowPlatformModalSheet

This function is used to either display a ModalBottomSheet for material or CupertinoModalPopup for cupertino.

  showPlatformModalSheet(
      context: context,
      builder: (_) => PlatformWidget(
        material: (_, __)  => _materialPopupContent(),
        cupertino: (_, __) => _cupertinoSheetContent(),
      ),
    );

Note: Since Material and Cupertino content may be quite different it may be useful to use PlatformWidget.

ShowPlatformDatePicker

This function is used to either display a DatePickerDialog for material or CupertinoDatePicker via a showCupertinoModalPopup for cupertino.

  showPlatformDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime.now().subtract(const Duration(days: 1000)),
      lastDate: DateTime.now().add(const Duration(days: 1000)),
    );

Note: The Cupertino popup uses a modal bottom sheet. If you need to customize the look then set the cupertinoContentBuilder property and return a custom content. If you create your own content builder you will need to manage the state of the date yourself. See the implementation of using StatefulBuilder or StatefulWidget to manage state updates within the example project.

final date = await showPlatformDatePicker(
    context: context,
    firstDate: DateTime.now().subtract(const Duration(days: 100)),
    lastDate: DateTime.now().add(const Duration(days: 100)),
    initialDate: DateTime.now(),
    cupertinoContentBuilder: (contentData, data) =>
        _CustomCupertinoDatePicker(contentData: contentData),
  );

PlatformProvider

A Provider that provides access to the functions of switching platforms which can be accessed from any screen.

Requires to be placed at the root (above MaterialApp, CupertinoApp or PlatformApp).

  return PlatformProvider(
    builder: (BuildContext context) => MaterialApp(...)
  );

Arguments

initialPlatform

An optional argument initialPlatform can be passed in to force the platform upon startup. This could be useful for development or if the platform is persisted externally (i.e. Shared preferences) and needs to be set on startup.

And to switch platforms...

PlatformProvider.of(context).changeToMaterialPlatform();

or

PlatformProvider.of(context).changeToCupertinoPlatform();

or

PlatformProvider.of(context).changeToPlatform(Platform.fuchsia);

This will set the Theme.of(context).platform but the platform widgets will use the style as defined in the PlatformStyle as set inside the settings object. See below.

settings

The settings argument have been added to assist in configuring Platform Widgets.

iosUsesMaterialWidgets

  • If true it will add a Material widget above the CupertinoPageScaffold so that Material widgets can be added to the ios page. This does affect dark mode and some ios rendering so it is best to have it false (default). If you use Material widgets on the page simply add Material(child: yourWidget).

platformStyle

  • Provides a way to set either Material or Cupertino style on any supported platforms such as android, ios, web, macos, fuchsia, windows amd linux. For example if you wanted to use Cupertino widgets for web you would configure by setting the settings object on PlatformProvider:
PlatformProvider(
  settings: PlatformSettingsData(
    platformStyle: PlatformStyleData(web: PlatformStyle.Cupertino)
  ),
  builder: (context) => PlatformApp(...)
)

legacyIosUsesMaterialWidgets

  • If true will have the Material widget above CupertinoScaffold and CupertinoTabScaffold rather than one level down. Having set to false will likely prevent an exception when using a material widget for a cupertino style. This setting was the default pre v1.6.0

legacyMaterialDialogActionButtons

  • If true all material dialog action buttons will use FlatButton which is the default pre v1.9.0. As of v1.9.0 the material dialog action button will use the newer material TextButton

PlatformThemeData

Helper function to a Material or Cupertino theme data property based on the platform

Text(
  platform.text,
  textAlign: TextAlign.center,
  style: platformThemeData(
    context,
    material: (data) => data.textTheme.headline5,
    cupertino: (data) => data.textTheme.navTitleTextStyle,
  ),
)

PlatformIcons

Render a Material or Cupertino looking icon

  Icon(context.platformIcons.book)
//or
  Icon(PlatformIcons(context).book)

View the source or screenshots for the list of icons.

PlatformWidgetBuilder

Renders a parent widget for either Cupertino or Material while sharing a common child Widget

 PlatformWidgetBuilder(;
   cupertino: (_, child, __) => GestureDetector(child: child, onTap: _handleTap),
   material: (_, child, __) => IniWell(child: child, onTap: _handleTap),
   child: Container(child: Text('Common text')),
 );

TODO

  • UI / Unit Tests.
  • Code documentation

Changing / Checking Platform

When importing flutter_platform_widgets you can check isMaterial(context) or isCupertino(context) to determine what style will be used. This is independent to Platform.isAndroid or Platform.isIOS from 'import 'dart:io'

You can call platform(context) to get the current platform. This is an enhancement on the existing TargetPlatform enum which now includes a value for web.

See the example code for how this is used.

Issues and Feedback

Please create an issue to provide feedback or an issue.

Contributors

Special thanks for everyone that have contributed to this project...

Lance Johnstone
Stefan Rusek
Mark Lavercombe
Fred Grott
Felizia Bernutz
eyecreate
Adrian
Eric Martineau
Gilles Montyne
Ivan Kryak
Morris Haid
Joscha Eckert
Furkan Tektas
benzel
Christian Mengler
Ben Hagen
anticafe
Nnaemeka Abah
Ezeoke Onyekachi Samuel
Jasper Koning
AlexIver
in74mz
Daniel Felten
Hans Kokx

Acknowledgements

Inspired by the example given by Swav Kulinski (https://github.com/swavkulinski/flutter-platform-specific-widgets)

GitHub

https://github.com/stryder-dev/flutter_platform_widgets
Comments
  • 1. PlatformIconButton on PlatformAppBar placed too low on iOS

    PlatformIconButton on PlatformAppBar is placed too low on iOS it seem. If i change it to a IconButton, it seem correct (but does not work on iOS in some cases).

    Example:

    class MenuPage extends StatelessWidget {
      MenuPage({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return PlatformScaffold(
          appBar: PlatformAppBar(
            leading: PlatformIconButton(
              icon: Icon(PlatformIcons(context).clear),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ),
          body: SafeArea(
            child: MenuContent(),
          ),
        );
      }
    }
    
    Reviewed by erf at 2021-05-02 00:08
  • 2. CupertinoTheme based on Device Brightness?

    Is there a way to display light/dark mode based on the Devices brightness in iOS? I tried this:

    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
    
        final materialLightTheme = ThemeData(
          primaryColor: Colors.blueAccent,
          brightness: Brightness.light,
          scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.light),
          appBarTheme: AppBarTheme(
            color: MyColors.backgroundColor1(Brightness.light)
          ),
        );
    
    
        final materialDarkTheme = ThemeData(
          primaryColor: Colors.blueAccent,
          brightness: Brightness.dark,
          scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.dark),
          appBarTheme: AppBarTheme(
            color: MyColors.backgroundColor1(Brightness.dark)
          ),
        );
    
        final cupertinoTheme = new CupertinoThemeData(
          primaryColor: Colors.blueAccent,
          scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.light),
          barBackgroundColor: MyColors.backgroundColor1(Brightness.light)
        );
    
        final cupertinoThemeDark = new CupertinoThemeData(
          primaryColor: Colors.blueAccent,
          scaffoldBackgroundColor: MyColors.backgroundColor0(Brightness.dark),
          barBackgroundColor: MyColors.backgroundColor1(Brightness.dark)
        );
    
        Brightness brightness = MediaQuery.of(context).platformBrightness;
    
        return PlatformProvider(
          builder: (context) => PlatformApp(
            title: "Cali Move App",
            android: (context) {
              return MaterialAppData(
                darkTheme: materialDarkTheme,
                theme: materialDarkTheme,
                // themeMode: brightness == Brightness.light
                //   ? ThemeMode.light
                //   : ThemeMode.dark
              );
            },
            ios: (context) {
              return new CupertinoAppData(
                theme: brightness == Brightness.light
                    ? cupertinoTheme
                    : cupertinoThemeDark,
                // home: MyHomePage(),
              );
            } 
          ),
        );
      }
    }
    

    But I can't query the brightess with MediaQuery in the build method because MediaQuery.of() called with a context that does not contain a MediaQuery.

    Reviewed by JonasJW at 2020-01-11 13:36
  • 3. Navigation bar icons in wrong position on iOS

    Hi! Thank you for writing this library! I have a problem with the bar button items on iOS. This code

            PlatformAppBar(
                title: Text(widget.title),
                trailingActions: <Widget>[
                  PlatformIconButton(icon: Icon(Icons.compare))
                ],
             )
    
    

    results in the icon to be displayed shifted and too small:

    image

    When using an iOS specific CupertinoNavigationBarData icon it works correctly:

              PlatformAppBar(
                title: Text(widget.title),
                trailingActions: <Widget>[
                  PlatformIconButton(icon: Icon(Icons.compare))
                ],
                ios: (_) =>
                    CupertinoNavigationBarData(
                      trailing: GestureDetector(
                        child: Icon(Icons.compare)),
                    ),
              ),
           )
    
    

    image

    However it should not be necessary to specify "ios", it should already work correctly with the PlatformIconButton, right? 🙂

    Reviewed by dg76 at 2020-01-18 12:35
  • 4. getter "fullObstruction" error

    Eliass-MBP:isontic-Education elias$ flutter build ios
    Running "flutter pub get" in isontic-Education...                   0.6s
    Building com.isontic.ed for device (ios-release)...
     
    Automatically signing iOS for device deployment using specified development team in Xcode project: ZHW34NDW2Q
    Running Xcode build...                                                  
                                                       
     ├─Building Dart code...                                     7.2s
    Xcode build done.                                           16.2s
    Failed to build iOS app
    Error output from Xcode build:
    ↳
        ** BUILD FAILED **
    
    
    Xcode's output:
    ↳
        Building AOT snapshot in release mode (ios-release)...          
    
        Compiler message:
    
        ../../../../Elias/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.20.1/lib/src/platform_scaffold.dart:229:38: Error: The getter 'fullObstruction' isn't defined for
        the class 'ObstructingPreferredSizeWidget'.
    
         - 'ObstructingPreferredSizeWidget' is from 'package:flutter/src/cupertino/page_scaffold.dart' ('../../../../Elias/flutter/packages/flutter/lib/src/cupertino/page_scaffold.dart').
    
        Try correcting the name to the name of an existing getter, or defining a getter or field named 'fullObstruction'.
    
              final obstruct = navigationBar.fullObstruction == null ||
    
                                             ^^^^^^^^^^^^^^^
    
        ../../../../Elias/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.20.1/lib/src/platform_scaffold.dart:230:25: Error: The getter 'fullObstruction' isn't defined for
        the class 'ObstructingPreferredSizeWidget'.
    
         - 'ObstructingPreferredSizeWidget' is from 'package:flutter/src/cupertino/page_scaffold.dart' ('../../../../Elias/flutter/packages/flutter/lib/src/cupertino/page_scaffold.dart').
    
        Try correcting the name to the name of an existing getter, or defining a getter or field named 'fullObstruction'.
    
                  navigationBar.fullObstruction;
    
                                ^^^^^^^^^^^^^^^
    
        Compiler terminated unexpectedly.
        Failed to build /Users/elias/Documents/GitHub/isontic-Education.
        Command PhaseScriptExecution failed with a nonzero exit code
        note: Using new build systemnote: Planning buildnote: Constructing build descriptionwarning: The use of Swift 3 @objc inference in Swift 4 mode is deprecated. Please address deprecated
        @objc inference warnings, test your code with “Use of deprecated Swift 3 @objc inference” logging enabled, and then disable inference by changing the "Swift 3 @objc Inference" build
        setting to "Default" for the "Runner" target. (in target 'Runner' from project 'Runner')
    
    Encountered error while building for device.
    Eliass-MBP:isontic-Education elias$ 
    
    Reviewed by edeuss at 2019-09-28 19:20
  • 5. Error with CupertinoNavigationBar

    ../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.72.0/lib/src/platform_app_bar.dart:202:9: Error: No named parameter with the name 'actionsForegroundColor'.
            actionsForegroundColor: data?.actionsForegroundColor,
            ^^^^^^^^^^^^^^^^^^^^^^
    ../../../development/flutter/packages/flutter/lib/src/cupertino/nav_bar.dart:220:9: Context: Found this candidate, but the arguments don't match.
      const CupertinoNavigationBar({
            ^^^^^^^^^^^^^^^^^^^^^^
    ../../../development/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.72.0/lib/src/platform_app_bar.dart:222:7: Error: No named parameter with the name 'actionsForegroundColor'.
          actionsForegroundColor: data?.actionsForegroundColor,
          ^^^^^^^^^^^^^^^^^^^^^^
    ../../../development/flutter/packages/flutter/lib/src/cupertino/nav_bar.dart:220:9: Context: Found this candidate, but the arguments don't match.
      const CupertinoNavigationBar({
            ^^^^^^^^^^^^^^^^^^^^^^
    
    

    Using:

    sdk: '>=2.7.0 <3.0.0'
    flutter_platform_widgets: ^0.72.0
    
    Reviewed by erperejildo at 2021-01-31 12:16
  • 6. why initstate() is called multiple times in stateful widget when we use platform widgets?

    if we combine platform widget with PlatformNavBar,after we switch from tab1 to tab2, initstate() nitstate() is called multiple times!!! Really a big issue ! ` return PlatformNavBar( currentIndex: _selectedTabIndex,

      itemChanged: (int index) {
        setState(() {
          _selectedTabIndex = index;
        });
      },
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('home')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('search')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.shopping_cart),
            title: Text('shopping_cart')
        ),
    
    
      ],
    );`
    
    Reviewed by miroda at 2019-09-06 02:31
  • 7. On Ios when dark mode is enabled, text is shown dark, making text invisible

    As in the title, here a attached the default app generated by flutter and modified in order to be used with the library that exhibits the problem. With the Standard Cupertino Scaffold/App, the problem is not shown.

    main.dart.zip

    Reviewed by andreacimino at 2020-01-07 02:06
  • 8. Switch Platform Question

    This issue is slightly related with #21. I was recently working on a university project and decided to use platform_widgets for easier cross platform support. I decided to implement a separate settings screen and add a change platform button under dev settings. However upon implementing that every time platform was changed I was navigating back to the main screen. As I understand changeToCupertinoPlatform() should be used in the beginning of the app but is there a way to do that and have the changes propagate in the root widget once the back button in the settings screen is pressed rather than jumping directly back?

    Reviewed by giannissc at 2019-03-26 10:28
  • 9. SafeArea:top=true results in extra top padding when using solid bgColor for CupertinoNavigationBarData

    Continuation from the fixed bug of https://github.com/aqwert/flutter_platform_widgets/issues/15

    If you have a SafeArea in your Scaffold body, a solid bgColor in the CupertinoNavigationBarData will still result in too much padding between the bar and the body content.

    Below is the code to show. I've set variables named solidNav and safeTop that will trigger whether or not the bar is solid colored or translucent and whether the safearea applies to the top param or not.

    import 'package:flutter/material.dart';
    import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Test(),
        );
      }
    }
    
    class Test extends StatefulWidget {
    
      Test({Key key}) :
            super(key: key);
    
      @override
      _TestState createState() => _TestState();
    }
    
    class _TestState extends State<Test> {
    
      bool solidNav = true;
      bool safeTop = true;
    
      @override
      Widget build(BuildContext context) {
    
        return PlatformScaffold(
          appBar: _buildAppBar(),
          body: _buildBody(),
        );
      }
    
      Widget _buildAppBar() {
        return PlatformAppBar(
          title: Text("test",
            style: Theme.of(context).textTheme.title.copyWith(
              color: solidNav ? Colors.white : Colors.black,
            ),
          ),
          ios: (BuildContext context) => _buildAppBariOS(),
        );
      }
    
    
      CupertinoNavigationBarData _buildAppBariOS() {
        return CupertinoNavigationBarData(
          backgroundColor: solidNav ? Colors.black : null,
        );
      }
    
      Widget _buildBody(){
        return SafeArea(
          top: safeTop,
          child: Container(
            color: Colors.grey,
            child: Center(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text("Solid navbar with SafeArea:top=false"),
                    onPressed: (){
                      setState(() {
                        solidNav = true;
                        safeTop = false;
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text("Solid navbar with SafeArea:top=true"),
                    onPressed: (){
                      setState(() {
                        solidNav = true;
                        safeTop = true;
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text("Translucent navbar with SafeArea:top=true"),
                    onPressed: (){
                      setState(() {
                        solidNav = false;
                        safeTop = true;
                      });
                    },
                  ),
                ],
              ),
            ),
          ),
        );
      }
    
    
    }
    
    
    
    

    0000

    Reviewed by aaronfg at 2018-11-30 17:55
  • 10. Using GetX?

    Is there somewhere a documentation on how to use the PlatFormWidgets with GetX? Currently struggling with the PlatformTabScaffold and the tabController :(

    Reviewed by Urkman at 2021-04-10 13:06
  • 11. Not working with last flutter stable version: Flutter 1.20.0 • channel stable

    Hi I created a project from scratch and added the package to my pubspec.yaml. The project it's outputting this errors.

    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:67:23: Error: Type 'ActionFactory' not found.
      final Map<LocalKey, ActionFactory> actions;
                          ^^^^^^^^^^^^^
    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:96:21: Error: Type 'ActionFactory' not found.
          Map<LocalKey, ActionFactory> actions,
                        ^^^^^^^^^^^^^
    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:152:21: Error: Type 'ActionFactory' not found.
          Map<LocalKey, ActionFactory> actions,
                        ^^^^^^^^^^^^^
    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:219:23: Error: Type 'ActionFactory' not found.
      final Map<LocalKey, ActionFactory> actions;
                          ^^^^^^^^^^^^^
    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:67:23: Error: 'ActionFactory' isn't a type.
      final Map<LocalKey, ActionFactory> actions;
                          ^^^^^^^^^^^^^
    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:96:21: Error: 'ActionFactory' isn't a type.
          Map<LocalKey, ActionFactory> actions,
                        ^^^^^^^^^^^^^
    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:152:21: Error: 'ActionFactory' isn't a type.
          Map<LocalKey, ActionFactory> actions,
                        ^^^^^^^^^^^^^
    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:219:23: Error: 'ActionFactory' isn't a type.
      final Map<LocalKey, ActionFactory> actions;
                          ^^^^^^^^^^^^^
    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:312:30: Error: The argument type 'Map<LocalKey, invalid-type>' can't be assigned to the parameter type 'Map<Type, Action<Intent>>'.
     - 'Map' is from 'dart:core'.
     - 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../flutter/packages/flutter/lib/src/foundation/key.dart').
     - 'Type' is from 'dart:core'.
     - 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../flutter/packages/flutter/lib/src/widgets/actions.dart').
     - 'Intent' is from 'package:flutter/src/widgets/actions.dart' ('../flutter/packages/flutter/lib/src/widgets/actions.dart').
          actions: data?.actions ?? actions,
                                 ^
    ../../../.pub-cache/hosted/pub.dartlang.org/flutter_platform_widgets-0.51.0/lib/src/platform_app.dart:363:30: Error: The argument type 'Map<LocalKey, invalid-type>' can't be assigned to the parameter type 'Map<Type, Action<Intent>>'.
     - 'Map' is from 'dart:core'.
     - 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../flutter/packages/flutter/lib/src/foundation/key.dart').
     - 'Type' is from 'dart:core'.
     - 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../flutter/packages/flutter/lib/src/widgets/actions.dart').
     - 'Intent' is from 'package:flutter/src/widgets/actions.dart' ('../flutter/packages/flutter/lib/src/widgets/actions.dart').
          actions: data?.actions ?? actions,
                                 ^
    

    The current flutter version that I'm using.

    Flutter 1.20.0 • channel stable • https://github.com/flutter/flutter.git
    Framework • revision 840c9205b3 (13 hours ago) • 2020-08-04 20:55:12 -0700
    Engine • revision c8e3b94853
    Tools • Dart 2.9.0
    

    Thanks!

    Reviewed by hazzo at 2020-08-05 17:06
  • 12. v2.0 Implementation

    The following is a list of TODOs for v2.0

    • [x] Flutter 3.0 compatible
    • [ ] Custom widget builders. This will allow a custom theme separate to material and cupertino. For example, it would be possible to create a bootstrap like design library (for web) or wrapped the MacosUI or FluentUI 3rd Party packages.
    • [ ] ReadMe refresh
    • [ ] Documentation of each platform widget (Tracked: https://github.com/stryder-dev/flutter_platform_widgets/issues/271), usage and examples
    • [ ] Document any breaking changes
    • [x] Remove deprecated fields
    • [x] Remove PlatformButton which uses deprecated material FlatButton and RaisedButton. These are removed from flutter 3.1 so will need to be removed before that
    • [ ] Any other minor enhancements

    The above will get completed in time but should be released as part of a -dev package version. A version flutter 3.0 compatible version will likely go out with the PlatformButton to prepare for when flutter 3.10 is released (currently in beta)

    Reviewed by aqwert at 2022-06-07 09:32
  • 13. CupertinoThemeData ignored for PlatformApp in IOS

    I am trying to create a basic dark mode theme for IOS. The material (Android) dark mode them works fine simply by using this:

    final darkTheme = ThemeData.dark();

    and then this in the PlatformApp constructor:

    material: (_, __) => MaterialAppData(theme: darkTheme),

    So, I assumed I could do this for IOS:

    const cupertinoDark = CupertinoThemeData( brightness: Brightness.dark, primaryColor: Color(0xff5dd5f1), scaffoldBackgroundColor: Colors.black, primaryContrastingColor: Colors.black, textTheme: CupertinoTextThemeData( primaryColor: Color(0xff5dd5f1), textStyle: TextStyle(color: Colors.white)), );

    and then this in the PlatformApp constructor:

    cupertino: (_, __) => CupertinoAppData(theme: cupertinoDark),

    When I run the app in IOS mode, nothing in the theme is used. I get an app theme that resembles the default theme, which is light mode, with black text, white backgrounds, etc. It doesn't seem to matter what I put into the theme, it's ignored.

    I suspect I'm doing (or assuming) something wrong. Please advise. A sample of a dark mode platform widget app would be great!

    flutter_platform_widgets 1.12.1 and 1.20.0 (both fail)

    Flutter doctor -v:

    [✓] Flutter (Channel stable, 2.10.2, on macOS 11.6.5 20G527 darwin-x64, locale en-US) • Flutter version 2.10.2 at /Users/george/Develop/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 097d3313d8 (2 months ago), 2022-02-18 19:33:08 -0600 • Engine revision a83ed0e5e3 • Dart version 2.16.1 • DevTools version 2.9.2

    [✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0) • Android SDK at /Users/george/Library/Android/sdk/ • Platform android-31, build-tools 32.0.0 • ANDROID_HOME = /Users/george/Library/Android/sdk/ • ANDROID_SDK_ROOT = /Users/george/Library/Android/sdk/ • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822) • All Android licenses accepted.

    [✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.2

    [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

    [✓] Android Studio (version 2021.1) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)

    [✓] VS Code (version 1.66.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.40.0

    [✓] Connected device (3 available) • George Kustas’s iPhone (mobile) • d3c69ceedee63f62fbc1638a5247e08afda0c9c6 • ios • iOS 14.8.1 18H107 • iPhone 8 (mobile) • 6D001806-E966-429F-BE76-D3C7109C2E97 • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator) • Chrome (web) • chrome • web-javascript • Google Chrome 101.0.4951.54

    [✓] HTTP Host Availability • All required HTTP hosts are available

    • No issues found!

    Reviewed by gkustas at 2022-05-03 22:03
  • 14. Native macOS and windows widgets

    There are now packages to provide native style controls for macOS and Windows.

    https://pub.dev/packages/macos_ui

    https://pub.dev/packages/fluent_ui

    It would be great if your package gave desktop native versions of switches, buttons, alert dialogs etc on those platforms too where possible rather than Material/Cupertino. It feels like a natural enhancement for your excellent package.

    Reviewed by MyBuzzTechnologies at 2022-04-10 07:27
  • 15. Nav Rail strategies Adaptvie nav

    So came up with a nice adaptive nav scaffold solution to do nav rails, sidesheet, and tabbed bottom and drawer correctly dynamically per screensize.

    Then I realized that I did it using Material AppBar and Scaffolds.

    I can work out how to account for Platform Flutter Widgets appbar stuff.

    On scaffolds would the right strategy be to keep it as a Material scaffold then through platform detection still serve up the correct platform screen transitions?

    From what I remember about FPW internals it would seem that would be my best strategy to take care of delivering the right screen transitions per platform.

    Thanks.

    PS Did work out a nice FPW Theme strategy that addresses the ColorScheme widget theme transition migration and will update and share the article and codelinks when I have published it.

    Reviewed by fredgrott at 2021-09-28 21:47
  • 16. docs how to grab brightness

    People keep asking about this, so my gist

    https://gist.github.com/fredgrott/da2492e89fbb7a59e4146320be7006be

    assuming that SL your deps you need to use media query and WidgetsBinding to grab a window that way it will work even before MaterialApp is initialized.

    And of course, you use a Future async paring

    Reviewed by fredgrott at 2021-07-26 21:01

Related

Purpose of this project is to create extendable architecture of making platform aware Widgets which automatically select platform specific implementation

Old good factory Main obstacle in creating native experience on Flutter is the fact that you are asked to rebuild two layouts using platform specific

Jun 25, 2022
Cupertino app codelab - Building a Cupertino App with Flutter
Cupertino app codelab - Building a Cupertino App with Flutter

Building a Cupertino App with Flutter Flutter allows us creating Cupertino (iOS-

Apr 18, 2022
Cupertino back gesture - Flutter package to set custom width of iOS back swipe gesture area

cupertino_back_gesture A Flutter package to set custom width of iOS back swipe gesture area. Usage To use this package, add cupertino_back_gesture as

May 25, 2022
ESP-Touch Dart API for Flutter. Platform-specific implementation for Android (Java) and iOS (Objective-C).
ESP-Touch Dart API for Flutter. Platform-specific implementation for Android (Java) and iOS (Objective-C).

esptouch_flutter Flutter plugin for ESP-Touch to configure network for ESP-8266 and ESP-32 devices. Runs on iOS and Android. esptouch_flutter is Flutt

Apr 15, 2022
A flutter application that allows users to test their knowledge through quizzes made for specific topics.

Quiz_App A flutter application that allows users to test their knowledge through quizzes made for specific topics. Setup The application consists of a

Dec 29, 2021
Cupertino version of the Material Stepper in Flutter
Cupertino version of the Material Stepper in Flutter

Cupertino Stepper for Flutter Cupertino version of the stock Material Stepper in Flutter. NOTE: This is not the same as the UIStepper control on iOS.

Jun 7, 2022
Material & Cupertino SpinBox for Flutter
Material & Cupertino SpinBox for Flutter

SpinBox for Flutter SpinBox for Flutter is a numeric input widget with an input field for entering a specific value, and spin buttons for quick, conve

Jun 14, 2022
The Material Design Icons Icon pack available as set of Flutter Icons.

material_design_icons_flutter The Material Design Icons Icon pack available as set of Flutter Icons. Based on Material Design Icons 6.5.95. See a web

May 26, 2022
Material io ext - A collection of extensions for creating widgets following material.io guidelines

material_io_ext It is a collection of extensions for creating widgets following

Jan 28, 2022
A flutter widget that animates scrolling through a set of fixed size containers.
A flutter widget that animates scrolling through a set of fixed size containers.

Spinner This flutter package implements a simple Spinner animation that cycles through any number of fixed size child widgets. Useful for selecting a

Aug 3, 2021
A Very Flexible Widget that can Implement Material Sheets on all Directions, both modal and persistent, and consequently a Material Navigation Drawer

Flutter_MaterialSheetAndNavigationDrawer If this project helped you reduce developement time or you just want to help me continue making useful tools

Dec 4, 2021
A Flutter widget to set time with spinner instead of material time picker
A Flutter widget to set time with spinner instead of material time picker

flutter_time_picker_spinner Time Picker widget with spinner instead of a material time picker. 12H format 24H format 24H format with second Custom sty

May 22, 2022
A flutter app to practice some common and important widgets

Flutter Beginner 2 A flutter app to practice some common and important widgets Developer Alexander Sosa (https://www.linkedin.com/in/alexander-sosa-as

Jan 3, 2022
Test flutter~android specific channels

test_platform_channels Test platform specific channels on java Async Communication through platform channels can be produced by using FlutterEngine an

Mar 25, 2022
[email protected] - A third party Weibo client for Android with Material You theming (iOS version later). 💪 Powered by Flutter 💪
Weibo@Flow - A third party Weibo client for Android with Material You theming (iOS version later).  💪 Powered by Flutter 💪

[email protected] - A third party Weibo client for Android with Material You theming (iOS version later). ?? Powered by Flutter ??

Apr 26, 2022
Flutter cupertino style date picker.
Flutter cupertino style date picker.

Flutter Cupertino Date Picker [pub packages] | 中文说明 Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Jun 17, 2022
Flutter cupertino style date picker.
Flutter cupertino style date picker.

Flutter Cupertino Date Picker [pub packages] | 中文说明 Flutter cupertino date picker. Usage 1. Depend Add this to you package's pubspec.yaml file: depend

Jun 17, 2022
A flutter date time picker inspired by flutter-cupertino-date-picker
A flutter date time picker inspired by flutter-cupertino-date-picker

Flutter Datetime Picker (Pub) flutter_datetime_picker A flutter date time picker inspired by flutter-cupertino-date-picker you can choose date / time

Nov 30, 2021