Flutter Style Package
A comprehensive theming system for Flutter applications that provides responsive design capabilities and customizable styling across different device types.
Features
- Responsive Design: Automatic adaptation to different screen sizes (Mobile, Tablet, Desktop, TV)
- JSON-based Configuration: Define themes using external JSON files
- Multiple Theme Support: Switch between different themes at runtime
- Comprehensive Styling: Colors, typography, spacing, shadows, and button styles
- Extension Methods: Convenient extensions for Text, ButtonStyle, and Color classes
- Breakpoint System: Built-in responsive breakpoints for different device types
Installation
Add this package to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter
# Add your package name here
Quick Start
1. Create a Theme JSON File
Create a theme.json file in your assets folder:
{
"breakpoints": [576, 768, 992],
"themes": [
{
"colors": {
"primary": "#3498db",
"secondary": "#2c3e50",
"background": "#ffffff",
"foreground": "#000000",
"info": "#17a2b8",
"success": "#28a745",
"warning": "#ffc107",
"danger": "#dc3545"
},
"texts": {
"size": {
"tiny": [10, 12, 14, 16],
"small": [12, 14, 16, 18],
"medium": [14, 16, 18, 20],
"large": [16, 18, 20, 22],
"huge": [18, 20, 22, 24],
"title": [20, 22, 24, 26],
"biggest": [24, 26, 28, 30]
}
},
"border": {
"radius": {
"small": [4, 6, 8, 10],
"medium": [8, 10, 12, 14],
"large": [12, 14, 16, 18]
}
},
"padding": {
"small": [8, 10, 12, 14],
"medium": [12, 14, 16, 18],
"large": [16, 18, 20, 22]
},
"shadows": {
"small": [
{
"color": "#00000025",
"offset": [0, 2],
"radius": 4,
"spread": 0
}
],
"medium": [
{
"color": "#00000035",
"offset": [0, 4],
"radius": 8,
"spread": 0
}
],
"large": [
{
"color": "#00000045",
"offset": [0, 8],
"radius": 16,
"spread": 0
}
]
}
}
]
}
2. Initialize the Style System
import 'package:flutter/material.dart';
// Import your style package
void main() async {
WidgetsFlutterBinding.ensureInitialized();
// Initialize the style system
await Style.init('assets/theme.json', 0); // 0 is the theme index
runApp(MyApp());
}
3. Use the Style System
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding: Style.paddings.medium(context),
decoration: BoxDecoration(
color: Style.colors.background,
borderRadius: Style.radius.medium(context),
boxShadow: Style.shadows.medium(context),
),
child: Column(
children: [
"Hello World".title(context).primary.bold,
"Subtitle text".medium(context).secondary,
ElevatedButton(
style: Style.buttons.primary().medium(context),
onPressed: () {},
child: Text("Click me"),
),
],
),
);
}
}
API Reference
Style Class
Main class that provides access to all theming components.
Static Properties
Style.colors- Access to color themeStyle.texts- Access to text sizingStyle.fonts- Access to font familiesStyle.radius- Access to border radius valuesStyle.paddings- Access to padding valuesStyle.shadows- Access to shadow configurationsStyle.buttons- Access to button styles
Static Methods
Style.init(String path, [int index])- Initialize theme from JSON fileStyle.change(int index)- Switch to different themeStyle.index(BuildContext context)- Get current device breakpoint indexStyle.getValue<T>(List<T> values, BuildContext context)- Get responsive value
Colors
Access theme colors:
Style.colors.primary // Primary color
Style.colors.secondary // Secondary color
Style.colors.background // Background color
Style.colors.foreground // Foreground color
Style.colors.info // Info color
Style.colors.success // Success color
Style.colors.warning // Warning color
Style.colors.danger // Danger color
Typography
Get responsive text sizes:
Style.texts.tiny(context) // Smallest text size
Style.texts.small(context) // Small text size
Style.texts.medium(context) // Medium text size
Style.texts.large(context) // Large text size
Style.texts.huge(context) // Huge text size
Style.texts.title(context) // Title text size
Style.texts.biggest(context) // Biggest text size
Fonts
Access font families:
Style.fonts.light // Light font weight
Style.fonts.bold // Bold font weight
Style.fonts.ultra // Ultra bold font weight
Style.fonts.cursive // Cursive font family
Spacing
Get responsive padding:
Style.paddings.small(context) // Small padding
Style.paddings.medium(context) // Medium padding
Style.paddings.large(context) // Large padding
Border Radius
Get responsive border radius:
Style.radius.small(context) // Small border radius
Style.radius.medium(context) // Medium border radius
Style.radius.large(context) // Large border radius
Shadows
Get responsive shadows:
Style.shadows.small(context) // Small shadow
Style.shadows.medium(context) // Medium shadow
Style.shadows.large(context) // Large shadow
Extension Methods
String Extensions
Convert strings to styled Text widgets:
"Hello".txt // Basic Text widget
"Hello".bold // Bold text
"Hello".light // Light text
"Hello".primary // Primary color text
"Hello".small(context) // Small sized text
Text Extensions
Chain styling methods on Text widgets:
Text("Hello")
.bold
.primary
.medium(context)
ButtonStyle Extensions
Create styled buttons:
ElevatedButton(
style: Style.buttons
.primary() // Primary color button
.medium(context), // Medium size
child: Text("Button"),
onPressed: () {},
)
// Available button styles:
.primary() // Primary colored button
.secondary() // Secondary colored button
.info() // Info colored button
.success() // Success colored button
.warning() // Warning colored button
.danger() // Danger colored button
.outline() // Outline button
.disabled() // Disabled button
// Available button sizes:
.small(context) // Small button
.medium(context) // Medium button
.large(context) // Large button
Color Extensions
Manipulate colors:
Color myColor = Style.colors.primary;
Color darker = myColor.darken(0.2); // Darken by 20%
Color lighter = myColor.lighten(0.3); // Lighten by 30%
Responsive Breakpoints
The system uses four breakpoints by default:
- Mobile: < 576px (index 0)
- Tablet: 576px - 767px (index 1)
- Desktop: 768px - 991px (index 2)
- TV: ≥ 992px (index 3)
You can customize these breakpoints in your theme JSON file.
Multiple Themes
Support multiple themes by defining them in your JSON:
// Switch to theme at index 1
Style.change(1);
Examples
Creating a Card Component
Widget buildCard(BuildContext context) {
return Container(
padding: Style.paddings.large(context),
decoration: BoxDecoration(
color: Style.colors.background,
borderRadius: Style.radius.medium(context),
boxShadow: Style.shadows.large(context),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
"Card Title".title(context).primary.bold,
SizedBox(height: 8),
"This is the card content that adapts to different screen sizes."
.medium(context)
.foreground,
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
ElevatedButton(
style: Style.buttons.primary().small(context),
onPressed: () {},
child: Text("Action"),
),
ElevatedButton(
style: Style.buttons.outline().small(context),
onPressed: () {},
child: Text("Cancel"),
),
],
),
],
),
);
}
Responsive Layout
Widget responsiveWidget(BuildContext context) {
final deviceIndex = Style.index(context);
return Container(
padding: Style.paddings.medium(context),
child: deviceIndex < 2
? Column(children: widgets) // Mobile/Tablet: vertical layout
: Row(children: widgets), // Desktop/TV: horizontal layout
);
}
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.