flutter_platform_component 4.0.0 copy "flutter_platform_component: ^4.0.0" to clipboard
flutter_platform_component: ^4.0.0 copied to clipboard

Published 5 months ago • Latest: 4.0.3
[unknown platforms]
→

Metadata

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

More...

Flutter Platform Component

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

iOS (Cupertino) Android (Material)
✅ ✅

Pub Likes Pub Version License: MIT


VS Code Snippets have been generated for this package:


Getting Started #


Benefits #

The package works according to the principle: fill out needed contracts - 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.

Component entities #

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

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, accent, success, warning and danger colors with dark/default/light shades).
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.

Snippets #

VS Code snippets have been generated for this package for convenient development and creating your own widget wrappers.


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;
dotted_border - dotted border container;
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 #

1) Fill entities #

Create and fill the presentational entities you need from the interfaces that this package provides:

class Animations extends FPCDefaultAnimation {
  const Animations();
  // Override properties
}

class TimesOfDay extends FPCDefaultTimeOfDay {
  const TimesOfDay();
  // Override properties
}

class DateTimes extends FPCDefaultDateTime {
  DateTimes();
  // Override properties
}

class Durations extends FPCDefaultDuration {
  const Durations();
  // Override properties
}

class Haptics extends FPCDefaultHaptic {
  const Haptics();
  // Override properties
}

class LightTheme extends FPCDefaultLightTheme {
  const LightTheme();
  // Override properties
}

class Sizes extends FPCDefaultSize {
  const Sizes();
  // Override properties
}

class Fonts extends FPCDefaultFont {
  const Fonts();
  // Override properties
}

2) Initialize root widget #

Initialize the main component widget at the root:

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

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

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

3) Use components #

All basic components are named "FPC

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

All ready-made components are named "FPC

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 FPCAnimation animation = context.fpcAnimation;

The method allows you to change the current animations:

