elevarm_ui 0.3.2 | Flutter package

Elevarm design system for Flutter.

Features #

Color: ElevarmColors
Typography:
- Font Family: ElevarmFontFamilies
- Font Weight: ElevarmFontWeights
- Font Size: ElevarmFontSizes
Shape:
- Border Radius: ElevarmBorderRadius
Shadow:
- Box Shadow: ElevarmBoxShadow
Component:
- Alert: ElevarmAlert
- ConfirmAlertDialog: ElevarmConfirmAlertDialog
- Avatar: ElevarmAvatar
- Badge:
  - Filled Badge: ElevarmFilledBadge
  - Outlined Badge: ElevarmOutlinedBadge
- Button:
  - Outlined Button: ElevarmOutlineButton
  - Link Neutral Button: ElevarmLinkNeutralButton
  - Link Primary Button: ElevarmLinkPrimaryButton
  - Primary Button: ElevarmPrimaryButton
  - Secondary Button: ElevarmSecondaryButton
  - Tertiary Neutral Button: ElevarmTertiaryNeutralButton
  - Tertiary Primary Button: ElevarmTertiaryPrimaryButton
- Bottom Sheet ElevarmBottomSheet
- Card:
  - Elevated Card: ElevarmElevatedCard
  - File Upload Card: ElevarmFileUploadCard
  - Neutral Card: ElevarmNeutralCard
  - Outlined Card: ElevarmOutlinedCard
  - Primary Card: ElevarmPrimaryCard
- Chart:
  - Bar Chart:
    - ElevarmStackedHorizontalBarChartCard
    - ElevarmStackedVerticalBarChartCard
  - Donut Chart: ElevarmDonutChartCard
  - Line Chart: ElevarmLineChartCard
- Checkbox: ElevarmCheckbox
- Divider: ElevarmDivider
- DatePicker: showElevarmDatePickerDialog
- Drawer:
  - Mobile Drawer: ElevarmDrawer
  - Desktop Drawer: ElevarmDesktopDrawer
- Icon: ElevarmIcon
- Input Fields:
  - Autocomplete Input Field: ElevarmAutocompleteInputField
  - Dropdown Input Field: ElevarmDropdownInputField
  - Text Dropdown Input Field: ElevarmTextDropdownInputField
  - Text Input Field: ElevarmTextInputField
- Linear Progress Indicator: ElevarmLinearProgressIndicator
- Logo: ElevarmLogo
- Password Strength: ElevarmPasswordStrength
- Radio Button: ElevarmRadioButton
- SnackBar: showElevarmSnackBar & showElevarmSnackBarDesktop
- Stepper: ElevarmStepper
- Switch: ElevarmSwitch
- Tab Bar: ElevarmTabBar
Advanced Component:
- Table:
  - Pagination Footer:
    - Mobile Pagination Footer: ElevarmMobilePaginationFooter
- OTP FieldElevarmOtpField
Theme Data:
- Light: ElevarmThemeData.light()
Screens:
- 404 Desktop Screen: Elevarm404DesktopScreen
- Under Construction Desktop Screen: ElevarmUnderConstructionDesktopScreen
- Error Desktop Screen: ElevarmErrorDesktopScreen

Getting started #

Initialize font configurations by calling ElevarmFontFamilies.init method in main function:

import 'package:elevarm_ui/elevarm_ui.dart';

void main() {
    ElevarmFontFamilies.init(
         allowRuntimeFetching: true,
    );
   
    runApp(const MyApp());
}

Set the app's theme by passing ElevarmThemeData in MaterialApp:

import 'package:elevarm_ui/elevarm_ui.dart';

MaterialApp(
   theme: ElevarmThemeData.light(),
);

You're finished! Now you can start using elevarm_ui classes below.

A. Color #

Colors are located in ElevarmColors class. See Elevarm Color Reference for the detailed specification.

a.1. Neutral Colors #

	Shade	Color
	50	`#F3F4F5`
	100	`#E7E8EA`
	200	`#B1B4B9`
	300	`#7C8089`
	400	`#464C58`
	500	`#101828`

a.2. Primary Colors #

	Shade	Color
	100	`#EAECF9`
	200	`#B9C0EA`
	300	`#8995DC`
	400	`#5869CD`
	500 (Default)	`#283EBF`
	600	`#2235A4`
	700	`#1D2D8A`
	800	`#17246F`
	900	`#121B54`

a.3. Info Colors #

	Shade	Color
	100	`#E6F1FC`
	200	`#ADD1F6`
	300	`#75B0EF`
	400	`#3D90E9`
	500 (Default)	`#0470E2`
	600	`#0360C2`
	700	`#0351A3`
	800	`#024183`
	900	`#023163`

a.4. Success Colors #

	Shade	Color
	50	`#ECFDF3`
	100	`#E9F7E7`
	200	`#B8E4B0`
	300	`#87D179`
	400	`#55BF43`
	500 (Default)	`#24AC0C`
	600	`#1F940A`
	700	`#1A7C09`
	800	`#156407`
	900	`#104C05`

a.5. Warning Colors #

	Shade	Color
	100	`#FFF7E6`
	200	`#FEE3AE`
	300	`#FDD077`
	400	`#FDBD3F`
	500 (Default)	`#FCAA07`
	600	`#D99206`
	700	`#B57A05`
	800	`#926304`
	900	`#6F4B03`

