Skip to content

bitcoin-verse/verse_design_system_flutter

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
lib
lib
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
pubspec.yaml
pubspec.yaml
 
 

Repository files navigation

Verse Design System for Flutter

A comprehensive design system for the Bitcoin.com Verse ecosystem, featuring 25+ components, dark-first theming, and the signature Verse brand aesthetic.

Features

  • Dark-first theming (Verse's signature deep blue aesthetic)
  • 25+ pre-built components
  • Complete design token system (colors, typography, spacing, shadows)
  • Chart components powered by fl_chart
  • Responsive utilities
  • Full theme switching support (dark/light/system)

Installation

Add to your pubspec.yaml:

dependencies:
  verse_design_system:
    git:
      url: https://github.com/bitcoin-verse/verse-design-system-flutter

Or for local development:

dependencies:
  verse_design_system:
    path: ../verse_design_system

Quick Start

1. Wrap Your App with Theme

import 'package:verse_design_system/verse_design_system.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return VerseThemeBuilder(
      themeMode: VerseThemeMode.dark, // Verse default
      builder: (context, theme) {
        return MaterialApp(
          theme: ThemeData(
            brightness: theme.brightness,
            scaffoldBackgroundColor: theme.colors.background,
          ),
          home: VerseTheme(
            data: theme,
            child: HomePage(),
          ),
        );
      },
    );
  }
}

2. Access Theme in Widgets

Widget build(BuildContext context) {
  final theme = VerseTheme.of(context);

  return Container(
    color: theme.colors.surface,
    child: Text(
      'Hello Verse',
      style: VerseTypography.headingMd(color: theme.colors.textPrimary),
    ),
  );
}

// Or use extension methods
Widget build(BuildContext context) {
  return Container(
    color: context.verseColors.surface,
    child: Text('Hello'),
  );
}

Design Tokens

Colors

Token Value Usage
VerseColors.verseBlue #0085FF Primary brand, CTAs
VerseColors.versePink #DB00FF Secondary accent, gradients
VerseColors.color0 #FFFFFF White text/icons
VerseColors.color200 #8B92AA Secondary text
VerseColors.color400 #434C74 Borders, muted elements
VerseColors.color600 #202B58 Cards, surfaces
VerseColors.color800 #10183C Elevated surfaces
VerseColors.color1000 #0A0A2C Background

Status Colors

