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
- TargetPlatform
- Theme
- Size
- Text Style
- 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.
custom_rounded_rectangle_border - additional class for segment control component.
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
        platform: TargetPlatform.iOS,
        theme: LightTheme(),
        size: Sizes(),
        textStyle: TextStyles(),
        haptic: Haptics(),
        child: const HomeWidget(),
      ),
    );

class HomeWidget extends StatelessWidget {
  const HomeWidget({Key? key});

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

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

TargetPlatform #

Standard enum from Dart Foundation.
The default value is defaultTargetPlatform.
Get the actual platform in the widget tree:

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

The method allows you to change the current platform:

FPCConfig.of(context).changePlatform(platform: TargetPlatform.iOS);

Theme #

An abstraction of a theme that all package components use.
The default value is FPCDefaultTheme.defaultLightTheme.
There is also a dark theme for example - FPCDefaultTheme.defaultDarkTheme.
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: LightTheme());

Size #

An abstraction of a sizes that all package components use.
The default value is FPCDefaultSize.defaultSize.
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.defaultTextStyle.
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());

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 #

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

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

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 #

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)

Navigation #

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

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

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 #

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

Sliver Navigation App Bar #

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

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 #

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 1.0.7 flutter_platform_component: ^1.0.7 copied to clipboard

Metadata

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 #

TargetPlatform #

Theme #

Size #

Text Style #

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

RadialGradient

flutter_platform_component 1.0.7
flutter_platform_component: ^1.0.7 copied to clipboard