elevarm_ui 0.0.1+6 copy "elevarm_ui: ^0.0.1+6" to clipboard
elevarm_ui: ^0.0.1+6 copied to clipboard

Elevarm design system for Flutter.

Pub Version

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
#E7E8EA 100 #E7E8EA
#B1B4B9 200 #B1B4B9
#7C8089 300 #7C8089
#464C58 400 #464C58
#101828 500 #101828

a.2. Grey Colors #

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

a.3. Primary Colors #

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

a.4. Info Colors #

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

a.5. Success Colors #

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

a.6. Warning Colors #

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

a.7. Danger Colors #

Shade Color
#FEF3F2 50 #FEF3F2
#FAEBEC 100 #FAEBEC
#EFBDC0 200 #EFBDC0
#E49094 300 #E49094
#D86268 400 #D86268
#CD353C 500 (Default) #CD353C
#B02E34 600 #B02E34
#94262B 700 #94262B
#771F23 800 #771F23
#5A171A 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: majid@elevarm.com

41
likes
0
pub points
76%
popularity

Publisher

unverified uploader

Elevarm design system for Flutter.

Homepage

License

unknown (LICENSE)

Dependencies

flutter, flutter_svg, google_fonts

More

Packages that depend on elevarm_ui