Elevarm design system for Flutter.
- Color:
ElevarmColors
- Typography:
- Shape:
- Shadow:
- Component:
- Advanced Component:
- Theme Data:
- 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.
Colors are located in ElevarmColors
class. See Elevarm Color Reference for the detailed specification.
|
Shade |
Color |
|
50 |
#F3F4F5 |
|
100 |
#E7E8EA |
|
200 |
#B1B4B9 |
|
300 |
#7C8089 |
|
400 |
#464C58 |
|
500 |
#101828 |
|
Shade |
Color |
|
100 |
#EAECF9 |
|
200 |
#B9C0EA |
|
300 |
#8995DC |
|
400 |
#5869CD |
|
500 (Default) |
#283EBF |
|
600 |
#2235A4 |
|
700 |
#1D2D8A |
|
800 |
#17246F |
|
900 |
#121B54 |
|
Shade |
Color |
|
100 |
#E6F1FC |
|
200 |
#ADD1F6 |
|
300 |
#75B0EF |
|
400 |
#3D90E9 |
|
500 (Default) |
#0470E2 |
|
600 |
#0360C2 |
|
700 |
#0351A3 |
|
800 |
#024183 |
|
900 |
#023163 |
|
Shade |
Color |
|
50 |
#ECFDF3 |
|
100 |
#E9F7E7 |
|
200 |
#B8E4B0 |
|
300 |
#87D179 |
|
400 |
#55BF43 |
|
500 (Default) |
#24AC0C |
|
600 |
#1F940A |
|
700 |
#1A7C09 |
|
800 |
#156407 |
|
900 |
#104C05 |
|
Shade |
Color |
|
100 |
#FFF7E6 |
|
200 |
#FEE3AE |
|
300 |
#FDD077 |
|
400 |
#FDBD3F |
|
500 (Default) |
#FCAA07 |
|
600 |
#D99206 |
|
700 |
#B57A05 |
|
800 |
#926304 |
|
900 |
#6F4B03 |
|
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;
See Elevarm Typography Reference for the detailed specification.
Font families are located in ElevarmFontFamilies
class.
import 'package:elevarm_ui/elevarm_ui.dart';
ElevarmFontFamilies.init(); // Call this before `runApp`.
const poppins = ElevarmFontFamilies.poppins();
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;
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;
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;
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,
)
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(
'assets/elevarm_icons/outline/users/user-01.svg',
)
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(
'assets/elevarm_icons/outline/users/user-01.svg',
)
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.',
)
Component |
Screenshot |
ElevarmDivider |
|
import 'package:elevarm_ui/elevarm_ui.dart';
/// Normal divider.
ElevarmDivider()
/// With middle content.
ElevarmDivider(
child: Text('With Text'),
)
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'),
)
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: 'assets/elevarm_icons/outline/general/plus.svg',
trailingIconAssetName: null,
)
// Button with only icon
ElevarmPrimaryButton.iconOnly(
iconAssetName: 'assets/elevarm_icons/outline/general/plus.svg',
onPressed: () {},
)
Component |
Screenshot |
ElevarmIcon |
|
import 'package:elevarm_ui/elevarm_ui.dart';
const ElevarmIcon(
'assets/elevarm_icons/outline/users/user-01.svg',
)
Component |
Screenshot |
ElevarmLinearProgressIndicator |
|
import 'package:elevarm_ui/elevarm_ui.dart';
const ElevarmLinearProgressIndicator(
value: 0.5,
)
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.',
)
Component |
Screenshot |
ElevarmTabBar |
|
import 'package:elevarm_ui/elevarm_ui.dart';
ElevarmTabBar(
labels: const ['Petani', 'Komoditas'],
activeIndex: 0,
onChange: (int newIndex) {},
)
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: 'assets/elevarm_icons/outline/general/plus.svg',
trailingIconAssetName: null,
)
// Button with only icon
ElevarmTertiaryNeutralButton.iconOnly(
iconAssetName: 'assets/elevarm_icons/outline/general/plus.svg',
onPressed: () {},
)
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: 'assets/elevarm_icons/outline/general/plus.svg',
trailingIconAssetName: null,
)
// Button with only icon
ElevarmOutlineButton.iconOnly(
iconAssetName: 'assets/elevarm_icons/outline/general/plus.svg',
onPressed: () {},
)
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,
),
import 'package:elevarm_ui/elevarm_ui.dart';
MaterialApp(
theme: ElevarmThemeData.light(),
)
Contact here: majid@elevarm.com