flutter_platform_component 2.2.1

Ready-made inherited component base using ready-made abstractions for quick use and decomposed by platform.

Flutter Platform Component

📱 Ready-made inherited component base using ready-made abstractions for quick use and decomposed by platform.

iOS (Cupertino)	Android (Material)
✅	✅

Getting Started

• Benefits
  • Platform decomposition
  • One theme contract
  • Basic entities
  • Optimization
  • Color scheme
  • Boilerplate
  • Unified API
  • Validation
  • Disabled components
• Design
• Dependencies
• Usage
• Entities
  • Animation
  • DateTime
  • Duration
  • Haptic
  • Platform
  • Size
  • TextStyle
  • Theme
  • TimeOfDay
• Components
  • Animation
    • AnimatedAlign
    • AnimatedContainer
    • AnimatedCrossFade
    • AnimatedDefaultTextStyle
    • AnimatedFadeIn
    • AnimatedFadeOut
    • AnimatedOpacityStack
    • AnimatedOpacity
    • AnimatedOpenContainer
    • AnimatedPositioned
    • AnimatedSize
    • AnimatedSwitcher
    • AnimatedTransitionSwitcher
  • App
  • AppBar
    • AppBar
    • BlurAppBar
  • Badge
    • CounterBadge
    • GradientCounterBadge
    • DotBadge
    • GradientDotBadge
  • Blur
  • Button
    • Button
    • GradientButton
    • IconButton
    • ModalButton
  • Card
    • Card
    • GradientCard
    • SelectCard
    • GradientSelectCard
  • Checkbox
  • CodeField
    • CodeField
    • GradientCodeField
  • Common
    • ComponentDisabledOverlay
    • CupertinoNavigator
    • TextInputHandlerFormatter
  • Default
    • ListView
    • Padding
  • Dialog
  • Divider
  • FormField
    • FormField
    • GradientFormField
    • SelectField
    • GradientSelectField
  • Global
    • Dialog
    • Modal
    • Picker
    • Snackbar
  • Gradient
    • GradientMask
    • LinearGradient
    • RadialGradient
    • SweepGradient
  • Icon
  • Indicator
    • CircularIndicator
    • GradientCircularIndicator
    • PageIndicator
    • GradientPageIndicator
    • ProgressIndicator
    • StoryIndicator
  • Keyboard
    • KeyboardButton
    • KeyboardNumberButton
    • Keyboard
  • List
    • ListRefresh
    • ListSection
  • Modal
    • ActionModal
    • ExpandedModal
    • SmallModal
  • Navigation
    • BottomNavigationBar
      • BottomNavigationBar
      • BlurBottomNavigationBar
    • Navigator
    • Route
  • Picker
    • DatePicker
    • TimePicker
  • PINField
    • PINField
    • GradientPINField
  • Radio
  • Scaffold
  • Scrollbar
  • SegmentControl
    • SegmentControl
    • GradientSegmentControl
  • Shimmer
    • Shimmer
    • GradientShimmer
  • Slider
  • SlidingSegmentControl
  • SliverNavigationAppBar
  • Snackbar
    • Snackbar
    • GradientSnackbar
  • Text
    • Text
    • TextSpan
    • TextStyle
  • Toggle
    • Toggle
    • GradientToggle
• TODO
• Additional Information

Benefits

The package works according to the principle: fill out one contract - get all ready-made inherited platform components.

Platform decomposition

Components are separated by platform by style and behavior.

One theme contract

Extension themes along with the ThemeData class are very good when you use widgets only for Material Design.
In case you want to get the correct behavior of widgets for the platform, you must fill in Theme and CupertinoTheme and each time remember to separate these colors in the widgets you use.
Theme Extension works in the same way as this package.
In the case of this package - it is necessary to fill in only one contract of the theme used.

Basic entities

In addition to the theme, there are other basic entities that are managed identically to the theme - sizes, text styles and haptics.

