flutter_tokens
Table of Contents
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.lightorSLButtonTheme.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.beforeorIconPosition.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
-
Responsive Design: All text styles are responsive by default. Always pass
contextto text style methods. -
Theme Consistency: Choose either light or dark theme for your buttons based on the background they're placed on.
-
Button States: The button automatically handles hover, pressed, and disabled states with appropriate visual feedback.
-
Accessibility: Always provide meaningful text for buttons and ensure sufficient color contrast.
-
Icon Sizing: Icons in buttons automatically adjust based on button size, but you can override if needed.