context.fpcChangeDateTime(
  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 FPCDateTime dateTime = context.fpcDateTime;

The method allows you to change the current date times:

context.fpcChangeDateTime(
  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 FPCDuration duration = context.fpcDuration;

The method allows you to change the current durations:

context.fpcChangeDuration(
  const Durations()
);

Font #

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

final FPCFont font = context.fpcFont;

The method allows you to change the current text styles:

context.fpcChangeFont(
  const Fonts()
);

Haptic #

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

final FPCHaptic haptic = context.fpcHaptic;

The method allows you to change the current haptic vibration:

context.fpcChangeHaptic(
  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.fpcPlatform;

The method allows you to change the current platform:

context.fpcChangePlatform(
  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 FPCSize size = context.fpcSize;

The method allows you to change the current sizes:

context.fpcChangeSize(
  const Sizes()
);

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

final FPCsizeScope sizeScope = context.fpcSizeScope;

final BorderRadius borderRadiusBottomSheet = sizeScope.borderRadiusBottomSheet;
final BorderRadius borderRadiusButton = sizeScope.borderRadiusButton;
final BorderRadius borderRadiusCard = sizeScope.borderRadiusCard;
final BorderRadius borderRadiusDialog = sizeScope.borderRadiusDialog;
final BorderRadius borderRadiusField = sizeScope.borderRadiusField;
final BorderRadius borderRadiusPopUpMenu = sizeScope.borderRadiusPopUpMenu;
final BorderRadius borderRadiusSegmentControl = sizeScope.borderRadiusSegmentControl;
final BorderRadius borderRadiusSnackBar = sizeScope.borderRadiusSnackBar;
final BorderRadius borderRadiusToggle = sizeScope.borderRadiusToggle;

final double borderWidthButton = sizeScope.borderWidthButton;
final double borderWidthCard = sizeScope.borderWidthCard;
final double borderWidthField = sizeScope.borderWidthField;
final double borderWidthSegmentControl = sizeScope.borderWidthSegmentControl;
final double borderWidthSnackBar = sizeScope.borderWidthSnackBar;

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 FPCTheme theme = context.fpcTheme;

The method allows you to change the current theme:

context.fpcChangeTheme(
  DarkTheme()
);

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

final FPCThemeScope themeScope = context.fpcThemeScope;

final Color barrierColorExpandedBottomSheet = themeScope.barrierColorExpandedBottomSheet;
final Color barrierColorSmallBottomSheet = themeScope.barrierColorSmallBottomSheet;
final Color barrierColorDialog = themeScope.barrierColorDialog;

TimeOfDay #

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

final FPCTimeOfDay timeOfDay = context.fpcTimeOfDay;

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

context.fpcChangeTimeOfDay(
  const TimesOfDay()
);

Components #

Platform #

App #

FPCApp

Basic root widget of the application, decomposed by platform.
Example of using a component:

FPCApp(
  home: const Child(),
),

AppBar #

FPCAppBar

Basic app bar component, decomposed by platform.
Example of using a component:

FPCAppBar(
  context,
),

FPCScreenAppBar

Ready-made component contains screen app bar.
Example of using a ready-made component:

FPCScreenAppBar(
  context,
),
iOS (Cupertino) Android (Material)

FPCWhiteAlwaysScreenAppBar

Ready-made component white always screen app bar.
Example of using a ready-made component:

FPCWhiteAlwaysScreenAppBar(
  context,
),
iOS (Cupertino) Android (Material)

FPCExpandedBottomSheetAppBar

Ready-made component expanded bottom sheet app bar.
Example of using a ready-made component:

FPCExpandedBottomSheetAppBar(
  context,
),
iOS (Cupertino) Android (Material)

FPCWhiteAlwaysExpandedBottomSheetAppBar

Ready-made component white always expanded bottom sheet app bar.
Example of using a ready-made component:

FPCWhiteAlwaysExpandedBottomSheetAppBar(
  context,
),
iOS (Cupertino) Android (Material)

FPCBlurAppBar

Basic app bar widget wrapped in blur, decomposed by platform.
Example of using a component:

FPCBlurAppBar(
  context,
),

FPCBlurScreenAppBar

Blur screen app bar.
Example of using a ready-made component:

FPCBlurScreenAppBar(
  context,
),
iOS (Cupertino) Android (Material)

FPCBlurWhiteAlwaysScreenAppBar

Blur white always screen app bar.
Example of using a ready-made component:

FPCBlurWhiteAlwaysScreenAppBar(
  context,
),
iOS (Cupertino) Android (Material)

FPCBlurExpandedBottomSheetAppBar

Blur expanded bottom sheet app bar.
Example of using a ready-made component:

FPCBlurExpandedBottomSheetAppBar(
  context,
),
iOS (Cupertino) Android (Material)

FPCBlurWhiteAlwaysExpandedBottomSheetAppBar

Blur white always expanded bottom sheet app bar.
Example of using a ready-made component:

FPCBlurWhiteAlwaysExpandedBottomSheetAppBar(
  context,
),
iOS (Cupertino) Android (Material)

Badge #

FPCCounterBadge

Badge content of notifications counter with solid background color.
Example of using a ready-made component:

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

FPCGradientCounterBadge

Badge content of notifications counter with gradient background color.
Example of using a ready-made component:

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

FPCDotBadge

Badge content of dot container with solid background color.
Example of using a ready-made component:

FPCDotBadge(
  isShow: isShow,
  child: const Child(),
),

FPCGradientDotBadge

Badge content of dot container with gradient background color.
Example of using a ready-made component:

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


Blur #

Blur component for creating blur effect for parent.
Example of using a component:

FPCBlur(
  child: const Child(),
),


BottomSheet #

FPCActionBottomSheet

Action bottom sheet component for selecting a specific action, decomposed by platform.
Example of using a component:

FPCActionBottomSheet(
  items: [
    FPCActionBottomSheetItem(
      title: "First Action",
      onPressed: () {},
    ),
    FPCActionBottomSheetItem(
      title: "Second Action",
      onPressed: () {},
    ),
  ],
),
iOS (Cupertino) Android (Material)

FPCExpandedBottomSheet

Expanded modal scaffold component to display large bottom sheet content.
Example of using a component:

const FPCExpandedBottomSheet(
  body: Child(),
),
iOS (Cupertino) Android (Material)

FPCBlackAlwaysExpandedBottomSheet

Ready-made components contains expanded bottom sheet with always black background.
Example of using a component:

const FPCBlackAlwaysExpandedBottomSheet(
  body: Child(),
),
iOS (Cupertino) Android (Material)

FPCBlurExpandedBottomSheet

Expanded bottom sheet scaffold component to display large bottom sheet content with blur app bar.
Example of using a component:

const FPCBlurExpandedBottomSheet(
  body: Child(),
),
iOS (Cupertino) Android (Material)

FPCBlurBlackAlwaysExpandedBottomSheet

Ready-made components contains expanded bottom sheet with always black background with blur app bar.
Example of using a component:

const FPCBlurBlackAlwaysExpandedBottomSheet(
  body: Child(),
),
iOS (Cupertino) Android (Material)

FPCSmallBottomSheet

Small bottom sheet window component to display small content.
Example of using a component:

const FPCSmallBottomSheet(
  body: Child(),
),
iOS (Cupertino) Android (Material)

Button #

FPCButton

Button component with solid background color, decomposed by platform.
Ready-made default button has loading properties.
Example of using a ready-made component:

FPCPrimaryButton(
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

Ready-made buttons contains label buttons based on FPCButton. Example of using a ready-made component:

FPCPrimaryLabelButton(
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

FPCGradientButton

Button component with gradient background color, decomposed by platform.
Ready-made default button has loading properties.
Example of using a ready-made component:

FPCPrimaryGradientButton(
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

Ready-made buttons contains label buttons based on FPCGradientButton.
Example of using a ready-made component:

FPCPrimaryGradientLabelButton(
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

FPCDottedButton

Button component with dotted border, decomposed by platform.
Example of using a ready-made component:

FPCPrimaryDottedButton(
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

FPCOutlineButton

Button component with outline border, decomposed by platform.
Example of using a ready-made component:

FPCPrimaryOutlineButton(
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

FPCGradientOutlineButton

Also gradient outline button.
Example of using a ready-made component:

FPCPrimaryGradientOutlineButton(
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

FPCIconButton

Icon button component, decomposed by platform.
Example of using a component:

FPCIconButton(
  onPressed: () {},
  child: const Child(),
),
iOS (Cupertino) Android (Material)

FPCCupertinoBottomSheetButton

Dedicated decomposed buttons, separately for bottom sheets.
Example of using a component:

FPCCupertinoBottomSheetButton(
  onPressed: () {},
),

FPCExpandedBottomSheetCloseButton

Expanded bottom sheet close button.
Example of using a component:

FPCExpandedBottomSheetCloseButton(
  cupertinoLocale: "Back",
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

FPCSmallBottomSheetCloseButton

Small bottom sheet close button.
Example of using a component:

FPCSmallBottomSheetCloseButton(
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

FPCWhiteAlwaysExpandedBottomSheetCloseButton

White always bottom sheet close button.
Example of using a component:

FPCWhiteAlwaysExpandedBottomSheetCloseButton(
  cupertinoLocale: "Back",
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

Card #

FPCCard

Card component with solid background color.
Example of using a ready-made component:

const FPCPrimaryCard(
  child: Child(),
),

FPCGradientCard

Card component with gradient background color.
Example of using a ready-made component:

const FPCPrimaryGradientCard(
  child: Child(),
),

FPCDottedCard

Card component with dotted border.
Example of using a ready-made component:

const FPCPrimaryDottedCard(
  child: Child(),
),


Checkbox #

FPCCheckbox #

Checkbox component, decomposed by platform.
Example of using a ready-made component:

FPCPrimaryCheckbox(
  value: value,
  onChanged: (bool value) {},
),
iOS (Cupertino) Android (Material)

CodeField #

FPCCodeField

Component field code, which is designed to display any typed SMS code with solid background color.
Example of using a ready-made component:

FPCPrimaryCodeField(
  length: 6,
),

FPCGradientCodeField

Component field code, which is designed to display any typed SMS code with solid gradient color.
Example of using a ready-made component:

FPCPrimaryGradientCodeField(
  length: 6,
),


Dialog #

FPCDialog

Dialog component, decomposed by platform.
Example of using a component:

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

Divider #

FPCDivider

Simple thin container for visual separation.
Example of using a ready-made component:

const FPCPrimaryDivider(),

FPCGradientDivider

Simple thin gradient container for visual separation.
Example of using a ready-made component:

const FPCPrimaryGradientDivider(),


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.

FPCFormField

Form field component with solid colors.
Example of using a ready-made component:

FPCPrimaryFormField(
  labelText: "Label",
),

FPCGradientFormField

Form field component with gradient colors.
Example of using a ready-made component:

FPCPrimaryGradientFormField(
  labelText: "Label",
),


Global #

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

Bottom sheet

Global methods for opening bottom sheets:

showFPCExpandedBottomSheet<T>(
  context,
  child: const Child(),
);

showFPCSmallBottomSheet<T>(
  context,
  child: const Child(),
);

Dialog

Global method for opening dialogs:

showFPCDialog<T>(
  context,
  child: const Child(),
);

Picker

Global methods for opening pickers:

showFPCDatePicker(
  context,
  cupertinoBottomSheetBuilder: (BuildContext context,) => const CupertinoBottomSheetBuilder(),
);

showFPCTimePicker(
  context,
  cupertinoBottomSheetBuilder: (BuildContext context,) => const CupertinoBottomSheetBuilder(),
);

SnackBar

Global method for showing snackbar:

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

And hide current snackbar:

hideFPCSnackBar(
  context,
);

Gradient #

FPCGradientMask

Widget for overlaying a gradient mask.
Example of using a component:

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

FPCLinearGradient

Standard LinearGradient widget are guided by theme config. Example of using a class:

FPCLinearGradient(
  context,
  colors: const [
    firstColor,
    secondColor,
  ],
),

FPCRadialGradient

Standard RadialGradient widget are guided by theme config.
Example of using a class:

FPCRadialGradient(
  context,
  colors: const [
    firstColor,
    secondColor,
  ],
),

FPCSweepGradient

Standard SweepGradient widget are guided by theme config.
Example of using a class:

FPCSweepGradient(
  context,
  colors: const [
    firstColor,
    secondColor,
  ],
),


Icon #

All icons sizes are guided by small, default and large sizes from the size config.
There is no basic component, the icons are divided into separate widgets based on color and size.
Example of using a ready-made component:

const FPCPrimarySmallIcon(
  icon: Icons.icon,
),
const FPCPrimaryIcon(
  icon: Icons.icon,
),
const FPCPrimaryLargeIcon(
  icon: Icons.icon,
),


Indicator #

CircularIndicator

Circular indicator component with solid color, decomposed by platform.
There is no basic componen, the circular indicators are divided into separate widgets based on color and size.
Example of using a ready-made component:

const FPCPrimarySmallCircularIndicator(),
const FPCPrimaryCircularIndicator(),
const FPCPrimaryLargeCircularIndicator(),
iOS (Cupertino) Android (Material)

GradientCircularIndicator

Circular indicator component with gradient color, decomposed by platform.
Example of using a ready-made component:

const FPCPrimaryGradientSmallCircularIndicator(),
const FPCPrimaryGradientCircularIndicator(),
const FPCPrimaryGradientLargeCircularIndicator(),
iOS (Cupertino) Android (Material)

FPCPageIndicator

Page indicator component with solid color, ideal for displaying the current page index of the carousel.
Example of using a ready-made component:

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

FPCGradientPageIndicator

Page indicator component with gradient color, ideal for displaying the current page index of the carousel.
Example of using a ready-made component:

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

FPCProgressIndicator

Progress indicator component with solid color, needed to display the progress level.
Example of using a ready-made component:

FPCPrimaryProgressIndicator(
  value: value,
),

FPCStoryIndicator

Story indicator component with solid color, needed to display the steps and the progress level.
Example of using a ready-made component:

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


Keyboard #

FPCKeyboardButton

Button component of keyboard.
Example of using a component:

FPCKeyboardButton(
  onPressed: () {},
  child: const Child(),
),
iOS (Cupertino) Android (Material)

FPCKeyboardNumberButton

Button component of keyboard, specially for only numbers.
Example of using a component:

FPCKeyboardNumberButton(
  number: 1,
  onPressed: () {},
),
iOS (Cupertino) Android (Material)

FPCKeyboard

Large widget that arranges keyboard buttons.
Example of using a component:

FPCKeyboard(
  onPressed: (int value) {},
),
iOS (Cupertino) Android (Material)

List #

FPCListRefresh

List refresh component to display the loading of asynchronous behavior, decomposed by platform.
Example of using a component:

FPCListRefresh(
  controller: controller,
  onRefresh: onRefresh,
  child: const Child(),
),
iOS (Cupertino) Android (Material)

FPCListSection

Card component, needed to display multiple rows of settings buttons, decomposed by platform.
Example of using a component:

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

FPCBottomNavigationBar

Bottom navigation bar component, decomposed by platform.
Example of using a component:

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

FPCBlurBottomNavigationBar

Bottom navigation bar component wrapped in blur, decomposed by platform.
Example of using a component:

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

FPCNavigator

Special navigator widget, decomposed by platform.
Example of using a component:

FPCNavigator(),
iOS (Cupertino) Android (Material)

FPCRoute

Static routes methods, decomposed by platform.
Example of using a class:

FPCRoute.fromPlatform(
  platform,
  child: const Child(),
),
FPCRoute.fromContext(
  context,
  child: const Child(),
),
FPCRoute.fade(
  child: const Child(),
),
iOS (Cupertino) Android (Material)

Picker #

FPCDatePicker #

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.
Example of using a component:

FPCDatePicker(),
iOS (Cupertino) Android (Material)

FPCTimePicker #

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.
Example of using a component:

FPCTimePicker(),
iOS (Cupertino) Android (Material)

PINField #

FPCPINField

PIN field component with solid colors.
Example of using a ready-made component:

const FPCPrimaryPINField(
  length: 4,
),

FPCGradientPINField

PIN field component with gradient colors.
Example of using a ready-made component:

const FPCPrimaryGradientPINField(
  length: 4,
),


Radio #

FPCRadio

Radio component, decomposed by platform.
Example of using a ready-made component:

FPCPrimaryRadio<String>(
  value: value,
  groupValue: groupValue,
  onChanged: (String value) {},
),
iOS (Cupertino) Android (Material)

Scaffold #

FPCScaffold

Standard scaffold widget, decomposed by platform.
Example of using a component:

FPCScaffold(
  body: const Child(),
),
iOS (Cupertino) Android (Material)

Scrollbar #

FPCScrollbar

Scrollbar component, decomposed by platform.
Example of using a component:

FPCScrollbar(
  body: const Child(),
),
iOS (Cupertino) Android (Material)

SegmentControl #

FPCSegmentControl

Segment control component with solid colors, decomposed by platform.
Example of using a ready-made component:

FPCPrimarySegmentControl<String>(
  value: value,
  onChanged: (String value) {},
  items: const [
    FPCSegmentControlItem<String>(
      value: "first_item",
      title: "First Item",
    ),
    FPCSegmentControlItem<String>(
      value: "second_item",
      title: "Second Item",
    ),
  ],
),
iOS (Cupertino) Android (Material)

FPCGradientSegmentControl

Segment control component with gradient colors, decomposed by platform.
Example of using a ready-made component:

FPCPrimaryGradientSegmentControl<String>(
  value: value,
  onChanged: (String value) {},
  items: const [
    FPCSegmentControlItem<String>(
      value: "first_item",
      title: "First Item",
    ),
    FPCSegmentControlItem<String>(
      value: "second_item",
      title: "Second Item",
    ),
  ],
),
iOS (Cupertino) Android (Material)

SelectCard #

FPCSelectCard

Clickable card component with solid background color.
Example of using a ready-made component:

FPCPrimarySelectCard(
  onPressed: () {},
  child: const Child(),
),
iOS (Cupertino) Android (Material)

FPCGradientSelectCard

Clickable card component with gradient background color.
Example of using a ready-made component:

FPCPrimaryGradientSelectCard(
  onPressed: () {},
  child: const Child(),
),
iOS (Cupertino) Android (Material)

FPCDottedSelectCard

Clickable card component with dotted border.
Example of using a ready-made component:

FPCPrimaryDottedSelectCard(
  onPressed: () {},
  child: const Child(),
),
iOS (Cupertino) Android (Material)

SelectField #

FPCSelectField

Clickable field component with solid colors, decomposed by platform.
Example of using a ready-made component:

FPCPrimarySelectField(
  title: title,
  labelText: "Label",
),
iOS (Cupertino) Android (Material)

FPCGradientSelectField

Clickable field component with gradient colors, decomposed by platform.
Example of using a ready-made component:

FPCPrimaryGradientSelectField(
  title: title,
  labelText: "Label",
),
iOS (Cupertino) Android (Material)

Shimmer #

FPCShimmer

Special component for loading animation with solid color.
Example of using a ready-made component:

const FPCGreyShimmer(),

FPCGradientShimmer

Special component for loading animation with gradient color.
Example of using a ready-made component:

const FPCPrimaryGradientShimmer(),


Slider #

FPCSlider

Slider component, decomposed by platform.
Example of using a ready-made component:

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.

FPCSlidingSegmentControl

Sliding Segment control component with solid colors.
Example of using a ready-made component:

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


SliverAppBar #

Ready-made sliver navigation app bar component, decomposed by platform.
Example of using a ready-made component:

FPCSliverAppBar(),
iOS (Cupertino) Android (Material)

SnackBar #

FPCSnackBar

SnackBar component with solid colors.
Example of using a ready-made component:

const FPCSnackBar(
  child: Child(),
),

Ready-made buttons contains outline snackbars based on FPCSnackBar.
Example of using a ready-made component:

const FPCPrimaryOutlineSnackBar(
  child: Child(),
),

FPCGradientSnackBar

SnackBar component with gradient colors.
Example of using a ready-made component:

const FPCGradientSnackBar(
  child: Child(),
),

Ready-made buttons contains outline snackbars based on FPCGradientSnackBar.
Example of using a ready-made component:

const FPCPrimaryGradientOutlineSnackBar(
  child: Child(),
),


Switch #

FPCSwitch

Switch component, decomposed by platform.
Example of using a ready-made component:

FPCPrimarySwitch(
  value: value,
  onChanged: (bool value) {},
),
iOS (Cupertino) Android (Material)

Text #

FPCText

Class that combines static methods with all text widgets for quick display.
Example of using a class:

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

FPCTextSpan

Ready-made shell widget for receiving text span items.
Example of using a class:

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

FPCTextStyle

Class that combines static methods with all text styles methods.
Example of using a class:

FPCTextStyle.regular16Black(
  context,
),

Toggle #

One of the proposed visions of the segment control component.

FPCToggle

Toggle component with colid colors, decomposed by platform.
Example of using a ready-made component:

FPCPrimaryToggle<String>(
  value: value,
  onChanged: (double value) {},
  items: const [
    FPCToggleItem<String>(
      value: "first_item",
      title: "First Item",
    ),
    FPCToggleItem<String>(
      value: "second_item",
      title: "Second Item",
    ),
  ],
),
iOS (Cupertino) Android (Material)

FPCGradientToggle

Toggle component with gradient colors, decomposed by platform.
Example of using a ready-made component:

FPCPrimaryGradientToggle<String>(
  value: value,
  onChanged: (double value) {},
  items: [
    FPCToggleItem<String>(
      value: "first_item",
      title: "First Item",
    ),
    FPCToggleItem<String>(
      value: "second_item",
      title: "Second Item",
    ),
  ],
),
iOS (Cupertino) Android (Material)

Default #

Animated

All animations durations are guided by slow, default and fast durations from the size config:
FPCAnimatedAlign
FPCAnimatedContainer
FPCAnimatedCrossFade
FPCAnimatedDefaultTextStyle
FPCAnimatedFadeInDown, FPCAnimatedFadeInLeft, FPCAnimatedFadeInRight, FPCAnimatedFadeInUp, FPCAnimatedFadeIn (animate_do package)
FPCAnimatedFadeOutDown, FPCAnimatedFadeOutLeft, FPCAnimatedFadeOutRight, FPCAnimatedFadeOutUp, FPCAnimatedFadeOut (animate_do package)
FPCAnimatedFractionallySizedBox
FPCAnimatedOpacityStack (stack of two AnimatedOpacity widgets)
FPCAnimatedOpacity
FPCAnimatedOpenContainer (animations package)
FPCAnimatedPadding
FPCAnimatedPhysicalModel
FPCAnimatedPositionedDirectional
FPCAnimatedPositioned
FPCAnimatedRotation
FPCAnimatedScale
FPCAnimatedSize
FPCAnimatedSlide
FPCAnimatedSwitcher
FPCAnimatedTransitionSwitcher (animations package)\

FPCListView

Default ListView widget are guided by size config.

FPCPadding

Default Padding widget are guided by size config.


Common #

CupertinoNavigator

Default CupertinoTabView widget supplemented by methods.

FPCDisabledOverlay

Container for disabled overlaying are guided by theme config.

FPCDisabledWrapper

Wrapper widget for disabled functional.

FPCField

Special wrapper of field for internal usage.

FPCMaterialScrollbar

Separated material scrollbar component.

FPCNestedWillPopScope

WillPopScope widget for nested navigation.

FPCTextInputHandlerFormatter

Text handler for autovalidating.


TODO #

  1. Elevation of components;
  2. Support WEB & desktop.
  3. FPCTooltip;
  4. FPCDrawer;

Additional Information #

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

← Metadata

13
likes
0
pub points
22%
popularity

Publisher

unverified uploader

Metadata

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

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

animate_do, animations, badges, collection, dotted_border, flutter, flutter_vibrate, pinput, pull_down_button

More

Packages that depend on flutter_platform_component

Back