elevarm_ui 0.0.1+7

Elevarm design system for Flutter.

Elevarm design system for Flutter.

Features

• Color: ElevarmColors
• Typography:
  • Font Family: ElevarmFontFamilies
  • Font Weight: ElevarmFontWeights
  • Font Size: ElevarmFontSizes
• Component:
  • Avatar: ElevarmAvatar
  • Badge: ElevarmBadge
  • Button:
    • Elevated Button: ElevarmElevatedButton
    • Outlined Button: ElevarmOutlinedButton
  • Drawer:
    • Mobile Drawer: ElevarmDrawer
    • Desktop Drawer: ElevarmDesktopDrawer
  • Icon: ElevarmIcon
  • Linear Progress Indicator: ElevarmLinearProgressIndicator
• Theme Data:
  • Light: ElevarmThemeData.light()

Getting started

1. 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());
   }
   

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

   import 'package:elevarm_ui/elevarm_ui.dart';
   
   MaterialApp(
      theme: ElevarmThemeData.light(),
   );
   

3. 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. Components

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/[e-mail]'
    ),
)
/// 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,
)

ElevarmBadge

Component	Screenshot
ElevarmBadge

import 'package:elevarm_ui/elevarm_ui.dart';

const ElevarmBadge(
    title: 'Mitra',
    variant: ElevarmBadgeVariant.success,
)

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: '[e-mail]',
    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: '[e-mail]',
    onPressedLogout: (context) {},
    headerTitle: Text('AgriMaps'),
    headerSubtitle: Text('DASHBOARD'),
    mainMenus: [], /// List<ElevarmDrawerMenu>
    secondaryMenus: [], /// List<ElevarmDrawerMenu>
)

ElevarmElevatedButton

Component	Screenshot
ElevarmElevatedButton

import 'package:elevarm_ui/elevarm_ui.dart';

// Button with only text
ElevarmElevatedButton(
    onPressed: () {},
    child: Text('Button'),
)
// Button with text & icon
ElevarmElevatedButton.icon(
    onPressed: () {},
    label: Text('Tambah'),
    icon: Icon(Icons.add),
)
// Button with only icon
ElevarmElevatedButton.iconOnly(
    onPressed: () {},
    icon: Icon(Icons.more_horiz),
)

ElevarmIcon

Component	Screenshot
ElevarmIcon

import 'package:elevarm_ui/elevarm_ui.dart';

const ElevarmIcon(
    'assets/elevarm_icons/outline/users/user-01.svg',
)

ElevarmLinearProgressIndicator

Component	Screenshot
ElevarmLinearProgressIndicator

import 'package:elevarm_ui/elevarm_ui.dart';

const ElevarmLinearProgressIndicator(
    value: 0.5,
)

ElevarmOutlinedButton

Component	Screenshot
ElevarmOutlinedButton

import 'package:elevarm_ui/elevarm_ui.dart';

// Button with only text
ElevarmOutlinedButton(
    onPressed: () {},
    child: Text('Button'),
)
// Button with text & icon
ElevarmOutlinedButton.icon(
    onPressed: () {},
    label: Text('Tambah'),
    icon: Icon(Icons.add),
)
// Button with only icon
ElevarmOutlinedButton.iconOnly(
    onPressed: () {},
    icon: Icon(Icons.more_horiz),
)

D. ThemeData

ElevarmThemeData.light()

import 'package:elevarm_ui/elevarm_ui.dart';

MaterialApp(
    theme: ElevarmThemeData.light(),
)

Additional information

Contact here: [e-mail]