a.6. Danger Colors #

	Shade	Color
	50	`#FEF3F2`
	100	`#FAEBEC`
	200	`#EFBDC0`
	300	`#E49094`
	400	`#D86268`
	500 (Default)	`#CD353C`
	600	`#B02E34`
	700	`#94262B`
	800	`#771F23`
	900	`#5A171A`

import 'package:elevarm_ui/elevarm_ui.dart';

const primary = ElevarmColors.primary;
const success500 = ElevarmColors.success500;

B. Typography #

See Elevarm Typography Reference for the detailed specification.

b.1. Font Family #

Font families are located in ElevarmFontFamilies class.

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmFontFamilies.init(); // Call this before `runApp`.
const poppins = ElevarmFontFamilies.poppins();

b.2. Font Weight #

Font weights are located in ElevarmFontWeights class.

Name	Weight
regular	400
medium	500
semibold	600
bold	700

import 'package:elevarm_ui/elevarm_ui.dart';

const fontWeightBold = ElevarmFontWeights.bold;

b.3. Font Size #

Font sizes are located in ElevarmFontSizes class.

Name	Size
xl5	48.0 dip
xl4	36.0 dip
xl3	30.0 dip
xl2	24.0 dip
xl	20.0 dip
lg	18.0 dip
md	16.0 dip
sm	14.0 dip
xs	12.0 dip

import 'package:elevarm_ui/elevarm_ui.dart';

const fontSizeLg = ElevarmFontSizes.lg;

C. Shape #

c.1. Border Radius #

Border radiuses are located in ElevarmBorderRadius class.

Name	Size
xs	4.0 dip
sm	8.0 dip
md	12.0 dip
lg	16.0 dip
xl	20.0 dip
xl2	24.0 dip
xl3	32.0 dip
xl4	40.0 dip

import 'package:elevarm_ui/elevarm_ui.dart';

const borderRadiusXl = ElevarmBorderRadius.xl;

D. Shadow #

d.1. Box Shadow #

Box shadows are located in ElevarmBoxShadow class.

Name	Shadow (h-offset v-offset blur spread color)
xs	0px 1px 2px 0px rgba(16, 24, 40, 0.05)
sm	0px 1px 2px 0px rgba(16, 24, 40, 0.06) 0px 1px 3px 0px rgba(16, 24, 40, 0.1)
md	0px 2px 4px -2px rgba(16, 24, 40, 0.06) 0px 4px 8px -2px rgba(16, 24, 40, 0.1)
lg	0px 4px 6px -2px rgba(16, 24, 40, 0.03) 0px 12px 16px -4px rgba(16, 24, 40, 0.08)
xl	0px 8px 8px -4px rgba(16, 24, 40, 0.03) 0px 20px 24px -4px rgba(16, 24, 40, 0.08)
xl2	0px 24px 48px -12px rgba(16, 24, 40, 0.18)
xl3	0px 32px 64px -12px rgba(16, 24, 40, 0.14)

import 'package:elevarm_ui/elevarm_ui.dart';

const boxShadowXl = ElevarmBoxShadow.xl;

E. Components #

`ElevarmAlert` #

Component	Screenshot
`ElevarmAlert`

import 'package:elevarm_ui/elevarm_ui.dart';

/// Normal  alert.
ElevarmAlert(
    variant: ElevarmAlertVariant.danger,
    text:'Mohon Pastikan semua setoran petani sudah melalui proses sorting dan grading agar bisa siap lelang',
)
/// Alert with close button.
ElevarmAlert(
    variant: ElevarmAlertVariant.success,
    text: 'Printer berhasil terhubung',
    onClose: () {},
)

`ElevarmConfirmAlertDialog` #

Component	Screenshot
`ElevarmConfirmAlertDialog`

import 'package:elevarm_ui/elevarm_ui.dart';

/// Normal  dialog.
  ElevarmPrimaryButton.text(
    text: 'Show Dialog',
    onPressed: () {
      ElevarmConfirmAlertDialog(
        title: 'Confirmation Dialog',
        subtitle: 'subtitle',
        onPositiveButton: () {},
        onNegativeButton: () {},
        positiveText: 'positiveText',
        negativeText: 'negativeText',
        variant: ElevarmDialogVariant.basic
      ).show(context);
    },
  ),
/// Dialog danger.
  ElevarmPrimaryButton.text(
    text: 'Show Dialog',
    onPressed: () {
      ElevarmConfirmAlertDialog(
        title: 'Confirmation Dialog',
        subtitle: 'subtitle',
        onPositiveButton: () {},
        onNegativeButton: () {},
        positiveText: 'positiveText',
        negativeText: 'negativeText',
        variant: ElevarmDialogVariant.danger
      ).show(context);
    },
  ),

`ElevarmAutocompleteInputField` #

Component	Screenshot
`ElevarmAutocompleteInputField`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmAutocompleteInputField<String>(
    label: 'Team Member',
    hintText: 'Select team member',
    helperText: 'This is a hint text to help user.',
    onChanged: (value) {},
    options: [
        ElevarmAutocompleteInputFieldOption(
            title: 'Phoenix Baker',
            subtitle: '@phoenix',
            value: 'Phoenix Baker',
        ),
        ElevarmAutocompleteInputFieldOption(
            title: 'Olivia Rhye',
            subtitle: '@olivia',
            value: 'Olivia Rhye',
        ),
    ],
)

