elevarm_ui 0.0.1+6

Elevarm design system for Flutter.

Elevarm design system for Flutter.

Features

• ElevarmColors for standardized coloring.
• ElevarmFonts, ElevarmFontWeights, ElevarmFontSizes for standardized typography (in development).

Getting started

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

   import 'package:elevarm_ui/elevarm_ui.dart';
   
   void main() {
       ElevarmFonts.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.

a.1. Neutral Colors

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

a.2. Grey Colors

	Shade	Color
	25	#FCFCFD
	100	#F2F4F7
	200	#EAECF0
	300	#D0D5DD
?	400	?
	500 (Default)	#667085
	600	#475467
	700	#344054
?	800	?
	900	#101828

a.3. Primary Colors

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

a.4. Info Colors

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

a.5. 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.6. Warning Colors

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

a.7. 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;

B. 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. 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;

C. Font Family

Font families are located in ElevarmFonts class.

import 'package:elevarm_ui/elevarm_ui.dart';

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

D. ThemeData

1. ElevarmThemeData.light()

import 'package:elevarm_ui/elevarm_ui.dart';

MaterialApp(
    theme: ElevarmThemeData.light(),
)

E. Components

e.1. ElevarmLinearProgressIndicator

import 'package:elevarm_ui/elevarm_ui.dart';

const ElevarmLinearProgressIndicator(
    value: 0.5,
)

e.2. ElevarmBadge

import 'package:elevarm_ui/elevarm_ui.dart';

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

e.3. 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),
),

e.4. 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),
),

Additional information

Contact here: [e-mail]