Optimization

Each entity is updated with its stateful and inherited widgets to optimize the redrawing of child widgets that are subscribed via the context to the entity data.

Color scheme

The color scheme was created in terms of the convenience of designers (primary, secondary and accent colors).
In the scheme by name, permanent colors and tint colors are created (note - primaryLight and primaryDark).

Boilerplate

Ready-made components get rid of a lot of boilerplate code.

Unified API

All component property names are unified, for example, you will never see "background" and "backgroundColor".

Validation

Form fields have not only normal validation, but also separate auto-validation, which can be used for messages during the characters entered in the field.
Segment control, Gradient segment control, sliding segment control, toggle, gradient toggle components also have a validation function (IsRequired flag) and can be placed at the root of the Form widget.

Disabled components

Every component that can be clicked has the property to be disabled implemented.

Design

Components follow the following design paradigm:

1. The component should not contain business logic;
2. All components must aspire to the behavior of the target platform;
3. If there is no such component in the target platform cookbook, a component is needed that will be as similar as possible to it and has identical behavior;
4. Component change the color of the disabled component, if it only has not background color;
5. The design of cross-platform components and their behavior are not mix.

Dependencies

The package uses a fork of the following dependencies:
animate_do - fade animations.
animations - transitional animations.
badges - badges.
flutter_vibrate - all vibrations.
modal_bottom_sheet - transitions that support modal animations and modal windows appearance method.
pinput - code fields and PIN fields.
Express our gratitude to the authors of these dependencies.

Usage

Initialize the main component widget at the root:

void main() => runApp(
      FlutterPlatformComponent( // Initialize the main component widget at the root of widget tree
        animation: const Animations(),
        textStyle: const TextStyles(),
        timeOfDay: TimesOfDay(),
        dateTime: DateTimes(),
        duration: const Durations(),
        platform: FPCPlatform.iOS,
        haptic: const Haptics(),
        theme: LightTheme(),
        size: const Sizes(),
        child: const Application(),
      ),
    );

class Application extends StatelessWidget {
  const Application({super.key});

  @override
  Widget build(BuildContext context) {
    return FPCApp(
      context: context,
      home: const HomeScreen(),
    );
  }
}

All basic components strats with "FPCBasic...".
Usage basic components:

FPCBasicButton(
  backgroundColor: theme.primary,
  splashColor: theme.whiteAlways,
  borderRadius: BorderRadius.circular(16),
  child: Text("Next"),
  onPressed: _next,
),

All ready-made components strats with "FPC...".
Usage ready-made components:

FPCPrimaryButton(
  title: "Next", 
  onPressed: _next,
),

Entities

Animation

An abstraction of animation properties for animation widgets.
The default value is const FPCDefaultAnimation();.
Get the actual animation instance in the widget tree:

final IFPCAnimation animation = context.componentAnimation;

The method allows you to change the current animations:

context.componentChangeDateTime(const Animations());

DateTime

An abstraction of dateTime properties for pickers.
The default value is FPCDefaultDateTime();.
Get the actual date time instance in the widget tree:

final IFPCDateTime dateTime = context.componentDateTime;

The method allows you to change the current date times:

context.componentChangeDateTime(DateTimes());

Duration

An abstraction of duration properties for animation widgets.
The default value is const FPCDefaultDuration();.
Get the actual duration instance in the widget tree:

final IFPCDuration duration = context.componentDuration;

The method allows you to change the current durations:

context.componentChangeDuration(const Durations());

Haptic

An abstraction of vibration functions.
The default value is const FPCDefaultHaptic();.
Get the actual vibration functions instance in the widget tree:

final IFPCHaptic haptic = context.componentHaptic;

The method allows you to change the current haptic vibration:

context.componentChangeHaptic(const Haptics());

Platform