`ElevarmAvatar` #

See Elevarm Avatar Reference for the detailed specification.

Component	Screenshot
`ElevarmAvatar`

import 'package:elevarm_ui/elevarm_ui.dart';

/// Avatar with initial.
const ElevarmAvatar(
    initial: 'OR',
)
/// Avatar with ImageProvider.
const ElevarmAvatar(
    image: const NetworkImage(
        'https://robohash.org/mail@ashallendesign.co.uk'
    ),
)
/// Avatar with custom size.
const ElevarmAvatar(
    size: ElevarmAvatarSizes.sm,
)
/// Avatar with online indicator.
const ElevarmAvatar(
    showOnlineIndicator: true,
)
/// Avatar with verified tick.
const ElevarmAvatar(
    showVerifiedTick: true,
)

`ElevarmBottomSheet` #

Component	Screenshot
`ElevarmBottomSheet`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmBottomSheet(
    initialChildSize: 0.65,
    title: 'Perhatian',
    onPressedClose: () {},
    children: [
        Text('Agar proses lelang berjalan lancar, mohon cek kembali daftar setoran bersih. Pastikan semua komoditas sudah terdata dengan baik.',
            textAlign: TextAlign.left,
            style: ElevarmFontFamilies.inter(
            color: ElevarmColors.neutral300,
            fontSize: ElevarmFontSizes.sm,
            fontWeight: ElevarmFontWeights.regular,
            ),
        ),
        const SizedBox(height: 30),
        SizedBox(
            height: 44,
            width: double.infinity,
            child: ElevarmOutlineButton.text(
            text: 'Lihat Setoran Bersih',
            onPressed: () {},
            ),
        ),
        const SizedBox(height: 12),
        SizedBox(
            height: 44,
            width: double.infinity,
            child: ElevarmPrimaryButton.icon(
            text: 'Lanjutkan',
            onPressed: () {},
            trailingIconAssetName: ElevarmIconsOutline.arrowRight,
            leadingIconAssetName: null,
            )
        ),
    ]
);

`ElevarmCheckbox` #

Component	Screenshot
`ElevarmCheckbox`

import 'package:elevarm_ui/elevarm_ui.dart';

/// Checked or not.
ElevarmCheckbox(
    checked: false,
    onPressed: () {},
)
/// Indeterminate.
ElevarmCheckbox(
    checked: true,
    indeterminate: true,
    onPressed: () {},
)
/// With supporting texts.
ElevarmCheckbox(
    checked: false,
    onPressed: () {},
    title: 'Remember me',
    subtitle: 'Save my login details for next time.',
)

`ElevarmDivider` #

Component	Screenshot
`ElevarmDivider`

import 'package:elevarm_ui/elevarm_ui.dart';

/// Normal  divider.
ElevarmDivider()
/// With middle content.
ElevarmDivider(
    child: Text('With Text'),
)

`ElevarmDonutChartCard` #

Component	Screenshot
`ElevarmDonutChartCard`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmDonutChartCard(
    title: 'Kepemilikan Lahan',
    subtitle: 'Terakhir diperbarui 30/11/2021 - 09.30 WIB',
    dataSource: [
        ElevarmDonutChartData(
            label: 'Sewa',
            value: 2000,
            color: ElevarmColors.success,
        ),
        ElevarmDonutChartData(
            label: 'Milik Sendiri',
            value: 1000,
            color: ElevarmColors.primary600,
        ),
    ],
)

`ElevarmDrawer` and `ElevarmDesktopDrawer` #

Component	Screenshot
`ElevarmDesktopDrawer` (expanded)
`ElevarmDesktopDrawer` (shrunk)
`ElevarmDrawer`

import 'package:elevarm_ui/elevarm_ui.dart';
import 'package:go_router/go_router.dart';

/// Drawer for mobile
const ElevarmDrawer(
    currentRoutePath: '/dashboard',
    onChangedRoutePath: (context, String? routePath) {
        if (routePath != null) {
            context.go(routePath);
        }
    },
    profileTitle: 'Olivia Rhye',
    profileSubtitle: 'olivia@untitledui.com',
    onPressedLogout: (context) {},
    headerTitle: Text('AgriMaps'),
    headerSubtitle: Text('DASHBOARD'),
    mainMenus: [], /// List<ElevarmDrawerMenu>
    secondaryMenus: [], /// List<ElevarmDrawerMenu>
)
/// Drawer for desktop
const ElevarmDesktopDrawer(
    currentRoutePath: '/dashboard',
    onChangedRoutePath: (context, String? routePath) {
        if (routePath != null) {
            context.go(routePath);
        }
    },
    profileTitle: 'Olivia Rhye',
    profileSubtitle: 'olivia@untitledui.com',
    onPressedLogout: (context) {},
    headerTitle: Text('AgriMaps'),
    headerSubtitle: Text('DASHBOARD'),
    mainMenus: [], /// List<ElevarmDrawerMenu>
    secondaryMenus: [], /// List<ElevarmDrawerMenu>
    child: Text('Drawer content'),
)

`ElevarmDropdownInputField` #

