bitcoin_ui

Description:

bitcoin ui

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
copied to clipboard
Usage #
Import in the dart file where you want to use it
import 'package:bitcoin_ui/bitcoin_ui.dart';
copied to clipboard
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
copied to clipboard

// 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
copied to clipboard

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)
copied to clipboard
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");
}
),
copied to clipboard
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),
copied to clipboard
Additional information #
Find out more at Bitcoin UI Kit