flutter_tokens 0.0.5

Flutter token project

flutter_tokens

Table of Contents

1. Installation
2. Getting Started
3. Using Colors
4. Using Text Styles
5. Using SL Button

Installation

Add this package to your Flutter project by adding the following to your pubspec.yaml:

dependencies:
  flutter_tokens:
    git:
      url: https://github.com/your-repo/flutter_tokens.git
      ref: main # or specific branch/tag

Or if published to pub.dev:

dependencies:
  flutter_tokens: ^1.0.0

Then run:

flutter pub get

Getting Started

Import the library in your Dart files:

import 'package:flutter_tokens/flutter_tokens.dart';

Using Colors

The library provides a comprehensive color palette through the ColorPalette class.

Available Colors

// Primary Colors
ColorPalette.purple
ColorPalette.darkPurple
ColorPalette.darkPurple2
ColorPalette.darkPurple3
ColorPalette.darkPurple4
ColorPalette.darkPurple5

// Light Purple Shades
ColorPalette.lightPurple
ColorPalette.lightPurple2
ColorPalette.lightPurple3
ColorPalette.lightPurple2_20 // 20% opacity

// Greys
ColorPalette.lightGrey
ColorPalette.white

// And many more...

Example Usage

import 'package:flutter/material.dart';
import 'package:flutter_tokens/constants/colors.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: ColorPalette.purple,
      child: Text(
        'Hello World',
        style: TextStyle(color: ColorPalette.white),
      ),
    );
  }
}

Using Text Styles

The library provides responsive text styles through the AppTextStyles class. All text styles are responsive and adjust based on device size.

Available Text Styles

// Display Styles
AppTextStyles.displayXXLBold(context)
AppTextStyles.displayXLBold(context)
AppTextStyles.displayLBold(context)
AppTextStyles.displayMSemibold(context)
AppTextStyles.displaySSemibold(context)

// Heading Styles
AppTextStyles.headingXLBold(context)
AppTextStyles.headingLBold(context)
AppTextStyles.headingMSemibold(context)
AppTextStyles.headingSSemibold(context)
AppTextStyles.headingXSSemibold(context)

// Body Text Styles
AppTextStyles.bodyLSemibold(context)
AppTextStyles.bodyLRegular(context)
AppTextStyles.bodyMSemibold(context)
AppTextStyles.bodyMRegular(context)
AppTextStyles.bodySSemibold(context)
AppTextStyles.bodySRegular(context)

// CTA (Call-to-Action) Styles
AppTextStyles.ctaXLSemibold(context)
AppTextStyles.ctaLSemibold(context)
AppTextStyles.ctaMSemibold(context)
AppTextStyles.ctaSSemibold(context)

Example Usage

import 'package:flutter/material.dart';
import 'package:flutter_tokens/sl_text_style.dart';
import 'package:flutter_tokens/constants/colors.dart';

class MyTextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          'Large Heading',
          style: AppTextStyles.headingLBold(context, color: ColorPalette.darkPurple),
        ),
        SizedBox(height: 16),
        Text(
          'Body text content goes here',
          style: AppTextStyles.bodyMRegular(context),
        ),
      ],
    );
  }
}

Using SL Button

The SLButton widget provides a customizable button with various styles, sizes, and themes.

Button Properties

• child (required): The widget to display inside the button (usually Text or Row with icon)
• size (required): Button size - ButtonSize.small, ButtonSize.medium, ButtonSize.large, ButtonSize.extraLarge
• theme (required): Button theme - SLButtonTheme.light or SLButtonTheme.dark
• type (required): Button type - ButtonType.primary, ButtonType.secondary, ButtonType.secondaryFilled, ButtonType.tertiary
• onPressed (required): Callback function when button is pressed
• isEnabled (optional): Whether the button is enabled (default: true)
• iconPosition (optional): Position of icon - IconPosition.before or IconPosition.after
• gap (optional): Space between icon and text (default: 8.0)
• imageWidget (optional): Icon or image widget to display

Basic Button Examples

import 'package:flutter/material.dart';
import 'package:flutter_tokens/widgets/button/sl_button.dart';
import 'package:flutter_tokens/enum/button_enum.dart';

class ButtonExamples extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Primary Button
        SLButton(
          child: Text('Primary Button'),
          size: ButtonSize.medium,
          theme: SLButtonTheme.light,
          type: ButtonType.primary,
          onPressed: () {
            print('Primary button pressed');
          },
        ),
        
        SizedBox(height: 16),
        
        // Secondary Button
        SLButton(
          child: Text('Secondary Button'),
          size: ButtonSize.large,
          theme: SLButtonTheme.light,
          type: ButtonType.secondary,
          onPressed: () {
            print('Secondary button pressed');
          },
        ),
        
        SizedBox(height: 16),
        
        // Disabled Button
        SLButton(
          child: Text('Disabled Button'),
          size: ButtonSize.medium,
          theme: SLButtonTheme.light,
          type: ButtonType.primary,
          onPressed: () {},
          isEnabled: false,
        ),
      ],
    );
  }
}

Button with Icon Examples

// Button with icon before text
SLButton(
  child: Text('Download'),
  size: ButtonSize.medium,
  theme: SLButtonTheme.light,
  type: ButtonType.primary,
  onPressed: () {},
  imageWidget: Icon(Icons.download, size: 16),
  iconPosition: IconPosition.before,
  gap: 12,
)

// Button with icon after text
SLButton(
  child: Text('Next'),
  size: ButtonSize.medium,
  theme: SLButtonTheme.dark,
  type: ButtonType.secondaryFilled,
  onPressed: () {},
  imageWidget: Icon(Icons.arrow_forward, size: 16),
  iconPosition: IconPosition.after,
)