Component	Screenshot
`ElevarmDropdownInputField`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmDropdownInputField<String>(
    label: 'Team Member',
    hintText: 'Select team member',
    helperText: 'This is a hint text to help user.',
    onChanged: (value) {},
    options: [
        ElevarmDropdownInputFieldOption(
            title: 'Phoenix Baker',
            subtitle: '@phoenix',
            value: 'Phoenix Baker',
        ),
        ElevarmDropdownInputFieldOption(
            title: 'Olivia Rhye',
            subtitle: '@olivia',
            value: 'Olivia Rhye',
        ),
    ],
)

`ElevarmElevatedCard` #

Component	Screenshot
`ElevarmElevatedCard`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmElevatedCard(
    child: Column(
        children: [
            Row(
                children: [
                    Text('Varietas',
                        textAlign: TextAlign.left,
                        style: ElevarmFontFamilies.inter(
                        color: ElevarmColors.neutral300,
                        fontSize: ElevarmFontSizes.sm,
                        fontWeight: ElevarmFontWeights.regular,
                        ),
                    ),
                    const Spacer(),
                    Text('Varietas A',
                        textAlign: TextAlign.left,
                        style: ElevarmFontFamilies.inter(
                        color: ElevarmColors.neutral500,
                        fontSize: ElevarmFontSizes.sm,
                        fontWeight: ElevarmFontWeights.regular,
                        ),
                    )
                ],
            ),
           
        ],
    ),
),

`ElevarmFileUploadCard` #

Component	Screenshot
`ElevarmIcon`

import 'package:elevarm_ui/elevarm_ui.dart';

/// With Progress Indicator
ElevarmFileUploadCard(
    filename: 'Pembayaran.png',
    fileSize: 900000,
    uploadedAt: DateTime.now().subtract(const Duration(minutes: 5)),
    uploadProgress: 0.5,
    showProgressIndicator: true,
    onDelete: () {},
),
/// Without Progress Indicator
ElevarmFileUploadCard(
    filename: 'Pembayaran.png',
    fileSize: 900000,
    uploadedAt: DateTime.now().subtract(const Duration(minutes: 5)),
    showProgressIndicator: false,
    onDownload: () {},
),

`ElevarmFilledBadge` #

Component	Screenshot
`ElevarmFilledBadge`

import 'package:elevarm_ui/elevarm_ui.dart';

/// With text only.
ElevarmFilledBadge.text(
    'Label',
)
/// With text and dot.
ElevarmFilledBadge.dot(
    'Label',
)
/// With text and avatar.
ElevarmFilledBadge.avatar(
    'Label',
    const ElevarmAvatar(
        image: const NetworkImage('https://robohash.org/mail@ashallendesign.co.uk'),
    ),
)
/// With text and cancel icon.
ElevarmFilledBadge.cancel(
    'Label',
)
/// With icon only.
ElevarmFilledBadge.iconOnly(
    ElevarmIconsOutline.user01,
)

`ElevarmIcon` #

Component	Screenshot
`ElevarmIcon`

import 'package:elevarm_ui/elevarm_ui.dart';

const ElevarmIcon(
    ElevarmIconsOutline.user01,
)

`ElevarmLinearProgressIndicator` #

Component	Screenshot
`ElevarmLinearProgressIndicator`

import 'package:elevarm_ui/elevarm_ui.dart';

const ElevarmLinearProgressIndicator(
    value: 0.5,
)

`ElevarmLogo` #

Component	Screenshot
`ElevarmLogo`

import 'package:elevarm_ui/elevarm_ui.dart';

/// Normal logo.
const ElevarmLogo()

/// With custom size.
const ElevarmLogo(
    height: 30.0,
    width: null,
)

/// White variant.
const ElevarmLogo(
    isWhite: true,
)

`ElevarmLineChartCard` #

Component	Screenshot
`ElevarmLineChartCard`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmLineChartCard(
    title: 'Banyaknya Petani Terscout & Terdaftar Sebagai Mitra',
    subtitle: 'Terakhir diperbarui 30/11/2021 - 09.30 WIB',
    splineType: ElevarmLineChartSplineType.natural,
    dataSource: [
        ElevarmLineChartDataSeries(
            label: 'Sewa',
            color: ElevarmColors.success,
            dataPoints: [
                ElevarmLineChartData(
                    label: 'Jan',
                    value: 10,
                ),
                ElevarmLineChartData(
                    label: 'Feb',
                    value: 15,
                ),
            ],
        ),
    ],
)

`ElevarmLinkNeutralButton` #

Component	Screenshot
`ElevarmLinkNeutralButton`

import 'package:elevarm_ui/elevarm_ui.dart';

// Button with only text
ElevarmLinkNeutralButton.text(
    text: 'Button CTA',
    onPressed: () {},
)
// Button with text & icon (trailing and/or leading)
ElevarmLinkNeutralButton.icon(
    text: 'Button CTA',
    onPressed: () {},
    height: buttonSize['size'] as double,
    leadingIconAssetName: ElevarmIconsOutline.plus,
    trailingIconAssetName: null,
)
// Button with only icon
ElevarmLinkNeutralButton.iconOnly(
    iconAssetName: ElevarmIconsOutline.plus,
    onPressed: () {},
)

`ElevarmLinkPrimaryButton` #

Component	Screenshot
`ElevarmLinkPrimaryButton`

import 'package:elevarm_ui/elevarm_ui.dart';

