bitcoin_ui 2.0.0 copy "bitcoin_ui: ^2.0.0" to clipboard
bitcoin_ui: ^2.0.0 copied to clipboard

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

image

// 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

image

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

1
likes
130
pub points
26%
popularity

Publisher

unverified uploader

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.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on bitcoin_ui