awesome_styles

Description:

awesome styles

Custom Theme Manager for Flutter #
This package provides a customizable theme management solution for Flutter applications. It enables easy setup and use of dynamic themes with responsive design support, allowing you to manage colors, text styles, paddings, shadows, and more from a single configuration file.
Features #

Responsive Design: Automatically adjusts theme parameters based on device size (Mobile, Tablet, Desktop, TV).
Customizable Themes: Load and apply themes from a JSON configuration file.
Text and Color Management: Easily manage text styles and colors.
Button Styles: Predefined button styles with support for different states and sizes.
Shadow and Radius Customization: Fine-tuned control over component shadows and border radii.

Getting Started #
1. Installation #
Add the package as a dependency in your pubspec.yaml:
dependencies:
awesome_styles: ^1.0.0
copied to clipboard
Then, install the package using the command:
flutter pub get
copied to clipboard
2. Configuration #
Place your theme configuration file theme.json in the assets folder of your project.
Example of theme.json:
[
{
"colors": {
"primary": "#FF5733",
"secondary": "#C70039",
"background": "#FFFFFF",
"foreground": "#000000"
},
"texts": {
"size": {
"tiny": [12, 14, 16, 18],
"small": [14, 16, 18, 20],
"medium": [16, 18, 20, 22],
"large": [18, 20, 22, 24],
"huge": [20, 22, 24, 26],
"title": [24, 26, 28, 30],
"biggest": [28, 30, 32, 34]
}
},
"border": {
"radius": {
"small": [4, 6, 8, 10],
"medium": [6, 8, 10, 12],
"large": [8, 10, 12, 14]
}
},
"padding": {
"small": [4, 6, 8, 10],
"medium": [6, 8, 10, 12],
"large": [8, 10, 12, 14]
},
"shadows": {
"small": [
{
"color": "#000000",
"offset": [0, 1],
"radius": 3,
"spread": 0
}
],
"medium": [
{
"color": "#000000",
"offset": [0, 2],
"radius": 6,
"spread": 1
}
],
"large": [
{
"color": "#000000",
"offset": [0, 3],
"radius": 9,
"spread": 2
}
]
}
}
]
copied to clipboard
3. Initialization #
Initialize the theme in your main.dart:
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Style.init(); // Load theme from assets/theme.json
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Style.colors.primary,
textTheme: TextTheme(
bodyText1: TextStyle(fontSize: Style.texts.medium(context)),
),
buttonTheme: ButtonThemeData(
buttonColor: Style.colors.primary,
),
),
home: MyHomePage(),
);
}
}
copied to clipboard
4. Usage #
Accessing Colors and Text Styles:
Text(
'Hello World',
style: TextStyle(
fontSize: Style.texts.large(context),
color: Style.colors.primary,
),
);
copied to clipboard
Button Styles:
ElevatedButton(
style: Style.buttons.primary(),
onPressed: () {},
child: Text('Primary Button'),
);
copied to clipboard
Responsive Radius and Padding:
Container(
padding: Style.paddings.medium(context),
decoration: BoxDecoration(
borderRadius: Style.radius.medium(context),
),
child: Text('Responsive Container'),
);
copied to clipboard
Documentation #
For detailed information on the available options and additional configurations, please refer to the inline comments in the code and the provided example JSON file.
Examples #
You can find a complete example in the example/ directory of this repository. Run it using:
flutter run example/lib/main.dart
copied to clipboard
Contribution #
Contributions are welcome! If you encounter any issues or have suggestions for improvements, feel free to open an issue or submit a pull request.
License #
This package is distributed under the MIT License. See LICENSE for more information.