// Button with only text
ElevarmLinkPrimaryButton.text(
    text: 'Button CTA',
    onPressed: () {},
)
// Button with text & icon (trailing and/or leading)
ElevarmLinkPrimaryButton.icon(
    text: 'Button CTA',
    onPressed: () {},
    height: buttonSize['size'] as double,
    leadingIconAssetName: ElevarmIconsOutline.plus,
    trailingIconAssetName: null,
)
// Button with only icon
ElevarmLinkPrimaryButton.iconOnly(
    iconAssetName: ElevarmIconsOutline.plus,
    onPressed: () {},
)

`ElevarmNeutralCard` #

Component	Screenshot
`ElevarmNeutralCard`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmNeutralCard(
    child: Column(
        children: [
            Row(
                children: [
                    Text('Varietas',
                        textAlign: TextAlign.left,
                        style: ElevarmFontFamilies.inter(
                        color: ElevarmColors.neutral300,
                        fontSize: ElevarmFontSizes.sm,
                        fontWeight: ElevarmFontWeights.regular,
                        ),
                    ),
                    const Spacer(),
                    Text('Varietas A',
                        textAlign: TextAlign.left,
                        style: ElevarmFontFamilies.inter(
                        color: ElevarmColors.neutral500,
                        fontSize: ElevarmFontSizes.sm,
                        fontWeight: ElevarmFontWeights.regular,
                        ),
                    )
                ],
            ),
           
        ],
    ),
),

`ElevarmOutlinedBadge` #

Component	Screenshot
`ElevarmOutlinedBadge`

import 'package:elevarm_ui/elevarm_ui.dart';

/// With text only.
ElevarmOutlinedBadge.text(
    'Label',
)
/// With text and dot.
ElevarmOutlinedBadge.dot(
    'Label',
)
/// With text and avatar.
ElevarmOutlinedBadge.avatar(
    'Label',
    const ElevarmAvatar(
        image: const NetworkImage('https://robohash.org/mail@ashallendesign.co.uk'),
    ),
)
/// With text and cancel icon.
ElevarmOutlinedBadge.cancel(
    'Label',
)
/// With icon only.
ElevarmOutlinedBadge.iconOnly(
    ElevarmIconsOutline.user01,
)

`ElevarmOutlineButton` #

Component	Screenshot
`ElevarmOutlineButton`

import 'package:elevarm_ui/elevarm_ui.dart';

// Button with only text
ElevarmOutlineButton.text(
    text: 'Button CTA',
    onPressed: () {},
)
// Button with text & icon (trailing and/or leading)
ElevarmOutlineButton.icon(
    text: 'Button CTA',
    onPressed: () {},
    height: buttonSize['size'] as double,
    leadingIconAssetName: ElevarmIconsOutline.plus,
    trailingIconAssetName: null,
)
// Button with only icon
ElevarmOutlineButton.iconOnly(
    iconAssetName: ElevarmIconsOutline.plus,
    onPressed: () {},
)

`ElevarmOutlinedCard` #

Component	Screenshot
`ElevarmOutlinedCard`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmOutlinedCard(
    child: Column(
        children: [
            Row(
                children: [
                    Text('Varietas',
                        textAlign: TextAlign.left,
                        style: ElevarmFontFamilies.inter(
                        color: ElevarmColors.neutral300,
                        fontSize: ElevarmFontSizes.sm,
                        fontWeight: ElevarmFontWeights.regular,
                        ),
                    ),
                    const Spacer(),
                    Text('Varietas A',
                        textAlign: TextAlign.left,
                        style: ElevarmFontFamilies.inter(
                        color: ElevarmColors.neutral500,
                        fontSize: ElevarmFontSizes.sm,
                        fontWeight: ElevarmFontWeights.regular,
                        ),
                    )
                ],
            ),
           
        ],
    ),
),

`ElevarmPasswordStrength` #

Component	Screenshot
`ElevarmPasswordStrength`

import 'package:elevarm_ui/elevarm_ui.dart';

/// With default validations.
ElevarmPasswordStrength(
    password: _inputPassword,
    validations: ElevarmPasswordStrengthValidation.getDefaults(),
)
/// With custom validations.
ElevarmPasswordStrength(
    title: 'Custom Password Validation:',
    password: _inputPassword,
    validations: [
        ElevarmPasswordStrengthValidation(
            label: 'Harus mengandung kata "Hehe"',
            validate: (password) => password.contains("Hehe"),
        ),
    ],
)

`ElevarmPrimaryButton` #

Component	Screenshot
`ElevarmPrimaryButton`

import 'package:elevarm_ui/elevarm_ui.dart';

// Button with only text
ElevarmPrimaryButton.text(
    text: 'Button CTA',
    onPressed: () {},
)
// Button with text & icon (trailing and/or leading)
ElevarmPrimaryButton.icon(
    text: 'Button CTA',
    onPressed: () {},
    height: buttonSize['size'] as double,
    leadingIconAssetName: ElevarmIconsOutline.plus,
    trailingIconAssetName: null,
)
// Button with only icon
ElevarmPrimaryButton.iconOnly(
    iconAssetName: ElevarmIconsOutline.plus,
    onPressed: () {},
)

`ElevarmPrimaryCard` #

