![Pub Version](https://img.shields.io/pub/v/elevarm_ui?color=blueviolet)
Elevarm design system for Flutter.
- Color:
ElevarmColors
- Typography:
- Shape:
- Shadow:
- Component:
- Advanced Component:
- Theme Data:
- Screens:
- 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 |
![#F3F4F5](https://placehold.co/10x10/F3F4F5/F3F4F5.png) |
50 |
#F3F4F5 |
![#E7E8EA](https://placehold.co/10x10/E7E8EA/E7E8EA.png) |
100 |
#E7E8EA |
![#B1B4B9](https://placehold.co/10x10/B1B4B9/B1B4B9.png) |
200 |
#B1B4B9 |
![#7C8089](https://placehold.co/10x10/7C8089/7C8089.png) |
300 |
#7C8089 |
![#464C58](https://placehold.co/10x10/464C58/464C58.png) |
400 |
#464C58 |
![#101828](https://placehold.co/10x10/101828/101828.png) |
500 |
#101828 |
|
Shade |
Color |
![#EAECF9](https://placehold.co/10x10/EAECF9/EAECF9.png) |
100 |
#EAECF9 |
![#B9C0EA](https://placehold.co/10x10/B9C0EA/B9C0EA.png) |
200 |
#B9C0EA |
![#8995DC](https://placehold.co/10x10/8995DC/8995DC.png) |
300 |
#8995DC |
![#5869CD](https://placehold.co/10x10/5869CD/5869CD.png) |
400 |
#5869CD |
![#283EBF](https://placehold.co/10x10/283EBF/283EBF.png) |
500 (Default) |
#283EBF |
![#2235A4](https://placehold.co/10x10/2235A4/2235A4.png) |
600 |
#2235A4 |
![#1D2D8A](https://placehold.co/10x10/1D2D8A/1D2D8A.png) |
700 |
#1D2D8A |
![#17246F](https://placehold.co/10x10/17246F/17246F.png) |
800 |
#17246F |
![#121B54](https://placehold.co/10x10/121B54/121B54.png) |
900 |
#121B54 |
|
Shade |
Color |
![#E6F1FC](https://placehold.co/10x10/E6F1FC/E6F1FC.png) |
100 |
#E6F1FC |
![#ADD1F6](https://placehold.co/10x10/ADD1F6/ADD1F6.png) |
200 |
#ADD1F6 |
![#75B0EF](https://placehold.co/10x10/75B0EF/75B0EF.png) |
300 |
#75B0EF |
![#3D90E9](https://placehold.co/10x10/3D90E9/3D90E9.png) |
400 |
#3D90E9 |
![#0470E2](https://placehold.co/10x10/0470E2/0470E2.png) |
500 (Default) |
#0470E2 |
![#0360C2](https://placehold.co/10x10/0360C2/0360C2.png) |
600 |
#0360C2 |
![#0351A3](https://placehold.co/10x10/0351A3/0351A3.png) |
700 |
#0351A3 |
![#024183](https://placehold.co/10x10/024183/024183.png) |
800 |
#024183 |
![#023163](https://placehold.co/10x10/023163/023163.png) |
900 |
#023163 |
|
Shade |
Color |
![#ECFDF3](https://placehold.co/10x10/ECFDF3/ECFDF3.png) |
50 |
#ECFDF3 |
![#E9F7E7](https://placehold.co/10x10/E9F7E7/E9F7E7.png) |
100 |
#E9F7E7 |
![#B8E4B0](https://placehold.co/10x10/B8E4B0/B8E4B0.png) |
200 |
#B8E4B0 |
![#87D179](https://placehold.co/10x10/87D179/87D179.png) |
300 |
#87D179 |
![#55BF43](https://placehold.co/10x10/55BF43/55BF43.png) |
400 |
#55BF43 |
![#24AC0C](https://placehold.co/10x10/24AC0C/24AC0C.png) |
500 (Default) |
#24AC0C |
![#1F940A](https://placehold.co/10x10/1F940A/1F940A.png) |
600 |
#1F940A |
![#1A7C09](https://placehold.co/10x10/1A7C09/1A7C09.png) |
700 |
#1A7C09 |
![#156407](https://placehold.co/10x10/156407/156407.png) |
800 |
#156407 |
![#104C05](https://placehold.co/10x10/104C05/104C05.png) |
900 |
#104C05 |
|
Shade |
Color |
![#FFF7E6](https://placehold.co/10x10/FFF7E6/FFF7E6.png) |
100 |
#FFF7E6 |
![#FEE3AE](https://placehold.co/10x10/FEE3AE/FEE3AE.png) |
200 |
#FEE3AE |
![#FDD077](https://placehold.co/10x10/FDD077/FDD077.png) |
300 |
#FDD077 |
![#FDBD3F](https://placehold.co/10x10/FDBD3F/FDBD3F.png) |
400 |
#FDBD3F |
![#FCAA07](https://placehold.co/10x10/FCAA07/FCAA07.png) |
500 (Default) |
#FCAA07 |
![#D99206](https://placehold.co/10x10/D99206/D99206.png) |
600 |
#D99206 |
![#B57A05](https://placehold.co/10x10/B57A05/B57A05.png) |
700 |
#B57A05 |
![#926304](https://placehold.co/10x10/926304/926304.png) |
800 |
#926304 |
![#6F4B03](https://placehold.co/10x10/6F4B03/6F4B03.png) |
900 |
#6F4B03 |
|
Shade |
Color |
![#FEF3F2](https://placehold.co/10x10/FEF3F2/FEF3F2.png) |
50 |
#FEF3F2 |
![#FAEBEC](https://placehold.co/10x10/FAEBEC/FAEBEC.png) |
100 |
#FAEBEC |
![#EFBDC0](https://placehold.co/10x10/EFBDC0/EFBDC0.png) |
200 |
#EFBDC0 |
![#E49094](https://placehold.co/10x10/E49094/E49094.png) |
300 |
#E49094 |
![#D86268](https://placehold.co/10x10/D86268/D86268.png) |
400 |
#D86268 |
![#CD353C](https://placehold.co/10x10/CD353C/CD353C.png) |
500 (Default) |
#CD353C |
![#B02E34](https://placehold.co/10x10/B02E34/B02E34.png) |
600 |
#B02E34 |
![#94262B](https://placehold.co/10x10/94262B/94262B.png) |
700 |
#94262B |
![#771F23](https://placehold.co/10x10/771F23/771F23.png) |
800 |
#771F23 |
![#5A171A](https://placehold.co/10x10/5A171A/5A171A.png) |
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 |
![](assets/screenshots/avatars.png) |
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 |
ElevarmCheckbox |
![](assets/screenshots/checkboxes.png) |
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 |
![](assets/screenshots/dividers.png) |
import 'package:elevarm_ui/elevarm_ui.dart';
/// Normal divider.
ElevarmDivider()
/// With middle content.
ElevarmDivider(
child: Text('With Text'),
)
Component |
Screenshot |
ElevarmDonutChartCard |
![](assets/screenshots/donut-chart-cards.png) |
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) |
![](assets/screenshots/drawer-desktop-expanded.png) |
ElevarmDesktopDrawer (shrunk) |
![](assets/screenshots/drawer-desktop-shrunk.png) |
ElevarmDrawer |
![](assets/screenshots/drawer-mobile.png) |
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 |
ElevarmFilledBadge |
![](assets/screenshots/filled-badges.png) |
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 |
ElevarmIcon |
![](assets/screenshots/icons.png) |
import 'package:elevarm_ui/elevarm_ui.dart';
const ElevarmIcon(
'assets/elevarm_icons/outline/users/user-01.svg',
)
Component |
Screenshot |
ElevarmLinearProgressIndicator |
![](assets/screenshots/linear-progress-indicator.png) |
import 'package:elevarm_ui/elevarm_ui.dart';
const ElevarmLinearProgressIndicator(
value: 0.5,
)
Component |
Screenshot |
ElevarmLineChartCard |
![](assets/screenshots/line-chart-cards.png) |
import 'package:elevarm_ui/elevarm_ui.dart';
ElevarmLineChartCard(
title: 'Banyaknya Petani Terscout & Terdaftar Sebagai Mitra',
subtitle: 'Terakhir diperbarui 30/11/2021 - 09.30 WIB',
dataSource: [
ElevarmLineChartDataSeries(
label: 'Sewa',
color: ElevarmColors.success,
dataPoints: [
ElevarmLineChartData(
label: 'Jan',
value: 10,
),
ElevarmLineChartData(
label: 'Feb',
value: 15,
),
],
),
],
)
Component |
Screenshot |
ElevarmOutlinedBadge |
![](assets/screenshots/outlined-badges.png) |
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 |
ElevarmOutlineButton |
![](assets/screenshots/outline-buttons-destructive.png) |
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 |
ElevarmPasswordStrength |
![](assets/screenshots/password-strengths.png) |
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"),
),
],
)
Component |
Screenshot |
ElevarmPrimaryButton |
![](assets/screenshots/primary-buttons-destructive.png) |
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 |
ElevarmRadioButton |
![](assets/screenshots/radio-buttons-2.png) |
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 |
ElevarmStackedHorizontalBarChartCard |
![](assets/screenshots/stacked-horizontal-bar-chart-cards.png) |
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: (value) => '${value}x rotasi',
dataSource: [
ElevarmStackedHorizontalBarChartData(
label: 'Jagung',
value: 15,
color: ElevarmColors.success,
),
ElevarmStackedHorizontalBarChartData(
label: 'Mentimun',
value: 12,
color: ElevarmColors.primary,
),
],
)
Component |
Screenshot |
ElevarmStackedVerticalBarChartCard |
![](assets/screenshots/stacked-vertical-bar-chart-cards.png) |
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,
),
],
),
],
)
Component |
Screenshot |
ElevarmTabBar |
![](assets/screenshots/tab-bars.png) |
import 'package:elevarm_ui/elevarm_ui.dart';
ElevarmTabBar(
labels: const ['Petani', 'Komoditas'],
activeIndex: 0,
onChange: (int newIndex) {},
)
Component |
Screenshot |
ElevarmTertiaryNeutralButton |
![](assets/screenshots/tertiary-neutral-buttons-destructive.png) |
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 |
ElevarmMobilePaginationFooter |
![](assets/screenshots/mobile-pagination-footers.png) |
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(),
)
Screen |
Screenshot |
Elevarm404DesktopScreen |
![](assets/screenshots/404-desktop-screen.jpg) |
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
),
Screen |
Screenshot |
ElevarmUnderConstructionDesktopScreen |
![](assets/screenshots/under-construction-desktop-screen.jpg) |
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
),
Screen |
Screenshot |
ElevarmErrorDesktopScreen |
![](assets/screenshots/error-desktop-screen.jpg) |
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
),
Contact here: majid@elevarm.com