// Button with custom image
SLButton(
  child: Text('Login with Google'),
  size: ButtonSize.large,
  theme: SLButtonTheme.light,
  type: ButtonType.secondary,
  onPressed: () {},
  imageWidget: Image.asset('assets/google_logo.png', width: 20, height: 20),
  iconPosition: IconPosition.before,
  gap: 16,
)

All Button Types Example

class AllButtonTypes extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Light Theme Buttons
        Text('Light Theme', style: AppTextStyles.headingMSemibold(context)),
        SizedBox(height: 16),
        
        Wrap(
          spacing: 16,
          runSpacing: 16,
          children: [
            SLButton(
              child: Text('Primary'),
              size: ButtonSize.medium,
              theme: SLButtonTheme.light,
              type: ButtonType.primary,
              onPressed: () {},
            ),
            SLButton(
              child: Text('Secondary Filled'),
              size: ButtonSize.medium,
              theme: SLButtonTheme.light,
              type: ButtonType.secondaryFilled,
              onPressed: () {},
            ),
            SLButton(
              child: Text('Secondary'),
              size: ButtonSize.medium,
              theme: SLButtonTheme.light,
              type: ButtonType.secondary,
              onPressed: () {},
            ),
            SLButton(
              child: Text('Tertiary'),
              size: ButtonSize.medium,
              theme: SLButtonTheme.light,
              type: ButtonType.tertiary,
              onPressed: () {},
            ),
          ],
        ),
        
        SizedBox(height: 32),
        
        // Dark Theme Buttons
        Container(
          color: ColorPalette.darkPurple5,
          padding: EdgeInsets.all(24),
          child: Column(
            children: [
              Text('Dark Theme', style: AppTextStyles.headingMSemibold(context, color: ColorPalette.white)),
              SizedBox(height: 16),
              
              Wrap(
                spacing: 16,
                runSpacing: 16,
                children: [
                  SLButton(
                    child: Text('Primary'),
                    size: ButtonSize.medium,
                    theme: SLButtonTheme.dark,
                    type: ButtonType.primary,
                    onPressed: () {},
                  ),
                  SLButton(
                    child: Text('Secondary Filled'),
                    size: ButtonSize.medium,
                    theme: SLButtonTheme.dark,
                    type: ButtonType.secondaryFilled,
                    onPressed: () {},
                  ),
                  SLButton(
                    child: Text('Secondary'),
                    size: ButtonSize.medium,
                    theme: SLButtonTheme.dark,
                    type: ButtonType.secondary,
                    onPressed: () {},
                  ),
                  SLButton(
                    child: Text('Tertiary'),
                    size: ButtonSize.medium,
                    theme: SLButtonTheme.dark,
                    type: ButtonType.tertiary,
                    onPressed: () {},
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    );
  }
}

All Button Sizes Example

class ButtonSizes extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SLButton(
          child: Text('Extra Large'),
          size: ButtonSize.extraLarge,
          theme: SLButtonTheme.light,
          type: ButtonType.primary,
          onPressed: () {},
        ),
        SizedBox(height: 16),
        SLButton(
          child: Text('Large'),
          size: ButtonSize.large,
          theme: SLButtonTheme.light,
          type: ButtonType.primary,
          onPressed: () {},
        ),
        SizedBox(height: 16),
        SLButton(
          child: Text('Medium'),
          size: ButtonSize.medium,
          theme: SLButtonTheme.light,
          type: ButtonType.primary,
          onPressed: () {},
        ),
        SizedBox(height: 16),
        SLButton(
          child: Text('Small'),
          size: ButtonSize.small,
          theme: SLButtonTheme.light,
          type: ButtonType.primary,
          onPressed: () {},
        ),
      ],
    );
  }
}

Complete Example App

import 'package:flutter/material.dart';
import 'package:flutter_tokens/flutter_tokens.dart';
import 'package:flutter_tokens/widgets/button/sl_button.dart';
import 'package:flutter_tokens/enum/button_enum.dart';
import 'package:flutter_tokens/constants/colors.dart';
import 'package:flutter_tokens/sl_text_style.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SL UI Library Demo',
      home: DemoScreen(),
    );
  }
}

class DemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorPalette.white,
      body: SafeArea(
        child: SingleChildScrollView(
          padding: EdgeInsets.all(24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'SL UI Library Demo',
                style: AppTextStyles.displayLBold(context, color: ColorPalette.darkPurple),
              ),
              SizedBox(height: 32),
              
              Text(
                'Buttons',
                style: AppTextStyles.headingLBold(context),
              ),
              SizedBox(height: 16),
              
              SLButton(
                child: Text('Get Started'),
                size: ButtonSize.large,
                theme: SLButtonTheme.light,
                type: ButtonType.primary,
                onPressed: () {
                  // Handle button press
                },
                imageWidget: Icon(Icons.arrow_forward, size: 18),
                iconPosition: IconPosition.after,
              ),
              
              SizedBox(height: 16),
              
              SLButton(
                child: Text('Learn More'),
                size: ButtonSize.medium,
                theme: SLButtonTheme.light,
                type: ButtonType.secondary,
                onPressed: () {
                  // Handle button press
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Tips and Best Practices

1. Responsive Design: All text styles are responsive by default. Always pass context to text style methods.

2. Theme Consistency: Choose either light or dark theme for your buttons based on the background they're placed on.

3. Button States: The button automatically handles hover, pressed, and disabled states with appropriate visual feedback.

4. Accessibility: Always provide meaningful text for buttons and ensure sufficient color contrast.

5. Icon Sizing: Icons in buttons automatically adjust based on button size, but you can override if needed.