Component	Screenshot
`ElevarmPrimaryCard`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmPrimaryCard(
    child: Column(
        children: [
            Row(
                children: [
                    Text('Varietas',
                        textAlign: TextAlign.left,
                        style: ElevarmFontFamilies.inter(
                        color: ElevarmColors.neutral300,
                        fontSize: ElevarmFontSizes.sm,
                        fontWeight: ElevarmFontWeights.regular,
                        ),
                    ),
                    const Spacer(),
                    Text('Varietas A',
                        textAlign: TextAlign.left,
                        style: ElevarmFontFamilies.inter(
                        color: ElevarmColors.neutral500,
                        fontSize: ElevarmFontSizes.sm,
                        fontWeight: ElevarmFontWeights.regular,
                        ),
                    )
                ],
            ),
           
        ],
    ),
),

`ElevarmRadioButton` #

Component	Screenshot
`ElevarmRadioButton`

import 'package:elevarm_ui/elevarm_ui.dart';

/// Radio button only.
ElevarmRadioButton<String>(
    value: 'farmer',
    groupValue: _selectedFarmer,
    onChanged: (String newSelectedFarmer) {},
)
/// With supporting texts.
ElevarmRadioButton<String>(
    value: 'farmer',
    groupValue: _selectedFarmer,
    onChanged: (String newSelectedFarmer) {},
    title: 'Remember me',
    subtitle: 'Save my login details for next time.',
)

`ElevarmSecondaryButton` #

Component	Screenshot
`ElevarmSecondaryButton`

import 'package:elevarm_ui/elevarm_ui.dart';

// Button with only text
ElevarmSecondaryButton.text(
    text: 'Button CTA',
    onPressed: () {},
)
// Button with text & icon (trailing and/or leading)
ElevarmSecondaryButton.icon(
    text: 'Button CTA',
    onPressed: () {},
    height: buttonSize['size'] as double,
    leadingIconAssetName: ElevarmIconsOutline.plus,
    trailingIconAssetName: null,
)
// Button with only icon
ElevarmSecondaryButton.iconOnly(
    iconAssetName: ElevarmIconsOutline.plus,
    onPressed: () {},
)

`ElevarmStackedHorizontalBarChartCard` #

Component	Screenshot
`ElevarmStackedHorizontalBarChartCard`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmStackedHorizontalBarChartCard(
    title: 'Komoditas Paling Banyak Ditanam',
    tooltipTitle: 'Komoditas',
    subtitle: 'Terakhir diperbarui 30/11/2021 - 09.30 WIB',
    legendValueBuilder: (data) => '${data.value}x rotasi',
    dataSource: [
        ElevarmStackedHorizontalBarChartData(
            label: 'Jagung',
            value: 15,
            color: ElevarmColors.success,
            customData: '1000 Transaksi',
        ),
        ElevarmStackedHorizontalBarChartData(
            label: 'Mentimun',
            value: 12,
            color: ElevarmColors.primary,
            customData: '2k Transaksi',
        ),
    ],
)

`ElevarmStackedVerticalBarChartCard` #

Component	Screenshot
`ElevarmStackedVerticalBarChartCard`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmStackedVerticalBarChartCard(
    title: 'Komparasi Petani Terscout & Terdaftar Sebagai Mitra',
    tooltipTitle: 'Petani',
    subtitle: 'Terakhir diperbarui 30/11/2021 - 09.30 WIB',
    dataSource: [
        ElevarmStackedVerticalBarChartDataSeries(
            label: 'Sewa',
            color: ElevarmColors.success,
            dataPoints: [
                ElevarmStackedVerticalBarChartData(
                    label: 'Jan',
                    value: 10,
                ),
                ElevarmLineChartData(
                    label: 'Feb',
                    value: 15,
                ),
            ],
        ),
    ],
)

`ElevarmStepper` #

Component	Screenshot
`ElevarmStepper`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmStepper(
    steps: <ElevarmStepperStep>[
        ElevarmStepperStep(
            title: 'Step 1',
            subtitle: 'This is the first step',
            onTap: () {},
        ),
        ElevarmStepperStep(
            title: 'Step 2',
            subtitle: 'This is the second step',
            onTap: () {},
        ),
        ElevarmStepperStep(
            title: 'Step 3',
            subtitle: 'This is the third step',
            onTap: () {},
        ),
    ],
    currentStep: 0,
),

`ElevarmSwitch` #

Component	Screenshot
`ElevarmSwitch`

import 'package:elevarm_ui/elevarm_ui.dart';

/// Switched on or not.
ElevarmSwitch(
    value: false,
    onChanged: (newValue) {},
)
/// With supporting texts.
ElevarmSwitch(
    value: false,
    onChanged: (newValue) {},
    title: 'Remember me',
    subtitle: 'Save my login details for next time.',
)

`ElevarmTabBar` #

Component	Screenshot
`ElevarmTabBar`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmTabBar(
    labels: const ['Petani', 'Komoditas'],
    activeIndex: 0,
    onChange: (int newIndex) {},
)

`ElevarmTextDropdownInputField` #

Component	Screenshot
`ElevarmTextDropdownInputField`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmTextDropdownInputField(
    label: 'Berat',
    hintText: '0',
    helperText: 'Berat komoditas.',
    errorText: 'This is an error message.',
    dropdownInitialValue: 'Kg',
    dropdownOptions: [
        ElevarmDropdownInputFieldOption(
            title: 'Kg',
            value: 'Kg',
        ),
        ElevarmDropdownInputFieldOption(
            title: 'Gr',
            value: 'Gr',
        ),
    ],
    dropdownOnChanged: (value) {},
    enabled: true,
)