Enum that all package components use for platform decomposition.
The default value is extension from defaultTargetPlatform FPCPlatform.values.fromTargetPlatform(defaultTargetPlatform);.
Get the actual platform in the widget tree using context:

final FPCPlatform platform = context.componentPlatform;

The method allows you to change the current platform:

context.componentChangePlatform(platform: FPCPlatform.Android);

Size

An abstraction of a sizes that all package components use.
The default value is const FPCDefaultSize();.
Get the actual sizes instance in the widget tree:

final IFPCSize size = context.componentSize;

The method allows you to change the current sizes:

context.componentChangeSize(const Sizes());

You can get the actual size state for platform-decomposing entities:

final FPCSizeState sizeState = context.componentSizeState;

final BorderRadius borderRadiusButton = sizeState.borderRadiusButton;
final BorderRadius borderRadiusCard = sizeState.borderRadiusCard;
final BorderRadius borderRadiusDialog = sizeState.borderRadiusDialog;
final BorderRadius borderRadiusField = sizeState.borderRadiusField;
final BorderRadius borderRadiusModal = sizeState.borderRadiusModal;
final BorderRadius borderRadiusSegmentControl = sizeState.borderRadiusSegmentControl;
final BorderRadius borderRadiusSnackbar = sizeState.borderRadiusSnackbar;
final BorderRadius borderRadiusToggle = sizeState.borderRadiusToggle;
final double borderWidthButton = sizeState.borderWidthButton;
final double borderWidthCard = sizeState.borderWidthCard;
final double borderWidthField = sizeState.borderWidthField;
final double borderWidthSegmentControl = sizeState.borderWidthSegmentControl;
final double borderWidthSnackbar = sizeState.borderWidthSnackbar;

TextStyle

An abstraction of a font weights and families that text components use.
The default value is const FPCDefaultTextStyle();.
Get the actual text style instance in the widget tree:

final IFPCTextStyle textStyle = context.componentTextStyle;

The method allows you to change the current text styles:

context.componentChangeTextStyle(const TextStyles());

Theme

An abstraction of a theme that all package components use.
The default value is FPCDefaultLightTheme();.
There is also a dark theme for example - FPCDefaultDarkTheme();.
Get the actual theme instance in the widget tree:

final IFPCTheme theme = context.componentTheme;

The method allows you to change the current theme:

context.componentChangeTheme(DarkTheme());

You can get the actual theme state for platform-decomposing entities:

final FPCThemeState themeState = context.componentThemeState;

final Color barrierColorExpandedModal = themeState.barrierColorExpandedModal;
final Color barrierColorPopUpModal = themeState.barrierColorPopUpModal;
final Color barrierColorDialog = themeState.barrierColorDialog;

TimeOfDay

An abstraction of TimeOfDay pickers.
The default value is FPCDefaultTimeOfDay();.
Get the actual time of day instance in the widget tree:

final IFPCTimeOfDay timeOfDay = context.componentTimeOfDay;

The method allows you to change the current times of day:

context.componentChangeTimeOfDay(TimesOfDay());

Components

Animation

All animations durations are guided by slow, default and fast durations from the size config.

AnimatedAlign

Standard AnimatedAlign widget.

FPCAnimatedAlign(
  child: Child(),
),

AnimatedContainer

Standard AnimatedContainer widget.

FPCAnimatedContainer(),

AnimatedCrossFade

Standard AnimatedCrossFade widget.

FPCAnimatedCrossFade(
  condition: condition,
  firstChild: FirstChild(),
  secondChild: SecondChild(),
),

AnimatedDefaultTextStyle

Standard AnimatedDefaultTextStyle widget.

AnimatedDefaultTextStyle(
  child: Child(),
),

AnimatedFadeIn

Fade-In from left, right, up and down animation widget.

FPCAnimatedFadeIn(
  isAnimate: animate,
  child: Child(),
),

AnimatedFadeOut

Fade-Out from left, right, up and down animation widget.

FPCAnimatedFadeOut(
  isAnimate: animate,
  child: Child(),
),

AnimatedOpacityStack

Stack of two AnimatedOpacity widgets.
Needed when the widget should not adjust to the size of the first or second child.

FPCAnimatedOpacityStack(
  condition: condition,
  firstChild: FirstChild(),
  secondChild: SecondChild(),
),

AnimatedOpacity

Standard AnimatedOpaicty widget.

FPCAnimatedOpacity(
  condition: condition,
  child: Child(),
),

AnimatedOpenContainer

Transition navigation widget.

FPCAnimatedOpenContainer(
  type: FPCOpenContainerTransitionType.fade,
  closedBuilder: (BuildContext context, VoidCallback openContainer) => ClosedContainer(),
  openBuilder: (BuildContext context) => OpenContainer(),
),

AnimatedPositioned

Standard AnimatedPositioned widget.

FPCAnimatedPositioned(
  child: Child(),
),

AnimatedSize

Standard AnimatedSizewidget.

FPCAnimatedSize(
  child: Child(),
),

AnimatedSwitcher

Standard AnimatedSwitcher widget.

FPCAnimatedSwitcher(
  child: Child(),
),

AnimatedTransitionSwitcher

Transition widget with great animation change of child.

FPCAnimatedTransitionSwitcher(
  type: FPCTransitionType.scaled,
  child: Child(),
),

App

Main root widget of the application, decomposed by platform.

FPCApp(
  context: context,
),

AppBar

AppBar

Main app bar widget, decomposed by platform.
Ready-made components contains screen app bar:

FPCScreenAppBar(
  context: context,
),

iOS (Cupertino)	Android (Material)

Ready-made components white always screen app bar:

FPCWhiteAlwaysScreenAppBar(
  context: context,
),

iOS (Cupertino)	Android (Material)

Ready-made components expanded modal app bar:

FPCExpandedModalAppBar(
  context: context,
),

iOS (Cupertino)	Android (Material)

Ready-made components white always expanded modal app bar:

FPCWhiteAlwaysExpandedModalAppBar(
  context: context,
),

iOS (Cupertino)	Android (Material)

BlurAppBar

Main app bar widget wrapped in blur, decomposed by platform.
Blur screen app bar:

FPCBlurScreenAppBar(
  context: context,
),

iOS (Cupertino)	Android (Material)

Blur white always screen app bar:

FPCBlurWhiteAlwaysScreenAppBar(
  context: context,
),

iOS (Cupertino)	Android (Material)

Blur expanded modal app bar:

FPCBlurExpandedModalAppBar(
  context: context,
),

iOS (Cupertino)	Android (Material)

Blur white always expanded modal app bar:

FPCBlurWhiteAlwaysExpandedModalAppBar(
  context: context,
),

iOS (Cupertino)	Android (Material)

Badge

CounterBadge

Badge content of notifications counter with solid background color.

FPCPrimaryCounterBadge(
  count: count,
  child: Child(),
),

GradientCounterBadge

Badge content of notifications counter with gradient background color.

FPCPrimaryGradientCounterBadge(
  count: count,
  child: Child(),
),

DotBadge

Badge content of dot container with solid background color.

FPCPrimaryDotBadge(
  isShow: isShow,
  child: Child(),
),

GradientDotBadge

Badge content of dot container with gradient background color.

FPCPrimaryGradientDotBadge(
  isShow: isShow,
  child: Child(),
),

Blur

Blur component for creating blur effect for parent.

FPCBlur(
  child: Child(),
),

Button

Button

Button component with solid background color, decomposed by platform.
Ready-made default button has loading properties.

FPCPrimaryButton(
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

Ready-made buttons contains label buttons:

FPCPrimaryLabelButton(
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

And also outline buttons:

FPCPrimaryOutlineButton(
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

GradientButton

Button component with gradient background color, decomposed by platform.
Ready-made default button has loading properties.

FPCPrimaryGradientButton(
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

Ready-made buttons contains label buttons:

FPCPrimaryGradientLabelButton(
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

And also outline buttons:

FPCPrimaryGradientOutlineButton(
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

IconButton

Icon button component, decomposed by platform.

FPCBasicIconButton(
  onPressed: () {},
  child: Child(),
),

iOS (Cupertino)	Android (Material)

ModalButton

Dedicated decomposed buttons, separately for modals.
Cupertino modal button:

FPCCupertinoModalButton(
  onPressed: () {},
),

Expanded modal close button:

FPCExpandedModalCloseButton(
  cupertinoLocale: "Back",
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

Pop up modal button:

FPCPopUpModalCloseButton(
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

White always modal close button:

FPCWhiteAlwaysExpandedModalCloseButton(
  cupertinoLocale: "Back",
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

Card

Card

Card component with solid background color.

FPCPrimaryCard(
  child: Child(),
),

GradientCard

Card component with gradient background color.

FPCPrimaryGradientCard(
  child: Child(),
),

SelectCard

Clickable card component with solid background color.

FPCPrimarySelectCard(
  onPressed: () {},
  child: Child(),
),

iOS (Cupertino)	Android (Material)

GradientSelectCard

Clickable card component with gradient background color.

FPCPrimaryGradientSelectCard(
  onPressed: () {},
  child: Child(),
),

iOS (Cupertino)	Android (Material)

Checkbox

Checkbox component, decomposed by platform.

FPCPrimaryCheckbox(
  value: value,
  onChanged: (bool value) {},
),

iOS (Cupertino)	Android (Material)

CodeField

CodeField

Component field code, which is designed to display any typed SMS code with solid background color.

FPCPrimaryCodeField(
  length: length,
),

GradientCodeField

Component field code, which is designed to display any typed SMS code with solid gradient color.

FPCPrimaryGradientCodeField(
  length: length,
),

Common

ComponentDisabledOverlay

Container for disabled overlaying are guided by theme config.

CupertinoNavigator

Default CupertinoTabView widget supplemented by methods.

TextInputHandlerFormatter

Text handler for autovalidating.

Default

ListView

Default ListView widget are guided by size config.

Padding

Default Padding widget are guided by size config.

Dialog

Dialog component, decomposed by platform.

FPCDialog(
  title: "Title",
  items: [
    FPCDialogItem(
      title: "First Item",
      onPressed: () {},
    ),
    FPCDialogItem(
      title: "Second Item",
      onPressed: () {},
    ),
  ],
),

iOS (Cupertino)	Android (Material)

Divider

Simple thin container for visual separation.

FPCPrimaryDivider(),

FormField

Form field does not repeat the design accuracy of platform components, since pure native fields are very rarely used in good productive projects.
The design of this field is suitable for most applications and is more suitable.

FormField

Form field component with solid colors.

FPCPrimaryFormField(
  labelText: "Label",
),

GradientFormField

Form field component with gradient colors.

FPCPrimaryGradientFormField(
  labelText: "Label",
),

SelectField

Clickable field component with solid colors, decomposed by platform.

FPCSelectField(
  title: "Title",
  labelText: "Label",
),

iOS (Cupertino)	Android (Material)

GradientSelectField

Clickable field component with gradient colors, decomposed by platform.

FPCGradientSelectField(
  title: "Title",
  labelText: "Label",
),

iOS (Cupertino)	Android (Material)

Global

Classes that contains platform-decomposed functions to invoke the required interface behaviors.

Dialog

Static methods for opening dialogs:

showFPCDialog(
  context: context,
  child: Child(),
);

Modal

Static methods for opening modals:

showFPCExpandedModal(
  context: context,
  child: Child(),
);

showFPCPopUpModal(
  context: context,
  child: Child(),
);

Picker

Static methods for opening pickers:

showFPCDatePicker(
  context: context,
  cupertinoModalBuilder: (BuildContext context) => CupertinoModalBuilder(),
);

showFPCTimePicker(
  context: context,
  cupertinoModalBuilder: (BuildContext context) => CupertinoModalBuilder(),
);

Snackbar

Static methods for showing snackbars:

showFPCSnackBar(
  context: context,
  child: Child(),
);

showFPCSnackBar(
  context: context,
);

Gradient

GradientMask

Widget for overlaying a gradient mask.

FPCGradientMask(
  gradient: Gradient(),
  child: Child(),
),

LinearGradient

Standard LinearGradient widget are guided by theme config.

FPCLinearGradient(
  context: context,
  colors: [
    FirstColor(),
    SecondColor(),
  ],
),

RadialGradient

Standard RadialGradient widget are guided by theme config.

FPCRadialGradient(
  context: context,
  colors: [
    FirstColor(),
    SecondColor(),
  ],
),

SweepGradient

Standard SweepGradient widget are guided by theme config.

FPCSweepGradient(
  context: context,
  colors: [
    FirstColor(),
    SecondColor(),
  ],
),

Icon

All icons sizes are guided by small, default and large sizes from the size config.
Class with icons in all theme colors.

FPCIcon.primary(
  context: context,
  icon: Icon(),
),

Indicator

CircularIndicator

Circular indicator component with solid color, decomposed by platform.

FPCCircularIndicator.primary(
  context: context,
),

iOS (Cupertino)	Android (Material)

GradientCircularIndicator

Circular indicator component with gradient color, decomposed by platform.

FPCCircularIndicator.primaryGradient(
  context: context,
),

iOS (Cupertino)	Android (Material)

PageIndicator

Page indicator component with solid color, ideal for displaying the current page index of the carousel.

FPCPrimaryPageIndicator(
  length: length,
  index: index,
),

GradientPageIndicator

Page indicator component with gradient color, ideal for displaying the current page index of the carousel.

FPCPrimaryGradientPageIndicator(
  length: length,
  index: index,
),

ProgressIndicator

Progress indicator component with solid color, needed to display the progress level.

FPCPrimaryProgressIndicator(
  value: value,
),

StoryIndicator

Story indicator component with solid color, needed to display the steps and the progress level.

FPCPrimaryStoryIndicator(
  length: length,
  index: index,
  value: value,
),

Keyboard

KeyboardButton

Button component of keyboard.

FPCKeyboardButton(
  onPressed: () {},
  child: Child(),
),

iOS (Cupertino)	Android (Material)

KeyboardNumberButton

Button component of keyboard, specially for only numbers.

FPCKeyboardNumberButton(
  number: 1,
  onPressed: () {},
),

iOS (Cupertino)	Android (Material)

Keyboard

Large widget that arranges keyboard buttons.

FPCKeyboard(
  onPressed: (int value) {},
),

iOS (Cupertino)	Android (Material)

List

ListRefresh

List refresh component to display the loading of asynchronous behavior, decomposed by platform.

FPCListRefresh(
  controller: controller,
  onRefresh: onRefresh,
  child: Child(),
),

iOS (Cupertino)	Android (Material)

ListSection

Card component, needed to display multiple rows of settings buttons, decomposed by platform.

FPCListSection(
  items: [
    FPCListSectionItem(
      title: "First Item",
      onPressed: () {},
    ),
    FPCListSectionItem(
      title: "Second Item",
      onPressed: () {},
    ),
  ],
),

iOS (Cupertino)	Android (Material)

Modal

ActionModal

Action modal component for selecting a specific action, decomposed by platform.

FPCActionModal(
  items: [
    FPCActionModalItem(
      title: "First Action",
      onPressed: () {},
    ),
    FPCActionModalItem(
      title: "Second Action",
      onPressed: () {},
    ),
  ],
),

iOS (Cupertino)	Android (Material)

ExpandedModal

Expanded modal scaffold component to display large modal content.

FPCExpandedModal(
  body: Child(),
),

iOS (Cupertino)	Android (Material)

Ready-made components contains expanded modal with always black background.

FPCBlackAlwaysExpandedModal(
  body: Child(),
),

iOS (Cupertino)	Android (Material)

BlurExpandedModal

Expanded modal scaffold component to display large modal content with blur app bar.

FPCBlurExpandedModal(
  body: Child(),
),

iOS (Cupertino)	Android (Material)

Ready-made components contains expanded modal with always black background with blur app bar.

FPCBlurBlackAlwaysExpandedModal(
  body: Child(),
),

iOS (Cupertino)	Android (Material)

PopUpModal

Small modal window component to display small modal content.

FPCPopUpModal(
  body: Child(),
),

iOS (Cupertino)	Android (Material)

Navigation

BottomNavigationBar

BottomNavigationBar

Bottom navigation bar component, decomposed by platform.

FPCBottomNavigationBar(
  index: index,
  onPressed: (int value) {},
  items: [
    FPCBottomNavigationBarIconItem(
      icon: Icon(),
      label: "First Item",
    ),
    FPCBottomNavigationBarWidgetItem(
      child: Child(),
      label: "Second Item",
    ),
  ],
),

iOS (Cupertino)	Android (Material)

BlurBottomNavigationBar

Bottom navigation bar component wrapped in blur, decomposed by platform.

FPCBlurBottomNavigationBar(
  index: index,
  onPressed: (int value) {},
  items: [
    FPCBottomNavigationBarIconItem(
      icon: Icon(),
      label: "First Item",
    ),
    FPCBottomNavigationBarWidgetItem(
      child: Child(),
      label: "Second Item",
    ),
  ],
),

iOS (Cupertino)	Android (Material)

Navigator

Special navigator widget, decomposed by platform.

FPCNavigator(),

iOS (Cupertino)	Android (Material)

Route

Static routes methods, decomposed by platform.

FPCRoute.pageRoute(
  platform: platform,
  child: Child(),
),

FPCRoute.pageRouteFromContext(
  context: context,
  child: Child(),
),

FPCRoute.pageRouteFade(
  child: Child(),
),

iOS (Cupertino)	Android (Material)

Picker

DatePicker

Not a simple component that decomposes the vision of a date picker.
There are different behaviors for different platforms:
Android - Wrapper for native date picker dialog.
iOS - Native date picker carousel.

FPCDatePicker(),

iOS (Cupertino)	Android (Material)

TimePicker

Not a simple component that decomposes the vision of a time picker.
There are different behaviors for different platforms:
Android - Wrapper for native time picker dialog.
iOS - Native time picker carousel.

FPCTimePicker(),

iOS (Cupertino)	Android (Material)

PINField

PINField

PIN field component with solid colors.

FPCPrimaryPINField(
  length: length,
),

GradientPINField

PIN field component with gradient colors.

FPCPrimaryGradientPINField(
  length: length,
),

Radio

Radio component, decomposed by platform.

FPCPrimaryRadio<String>(
  value: value,
  groupValue: groupValue,
  onChanged: (String value) {},
),

iOS (Cupertino)	Android (Material)

Scaffold

Standard scaffold widget, decomposed by platform.

FPCScaffold(
  body: Child(),
),

iOS (Cupertino)	Android (Material)

Scrollbar

Scrollbar component, decomposed by platform.

FPCScrollbar(
  body: Child(),
),

iOS (Cupertino)	Android (Material)

SegmentControl

SegmentControl

Segment control component with solid colors, decomposed by platform.

FPCPrimarySegmentControl<String>(
  value: value,
  onChanged: (String value) {},
  items: [
    FPCSegmentControlItem(
      value: "First Item",
      title: "First Item",
    ),
    FPCSegmentControlItem(
      value: "Second Item",
      title: "Second Item",
    ),
  ],
),

iOS (Cupertino)	Android (Material)

GradientSegmentControl

Segment control component with gradient colors, decomposed by platform.

FPCPrimaryGradientSegmentControl<String>(
  value: value,
  onChanged: (String value) {},
  items: [
    FPCSegmentControlItem(
      value: "First Item",
      title: "First Item",
    ),
    FPCSegmentControlItem(
      value: "Second Item",
      title: "Second Item",
    ),
  ],
),

iOS (Cupertino)	Android (Material)

Shimmer

Shimmer

Special component for loading animation with solid color.

FPCGreyShimmer(),

GradientShimmer

Special component for loading animation with gradient color.

FPCGreyGradientShimmer(),

Slider

Slider component, decomposed by platform.

FPCPrimarySlider(
  value: value,
  onChanged: (double value) {},
),

iOS (Cupertino)	Android (Material)

SlidingSegmentControl

Sliding segment control compoennt does not have a direct analogue on android, therefore it does not have a decomposition for this platform.

SlidingSegmentControl

Sliding Segment control component with solid colors.

FPCPrimarySlidingSegmentControl<String>(
  value: value,
  onChanged: (String value) {},
  items: [
    FPCSlidingSegmentControlItem(
      value: "First Item",
      title: "First Item",
    ),
    FPCSlidingSegmentControlItem(
      value: "Second Item",
      title: "Second Item",
    ),
  ],
),

SliverNavigationAppBar

Ready-made sliver navigation app bar component, decomposed by platform.

FPCSliverNavigationAppBar(),

iOS (Cupertino)	Android (Material)

Snackbar

Snackbar

Snackbar component with solid colors.

FPCPrimarySnackbar(
  child: Child(),
),

Ready-made buttons contains outlined snackbars.

FPCPrimaryOutlineSnackbar(
  child: Child(),
),

GradientSnackbar

Snackbar component with gradient colors.

FPCPrimaryGradientSnackbar(
  child: Child(),
),

Ready-made buttons contains outlined snackbars.

FPCPrimaryGradientOutlineSnackbar(
  child: Child(),
),

Switch

Switch component, decomposed by platform.

FPCPrimarySwitch(
  value: value,
  onChanged: (bool value) {},
),

iOS (Cupertino)	Android (Material)

Text

Text

Class that combines all text widgets for quick display.

FPCText.regular16Black(
  context: context,
  text: "Text",
),

TextSpan

Ready-made shell widget for receiving text span items.

FPCTextSpan(
  children: [
    FPCTextSpanItem.regular16Black(
      context: context,
      text: "First Item",
    ),
    FPCTextSpanItem.regular16Black(
      context: context,
      text: "Second Item",
    ),
  ],
),

TextStyle

Class that combines all text widgets for quick use.

Toggle

One of the proposed visions of the segment control component.

Toggle

Toggle component with colid colors, decomposed by platform.

FPCPrimaryToggle<String>(
  value: value,
  onChanged: (double value) {},
  items: [
    FPCToggleItem(
      value: "First Item",
      title: "First Item",
    ),
    FPCToggleItem(
      value: "Second Item",
      title: "Second Item",
    ),
  ],
),

iOS (Cupertino)	Android (Material)

GradientToggle

Toggle component with gradient colors, decomposed by platform.

FPCPrimaryGradientToggle<String>(
  value: value,
  onChanged: (double value) {},
  items: [
    FPCToggleItem(
      value: "First Item",
      title: "First Item",
    ),
    FPCToggleItem(
      value: "Second Item",
      title: "Second Item",
    ),
  ],
),

iOS (Cupertino)	Android (Material)

TODO

1. Duplication of all colors in ready-made components for easy overwriting;
2. Elevation of components;
3. Support WEB.

Additional Information

For more details see example project.
And feel free to open an issue if you find any bugs or errors or suggestions.