Status Background Foreground
Success success25 (#1C4252) success100 (#52E0C8)
Warning warning25 (#433936) warning100 (#EBC146)
Error error25 (#422133) error100 (#EB6547)

Typography

// Display (Barlow)
VerseTypography.displayXl(color: color)  // 56px, black
VerseTypography.displayLg(color: color)  // 48px, black

// Headings (Barlow)
VerseTypography.headingXl(color: color)  // 40px, bold
VerseTypography.headingLg(color: color)  // 32px, bold
VerseTypography.headingMd(color: color)  // 24px, bold
VerseTypography.headingSm(color: color)  // 20px, semibold

// Body (Lexend)
VerseTypography.bodyLg(color: color)     // 18px
VerseTypography.body(color: color)       // 16px
VerseTypography.bodySm(color: color)     // 14px
VerseTypography.bodyXs(color: color)     // 12px

// Labels (Lexend)
VerseTypography.labelLg(color: color)    // 16px, medium
VerseTypography.label(color: color)      // 14px, medium
VerseTypography.labelSm(color: color)    // 12px, medium

// Numeric (IBM Plex Sans)
VerseTypography.numericLg(color: color)  // 28px, bold
VerseTypography.numeric(color: color)    // 24px, bold
VerseTypography.numericSm(color: color)  // 20px, bold
VerseTypography.numericXs(color: color)  // 16px, semibold

// Mono (JetBrains Mono)
VerseTypography.mono(color: color)       // 14px
VerseTypography.monoSm(color: color)     // 12px

Spacing

VerseSpacing.xs    // 4px
VerseSpacing.s     // 8px
VerseSpacing.m     // 16px
VerseSpacing.l     // 24px
VerseSpacing.xl    // 32px
VerseSpacing.xxl   // 40px
VerseSpacing.xxxl  // 48px

Border Radius

VerseBorderRadius.radiusXs   // 4px
VerseBorderRadius.radiusSm   // 8px
VerseBorderRadius.radiusMd   // 12px
VerseBorderRadius.radiusLg   // 16px
VerseBorderRadius.radiusXl   // 24px
VerseBorderRadius.radiusPill // 9999px

Components

Buttons

// Primary button
VerseButton(
  label: 'Connect Wallet',
  onPressed: () {},
)

// Variants
VerseButton(label: 'Primary', variant: VerseButtonVariant.primary)
VerseButton(label: 'Secondary', variant: VerseButtonVariant.secondary)
VerseButton(label: 'Gradient', variant: VerseButtonVariant.gradient)
VerseButton(label: 'Ghost', variant: VerseButtonVariant.ghost)
VerseButton(label: 'Danger', variant: VerseButtonVariant.danger)

// Sizes
VerseButton(label: 'Small', size: VerseButtonSize.sm)   // 32px
VerseButton(label: 'Medium', size: VerseButtonSize.md)  // 40px
VerseButton(label: 'Large', size: VerseButtonSize.lg)   // 48px
VerseButton(label: 'XL', size: VerseButtonSize.xl)      // 56px

// With icons
VerseButton(
  label: 'Send',
  leadingIcon: Icon(Icons.send),
  onPressed: () {},
)

// Icon button
VerseIconButton(
  icon: Icon(Icons.settings),
  onPressed: () {},
)

Inputs

// Text input
VerseInput(
  label: 'Email',
  hint: 'Enter your email',
  onChanged: (value) {},
)

// With error
VerseInput(
  label: 'Password',
  errorText: 'Password is required',
)

// Textarea
VerseTextarea(
  label: 'Description',
  maxLines: 5,
  showCharacterCount: true,
)

// Select dropdown
VerseSelect<String>(
  label: 'Country',
  options: [
    VerseSelectOption(value: 'us', label: 'United States'),
    VerseSelectOption(value: 'uk', label: 'United Kingdom'),
  ],
  value: selected,
  onChanged: (value) {},
)

// Checkbox
VerseCheckbox(
  label: 'Accept terms',
  value: accepted,
  onChanged: (value) {},
)

// Toggle
VerseToggle(
  label: 'Enable notifications',
  value: enabled,
  onChanged: (value) {},
)

// Slider
VerseSlider(
  label: 'Volume',
  value: volume,
  min: 0,
  max: 100,
  onChanged: (value) {},
)

// Radio buttons
VerseRadioButton<String>(
  label: 'Payment Method',
  options: [
    VerseRadioOption(value: 'card', label: 'Credit Card'),
    VerseRadioOption(value: 'crypto', label: 'Cryptocurrency'),
  ],
  value: selected,
  onChanged: (value) {},
)

Cards

VerseCard(
  child: Column(
    children: [
      Text('Card Title'),
      Text('Card content here'),
    ],
  ),
)

// Glass variant
VerseCard(
  variant: VerseCardVariant.glass,
  child: Text('Glassmorphism'),
)

Navigation

// Tabs
VerseTabs(
  selectedIndex: 0,
  onChanged: (index) {},
  items: [
    VerseTabItem(label: 'Overview'),
    VerseTabItem(label: 'Transactions'),
    VerseTabItem(label: 'Settings'),
  ],
)

// Pagination
VersePagination(
  currentPage: 1,
  totalPages: 10,
  onPageChanged: (page) {},
)

Feedback

// Notification
VerseNotification(
  title: 'Success',
  message: 'Transaction completed!',
  variant: VerseNotificationVariant.success,
)

// Modal
showVerseModal(
  context: context,
  title: 'Confirm',
  content: Text('Are you sure?'),
  actions: [
    VerseButton(label: 'Cancel', variant: VerseButtonVariant.ghost),
    VerseButton(label: 'Confirm'),
  ],
);

Data Display

// List item
VerseListItem(
  leading: Icon(Icons.currency_bitcoin),
  title: Text('Bitcoin'),
  subtitle: Text('BTC'),
  trailing: Text('\$42,000'),
)

// Table
VerseTable(
  columns: [
    VerseTableColumn(label: 'Asset'),
    VerseTableColumn(label: 'Amount'),
  ],
  rows: [
    VerseTableRow(cells: [Text('BTC'), Text('0.5')]),
  ],
)

// Accordion
VerseAccordion(
  title: Text('FAQ Question'),
  content: Text('Answer here...'),
)

Visual

// Avatar
VerseAvatar(initials: 'JD', size: VerseAvatarSize.md)

// Pill/Badge
VersePill(label: 'Active', variant: VersePillVariant.success)

// Logo
VerseLogo(variant: VerseLogoVariant.full, height: 32)

Charts

// Bar chart
VerseBarChart(
  height: 200,
  data: [
    VerseBarChartData(label: 'Jan', value: 100),
    VerseBarChartData(label: 'Feb', value: 150),
  ],
)

// Line chart
VerseLineChart(
  height: 200,
  data: [
    VerseLineChartData(label: 'Jan', value: 100),
    VerseLineChartData(label: 'Feb', value: 150),
  ],
)

// Pie chart
VersePieChart(
  height: 200,
  data: [
    VersePieChartData(label: 'BTC', value: 45),
    VersePieChartData(label: 'ETH', value: 30),
  ],
)

Theming

Theme Modes

// Dark mode (default)
VerseThemeBuilder(
  themeMode: VerseThemeMode.dark,
  builder: (context, theme) => MyApp(),
)

// Light mode
VerseThemeBuilder(
  themeMode: VerseThemeMode.light,
  builder: (context, theme) => MyApp(),
)

// Follow system
VerseThemeBuilder(
  themeMode: VerseThemeMode.system,
  builder: (context, theme) => MyApp(),
)

Accessing Theme Colors

final theme = VerseTheme.of(context);

// Surface colors
theme.colors.background
theme.colors.surface
theme.colors.surfaceMuted
theme.colors.surfaceElevated

// Text colors
theme.colors.textPrimary
theme.colors.textSecondary
theme.colors.textDisabled

// Border colors
theme.colors.border
theme.colors.borderStrong

// Brand colors
theme.colors.primary   // Verse Blue
theme.colors.secondary // Verse Pink

// Shadows
theme.shadows.sm
theme.shadows.md
theme.shadows.lg

Dependencies

  • google_fonts: ^6.1.0 - Typography (Barlow, Lexend, IBM Plex Sans, JetBrains Mono)
  • fl_chart: ^0.68.0 - Chart components

Requirements

  • Flutter >=3.10.0
  • Dart >=3.0.0

License

MIT License - Bitcoin.com Verse

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages