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
Design
Dependencies
Usage
Main entites
- Config
- Platform
- Theme
- Size
- Text Style
- Duration
- Date Time
- Time Of Day
- Haptic
Components
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.

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:

The component should not contain business logic;
All components must aspire to the behavior of the target platform;
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;
Component change the color of the disabled component, if it only has not background color;
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
        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,
),

Main entites

Config

A standard config widget that exposes all of the package's abstract dependencies.
Get the current config in the widget tree:

final FPCConfig config = FPCConfig.of(context);

Platform

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

final FPCPlatform platform = FPCConfig.of(context).platform;

The method allows you to change the current platform:

FPCConfig.of(context).changePlatform(platform: FPCPlatform.Android);

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 = FPCConfig.of(context).theme;

The method allows you to change the current theme:

FPCConfig.of(context).changeTheme(theme: DarkTheme());

Size

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

final IFPCSize size = FPCConfig.of(context).size;

The method allows you to change the current sizes:

FPCConfig.of(context).changeSize(size: Sizes());

Text Style

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

final IFPCTextStyle textStyle = FPCConfig.of(context).textStyle;

The method allows you to change the current text styles:

FPCConfig.of(context).changeTextStyle(textStyle: TextStyles());

Duration

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

final IFPCDuration duration = FPCConfig.of(context).duration;

The method allows you to change the current durations:

FPCConfig.of(context).changeDuration(haptic: Durations());

Date Time

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

final IFPCDateTime dateTime = FPCConfig.of(context).dateTime;

The method allows you to change the current date times:

FPCConfig.of(context).changeDateTime(haptic: DateTimes());

Time Of Day

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

final IFPCTimeOfDay timeOfDay = FPCConfig.of(context).timeOfDay;

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

FPCConfig.of(context).changeTimeOfDay(haptic: TimesOfDay());

Haptic

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

final IFPCHaptic haptic = FPCConfig.of(context).haptic;

The method allows you to change the current haptic vibration:

FPCConfig.of(context).changeHaptic(haptic: Haptics());

Components

Animation

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

Animated Container

Standard AnimatedContainer widget.

  FPCAnimatedContainer(),

Animated Cross Fade

Standard AnimatedCrossFade widget.

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

Animated Fade In

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

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

Animated Fade Out

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

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

Animated Opacity Stack

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(),
  ),

Animated Opacity

Standard AnimatedOpaicty widget.

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

Animated Switcher

Standard AnimatedSwitcher widget.

  FPCAnimatedSwitcher(
    child: Child(),
  ),

Animated Transition Switcher

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,
  ),

App Bar

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)

Blur App Bar

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

Counter Badge

Badge content of notifications counter with solid background color.

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

Gradient Counter Badge

Badge content of notifications counter with gradient background color.

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

Dot Badge

Badge content of dot container with solid background color.

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

Gradient Dot Badge

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 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)

Gradient Button

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)

Icon Button

Icon button component, decomposed by platform.

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

iOS (Cupertino)	Android (Material)

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 component with solid background color.

  FPCPrimaryCard(
    child: Child(),
  ),

Gradient Card

Card component with gradient background color.

  FPCPrimaryGradientCard(
    child: Child(),
  ),

Select Card

Clickable card component with solid background color.

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

iOS (Cupertino)	Android (Material)

Gradient Select Card

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)

Code Field

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

  FPCPrimaryCodeField(
    length: length,
  ),

Gradient Code Field

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

  FPCPrimaryGradientCodeField(
    length: length,
  ),

Common

Component Disabled Overlay

Container for disabled overlaying are guided by theme config.

Cupertino Navigator

Default CupertinoTabView widget supplemented by methods.

Text Input Handler Formatter

Text handler for autovalidating.

Default

List View

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(),

Form Field

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.

Form Field

Form field component with solid colors.

  FPCPrimaryFormField(
    labelText: "Label",
  ),

Gradient Form Field

Form field component with gradient colors.

  FPCPrimaryGradientFormField(
    labelText: "Label",
  ),

Select Field

Clickable field component with solid colors, decomposed by platform.

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

iOS (Cupertino)	Android (Material)

Gradient Select Field

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(),
  );

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

Gradient mask

Widget for overlaying a gradient mask.

  FPCGradientMask(
    contgradientext: 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

Circular Indicator

Circular indicator component with solid color, decomposed by platform.

  FPCCircularIndicator.primary(
    context: context,
  ),

iOS (Cupertino)	Android (Material)

Gradient Circular Indicator

Circular indicator component with gradient color, decomposed by platform.

  FPCCircularIndicator.primaryGradient(
    context: context,
  ),

iOS (Cupertino)	Android (Material)

Page Indicator

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

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

Gradient Page Indicator

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

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

Progress Indicator

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

  FPCPrimaryProgressIndicator(
    value: value,
  ),

Story Indicator

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

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

Keyboard

Keyboard Button

Button component of keyboard.

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

iOS (Cupertino)	Android (Material)

Keyboard Number Button

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

List Refresh

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

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

iOS (Cupertino)	Android (Material)

List Section

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)

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)

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)

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)

Small modal window component to display small modal content.

  FPCPopUpModal(
    body: Child(),
  ),

iOS (Cupertino)	Android (Material)

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)

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

Date Picker

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)

Time Picker

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)

PIN Field

PIN field component with solid colors.

  FPCPrimaryPINField(
    length: length,
  ),

Gradient PIN Field

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)

Segment Control

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)

Gradient Segment Control

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

Special component for loading animation with solid color.

  FPCGreyShimmer(),

Gradient Shimmer

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)

Sliding Segment Control

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

Sliding Segment Control

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",
      ),
    ],
  ),

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

  FPCSliverNavigationAppBar(),

iOS (Cupertino)	Android (Material)

Snackbar

Snackbar component with solid colors.

  FPCPrimarySnackbar(
    child: Child(),
  ),

Ready-made buttons contains outlined snackbars.

  FPCPrimaryOutlineSnackbar(
    child: Child(),
  ),

Gradient Snackbar

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

Class that combines all text widgets for quick display.

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

Text Span

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",
      ),
    ],
  ),

Text Style

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)

Gradient Toggle

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

Duplication of all colors in ready-made components for easy overwriting;
Elevation of components;
Refactoring circular indicators from static methods to widgets;
Refactoring icons from static methods to widgets;
Refactoring text widgets from static methods to widgets;
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.

Flutter Platform Component

Getting Started

Benefits

Platform decomposition

One theme contract

Basic entities

Color scheme

Boilerplate

Unified API

Validation

Disabled components

Design

Dependencies

Usage

Main entites

Config

Platform

Theme

Size

Text Style

Duration

Date Time

Time Of Day

Haptic

Components

Animation

Animated Container

Animated Cross Fade

Animated Fade In

Animated Fade Out

Animated Opacity Stack

Animated Opacity

Animated Switcher

Animated Transition Switcher

App

App Bar

App Bar

Blur App Bar

Badge

Counter Badge

Gradient Counter Badge

Dot Badge

Gradient Dot Badge

Blur

Button

Button

Gradient Button

Icon Button

Modal Button

Card

Card

Gradient Card

Select Card

Gradient Select Card

Checkbox

Code Field

Code Field

Gradient Code Field

Common

Component Disabled Overlay

Cupertino Navigator

Text Input Handler Formatter

Default

List View

Padding

Dialog

Divider

Form Field

Form Field

Gradient Form Field

Select Field

Gradient Select Field

Global

Dialog

Modal

Picker

Snackbar

Gradient

Gradient mask

LinearGradient