`ElevarmTextInputField` #

Component	Screenshot
`ElevarmTextInputField`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmTextInputField(
    label: 'Email',
    hintText: 'olivia@untitledui.com',
    helperText: 'This is a hint text to help user.',
    suffixIconAssetName: ElevarmIconsOutline.helpCircle,
    onTapSuffix: null,
    errorText: null,
    enabled: true,
)

`ElevarmTertiaryNeutralButton` #

Component	Screenshot
`ElevarmTertiaryNeutralButton`

import 'package:elevarm_ui/elevarm_ui.dart';

// Button with only text
ElevarmTertiaryNeutralButton.text(
    text: 'Button CTA',
    onPressed: () {},
)
// Button with text & icon (trailing and/or leading)
ElevarmTertiaryNeutralButton.icon(
    text: 'Button CTA',
    onPressed: () {},
    height: buttonSize['size'] as double,
    leadingIconAssetName: ElevarmIconsOutline.plus,
    trailingIconAssetName: null,
)
// Button with only icon
ElevarmTertiaryNeutralButton.iconOnly(
    iconAssetName: ElevarmIconsOutline.plus,
    onPressed: () {},
)

`ElevarmTertiaryPrimaryButton` #

Component	Screenshot
`ElevarmTertiaryPrimaryButton`

import 'package:elevarm_ui/elevarm_ui.dart';

// Button with only text
ElevarmTertiaryPrimaryButton.text(
    text: 'Button CTA',
    onPressed: () {},
)
// Button with text & icon (trailing and/or leading)
ElevarmTertiaryPrimaryButton.icon(
    text: 'Button CTA',
    onPressed: () {},
    height: buttonSize['size'] as double,
    leadingIconAssetName: ElevarmIconsOutline.plus,
    trailingIconAssetName: null,
)
// Button with only icon
ElevarmTertiaryPrimaryButton.iconOnly(
    iconAssetName: ElevarmIconsOutline.plus,
    onPressed: () {},
)

`showElevarmDatePickerDialog` #

Component	Screenshot
`showElevarmDatePickerDialog`

import 'package:elevarm_ui/elevarm_ui.dart';

// Show date picker dialog
showElevarmDatePickerDialog(
    context: context,
    initialDisplayDate: DateTime(2022, 1, 1),
    initialSelectedDate: DateTime(2022, 1, 1),
).then((value) {
    print("RESULT: $value");
});

// Show date range picker dialog
showElevarmDatePickerDialog(
    context: context,
    mode: ElevarmDatePickerMode.range,
    initialDisplayDate: DateTime(2022, 1, 1),
    initialSelectedRange: DateTimeRange(
        start: DateTime(2022, 1, 1),
        end: DateTime(2022, 1, 31),
    ),
).then((value) {
    print("RESULT: $value");
});

`showElevarmSnackBar` and `showElevarmSnackBarDesktop` #

Component	Screenshot
`showElevarmSnackBar`
`showElevarmSnackBarDesktop`

import 'package:elevarm_ui/elevarm_ui.dart';

// Show Snackbar (for mobile).
showElevarmSnackBar(
    context: context,
    iconAssetName: ElevarmIconsOutline.plus,
    alignment: Alignment.topRight,
    iconColor: ElevarmColors.success,
    title: 'Perubahan Berhasil Dilakukan',
    subtitle: 'Setoran potongan kotor diubah dengan nilai potongan sebesar 5%',
    positiveText: 'Lihat Detail',
    onPositiveButton: (animationController) {
        animationController?.reverse();
    },
    negativeText: 'Tutup',
    onNegativeButton: (animationController) {
        animationController?.reverse();
    },
    onCloseButton: (animationController) {
        animationController?.reverse();
    },
    onAnimationControllerInit: (animationController) {
        /// Save AnimationController in a state.
        _snackBarAnimationController = animationController;
    },
);

// Show Snackbar (for desktop).
showElevarmSnackBarDesktop(
    context: context,
    iconAssetName: ElevarmIconsOutline.plus,
    alignment: Alignment.topRight,
    iconColor: ElevarmColors.success,
    title: 'Perubahan Berhasil Dilakukan',
    subtitle: 'Setoran potongan kotor diubah dengan nilai potongan sebesar 5%',
    positiveText: 'Lihat Detail',
    onPositiveButton: (animationController) {
        animationController?.reverse();
    },
    negativeText: 'Tutup',
    onNegativeButton: (animationController) {
        animationController?.reverse();
    },
    onCloseButton: (animationController) {
        animationController?.reverse();
    },
    onAnimationControllerInit: (animationController) {
        /// Save AnimationController in a state.
        _snackBarAnimationController = animationController;
    },
);

D. Advanced Component #

`ElevarmMobilePaginationFooter` #

Component	Screenshot
`ElevarmMobilePaginationFooter`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmMobilePaginationFooter(
    currentPage: _currentPage,
    numPages: 10,
    onPressedNext: _currentPage < 10 ? _handlePressedNext : null,
    onPressedPrevious:
        _currentPage > 1 ? _handlePressedPrevious : null,
),

