gdsc_ys_color

Description:

gdsc ys color

color_flutter #
Semantic Color System Package for GDSC Yonsei Chapter.
For additional infos, refer to GDSC Yonsei chapter color system Figma page.
⚙️ Installation #
This package can be installed by adding gdsc-ys-color to your pubspec.yaml
flutter pub add gdsc_ys_color
copied to clipboard
or by adding this line to your dependencies and running flutter pub get in your terminal.
dependencies:
gdsc_ys_color: ^1.0.0
copied to clipboard
Now you can use it by importing gdsc_ys_color.dart in your dart file.
import 'package:gdsc_ys_color/gdsc_ys_color.dart';
copied to clipboard
👟 QuickStart #
You can use this package by importing gdsc_ys_color.dart and using GDSCTheme class.
When you create a new instance of GDSCTheme, you can specify which theme you want to use.
GDSCColorTheme enum contains all the themes available. (Currently blue, green, yellow, red are available.)
import 'package:flutter/material.dart';
import 'package:gdsc_ys_color/gdsc_ys_color.dart';

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

class MyApp extends StatelessWidget {
MyApp({super.key});

final GDSCTheme theme = GDSCTheme(currentTheme: GDSCColorTheme.blue);

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GDSC Theme Demo',
theme: theme.getTheme(), // This returns current theme's ThemeData object.
home: const MyHomePage(title: 'GDSC Theme Demo'),
);
}
}
copied to clipboard
🔧 Usage #
1. Semantic Colors 👩‍🎨 #
ElevatedButton(
onPressed: _incrementCounter,
child: Text('button',
style: TextStyle(
color: theme.colors.button.primary.label.common)),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
theme.colors.button.primary.background.common
),
)
),
copied to clipboard
Semantic colors are color tokens which named after what they represents.
gdsc_ys_color package provides semantic colors for following use cases.



Name
Description




content
Common colors for components like text or icon.


background
Defines background colors.


button
Defines button colors.


textButton
Defines text button colors.


border
Defines border colors.


line
Defines line colors


tag
Defines tag colors.


tabBar
Defines tab bar colors.



To use semantic colors, we recommend using GDSCTheme with state management packages like GetX or Provider.
You can use semantic colors by calling theme.colors and accessing the color you want to use.
2. Using Themes 🎨 #
2.1 Usage with GetX
When using GetX, you can use GDSCTheme class using GetxController.
The example code below shows how to use GDSCTheme with GetX. Runnable example can be found in example.
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:gdsc_ys_color/gdsc_ys_color.dart';

...

class ThemeController extends GetxController {
...
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
// Bind the ThemeController
return GetBuilder<ThemeController>(
init: ThemeController(),
builder: (themeController) {
return GetMaterialApp(
title: 'Flutter Demo',
theme: themeController.themeData,
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
});
}
}

...

class MyHomePage extends StatelessWidget {
// Access the ThemeController by calling Get.find<ThemeController>()
final _themeController = Get.find<ThemeController>();
...
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
// access current theme's semantic colors by calling theme.colors
backgroundColor:
_themeController.theme.colors.button.primary.background.common,
foregroundColor:
_themeController.theme.colors.button.primary.label.common,
child: const Icon(Icons.add),
)
...
}
copied to clipboard
2.2 Usage with Provider
When using Provider, you can use GDSCTheme class using ChangeNotifier.
The ChangeNotifier is already exported from gdsc_ys_color.dart. You can use it as GDSCThemeManager.
Example code below shows how to use GDSCTheme with Provider. Runnable example can be found in example.
import 'package:flutter/material.dart';
import 'package:gdsc_ys_color/gdsc_ys_color.dart';
import 'package:provider/provider.dart';

void main() {
runApp(ChangeNotifierProvider(
create: (context) => GDSCThemeManager(defaultColor: GDSCThemeColor.green),
child: const DynamicThemeWithProviderExample(),
));
}
...
class DynamicThemeWithProviderExample extends StatelessWidget {
const DynamicThemeWithProviderExample({super.key});

@override
Widget build(BuildContext context) {
final themeManager = Provider.of<GDSCThemeManager>(context);
return MaterialApp(
title: 'GDSC Dynamic Theme with Provider',
theme: themeManager.themeData,
home: const MyHomePage(title: 'GDSC Dynamic Theme with Provider'),
);
}
}

...

class _MyHomePageState extends State<MyHomePage> {
...

@override
Widget build(BuildContext context) {
// Access the ThemeController by calling Provider.of<ThemeController>(context)
final themeManager = Provider.of<GDSCThemeManager>(context);
...
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
// access current theme's semantic colors by calling theme.colors
backgroundColor:
themeManager.theme.colors.button.primary.background.common,
foregroundColor: themeManager.theme.colors.button.primary.label.common,
child: const Icon(Icons.add),
),
...
}
}
copied to clipboard
2.3 Accessing ThemeData directly
GDSCTheme exports predefined ThemeData which is compatiable with MaterialApp's theme property.
You can access the theme directly by specifying which theme you want to use.
import 'package:flutter/material.dart';
import 'package:gdsc_ys_color/gdsc_ys_color.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {

return MaterialApp(
title: 'Flutter Demo',
theme: GDSCTheme.green, // Set to your preferred theme
home: const MyHomePage(title: 'GDSC Theme Demo'),
);
}
}
copied to clipboard