bitcoin_ui 2.0.0

Bitcoin UI for Flutter. Provides UI components like colors, text styles, buttons and more from the Bitcoin UI Kit project by the Bitcoin design community.

Bitcoin UI

This is the Flutter implementation of the Bitcoin UI Kit.

Getting started

Add the package in your pubspec.yaml dependencies

dependencies:
  bitcoin_ui: : ^2.0.0

Usage

Import in the dart file where you want to use it

import 'package:bitcoin_ui/bitcoin_ui.dart';

Colors

// Light primary and accent colors
Bitcoin.orange
Bitcoin.red
Bitcoin.green
Bitcoin.blue
Bitcoin.purple

// Light theme neutrals
Bitcoin.white
Bitcoin.neutral1
Bitcoin.neutral2
Bitcoin.neutral3
Bitcoin.neutral4
Bitcoin.neutral5
Bitcoin.neutral6
Bitcoin.neutral7
Bitcoin.neutral8
Bitcoin.black

// Dark primary and accent colors
Bitcoin.orangeDark
Bitcoin.redDark
Bitcoin.greenDark
Bitcoin.blueDark
Bitcoin.purpleDark

// Dark theme neutrals
Bitcoin.neutral1Dark
Bitcoin.neutral2Dark
Bitcoin.neutral3Dark
Bitcoin.neutral4Dark
Bitcoin.neutral5Dark
Bitcoin.neutral6Dark
Bitcoin.neutral7Dark
Bitcoin.neutral8Dark

Text styles

There are five title styles and five body styles, each with a color parameter.

// Title styles
BitcoinTextStyle.title1(Bitcoin.black)
BitcoinTextStyle.title2(Bitcoin.black)
BitcoinTextStyle.title3(Bitcoin.black)
BitcoinTextStyle.title4(Bitcoin.black)
BitcoinTextStyle.title5(Bitcoin.black)

// Body styles
BitcoinTextStyle.body1(Bitcoin.black)
BitcoinTextStyle.body2(Bitcoin.black)
BitcoinTextStyle.body3(Bitcoin.black)
BitcoinTextStyle.body4(Bitcoin.black)
BitcoinTextStyle.body5(Bitcoin.black)

Buttons

There are three styles of buttons in the UI Kit

• BitcoinButtonFilled
• BitcoinButtonOutlined
• BitcoinButtonPlain

They each have optional parameters like, textStyle, width, height, tintColor, textColor (for BitcoinButtonFilled), cornerRadius and the ability to set disabled and isLoading states. By default, they use colors from the Flutter Theme and are capsule shaped, although this can be overridden.

BitcoinButtonFilled(
  title: "Filled",
  onPressed: () {
    debugPrint("Test button press");
  }
),

Icons

Most of the icons from Bitcoin Icons are included.

Image(
    image: const AssetImage("icons/bitcoin_circle.png",
    package: "bitcoin_ui_kit"),
    color: Bitcoin.orange),

Additional information

Find out more at Bitcoin UI Kit