`ElevarmOtpField` #

Component	Screenshot
`ElevarmOtpField`

import 'package:elevarm_ui/elevarm_ui.dart';

OtpFormField(
    length: 4 // length of fields,
    onChanged: (String otp) {} // callback on fields changed,
    onResendOtpCode: () {} // callback on tap resend otp code text,
    duration: 60 // resend timer duration. default: 30
),

E. ThemeData #

`ElevarmThemeData.light()` #

import 'package:elevarm_ui/elevarm_ui.dart';

MaterialApp(
    theme: ElevarmThemeData.light(),
)

F. Screens #

`Elevarm404DesktopScreen` #

Screen	Screenshot
`Elevarm404DesktopScreen`

import 'package:elevarm_ui/elevarm_ui.dart';

Elevarm404DesktopScreen(
    prevNavButtonAction: () {} ,
    mainNavButtonAction: () {} ,
    prevNavButtonLabel = 'Kembali Ke Sebelumnya', // Default value
    mainNavButtonLabel = 'Pergi Ke Dashboard', // Default value
    highlight = "Ooppss!", // Default value
    title = "404 Page not Found", // Default value
    description = "Maaf, halaman yang Anda cari tidak ada atau telah dipindahkan.", // Default value
    image = "packages/elevarm_ui/assets/images/not_found_illustration.png", // Default value
),

`ElevarmUnderConstructionDesktopScreen` #

Screen	Screenshot
`ElevarmUnderConstructionDesktopScreen`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmUnderConstructionDesktopScreen(
    prevNavButtonAction: () {} ,
    mainNavButtonAction: () {} ,
    prevNavButtonLabel = 'Kembali Ke Sebelumnya', // Default value
    mainNavButtonLabel = 'Pergi Ke Dashboard', // Default value
    highlight = "Under Construction!", // Default value
    title = "Ooopss.. Error!", // Default value
    description = "Halaman yang Anda cari saat ini sedang dalam perbaikan dan akan segera kembali. Pantau terus!", // Default value
    image = "packages/elevarm_ui/assets/images/under_construction_illustration.png", // Default value
),

`ElevarmErrorDesktopScreen` #

Screen	Screenshot
`ElevarmErrorDesktopScreen`

import 'package:elevarm_ui/elevarm_ui.dart';

ElevarmErrorDesktopScreen(
    prevNavButtonAction: () {} ,
    mainNavButtonAction: () {} ,
    prevNavButtonLabel = 'Kembali Ke Sebelumnya', // Default value
    mainNavButtonLabel = 'Pergi Ke Dashboard', // Default value
    title = "Ooopss.. Error!", // Default value
    description = "Halaman yang Anda cari tidak ada. Berikut ini beberapa tautan bermanfaat:", // Default value Default value
),

Development #

This section is intended for people that wants to develop elevarm_ui package.

Getting Started #

Follow instructions below to install this project on your machine.

Clone this repository to your machine.
Go inside the cloned repository:
```
cd elevarm_app
```
Switch to develop branch:
```
git checkout develop
```
Get all project dependencies:
```
flutter pub get
```
Activate dart_pre_commit by running the following command. dart_pre_commit is pre-commit hooks for formatting and linting code.
```
dart run tool/setup_git_hooks.dart
```

Additional information #

Contact here: elevarm.com

elevarm_ui 0.3.2 elevarm_ui: ^0.3.2 copied to clipboard

Metadata

Features #

Getting started #

A. Color #

a.1. Neutral Colors #

a.2. Primary Colors #

a.3. Info Colors #

a.4. Success Colors #

a.5. Warning Colors #

a.6. Danger Colors #

B. Typography #

b.1. Font Family #

b.2. Font Weight #

b.3. Font Size #

C. Shape #

c.1. Border Radius #

D. Shadow #

d.1. Box Shadow #

E. Components #

ElevarmAlert #

ElevarmConfirmAlertDialog #

ElevarmAutocompleteInputField #

ElevarmAvatar #

ElevarmBottomSheet #

ElevarmCheckbox #

ElevarmDivider #

ElevarmDonutChartCard #

ElevarmDrawer and ElevarmDesktopDrawer #

ElevarmDropdownInputField #

ElevarmElevatedCard #

ElevarmFileUploadCard #

ElevarmFilledBadge #

ElevarmIcon #

ElevarmLinearProgressIndicator #

ElevarmLogo #

ElevarmLineChartCard #

ElevarmLinkNeutralButton #

ElevarmLinkPrimaryButton #

ElevarmNeutralCard #

ElevarmOutlinedBadge #

ElevarmOutlineButton #

ElevarmOutlinedCard #

ElevarmPasswordStrength #

ElevarmPrimaryButton #

ElevarmPrimaryCard #

ElevarmRadioButton #

ElevarmSecondaryButton #

ElevarmStackedHorizontalBarChartCard #

ElevarmStackedVerticalBarChartCard #

ElevarmStepper #

ElevarmSwitch #

ElevarmTabBar #

ElevarmTextDropdownInputField #

ElevarmTextInputField #

ElevarmTertiaryNeutralButton #

ElevarmTertiaryPrimaryButton #

showElevarmDatePickerDialog #

showElevarmSnackBar and showElevarmSnackBarDesktop #