Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

core: setup theme extensions #373

Closed
wants to merge 4 commits into from
Closed

core: setup theme extensions #373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0ba5bc0
core: Switch to theme usage
wizlif Feb 14, 2023
4dce3cb
fix: Tests
wizlif Feb 14, 2023
3303841
fix: Set text styles in custom theme
wizlif Feb 15, 2023
7b69c92
fix(theme): Rebase updates
wizlif Mar 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lib/core/core.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@ import 'package:flutter_dotenv/flutter_dotenv.dart';

part 'config/network_config.dart';
part 'utils/text_style.ext.dart';
part 'theme/theme.ext.dart';
part 'theme/app_color_scheme.dart';
226 changes: 226 additions & 0 deletions lib/core/theme/app_color_scheme.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
part of '../core.dart';

@immutable
class CollactionTheme extends ThemeExtension<CollactionTheme> {
final Color? primaryColor;
final Color? secondaryColor;
final Color? accentColor;

final Color? shadowColor;

final Color? inactiveColor;
final Color? almostTransparent;
final Color? secondaryTransparent;

final Color? enabledButtonColor;
final Color? disabledButtonColor;

final Color? errorColor;
final Color? successColor;

final Color? irisColor;

final Color? primaryColor0;
final Color? primaryColor100;
final Color? primaryColor200;
final Color? primaryColor300;
final Color? primaryColor400;
final Color? primaryColor500;

final TextStyle? caption1;
final TextStyle? body;
final TextStyle? title1;

const CollactionTheme({
required this.primaryColor,
required this.secondaryColor,
required this.accentColor,
required this.shadowColor,
required this.inactiveColor,
required this.almostTransparent,
required this.secondaryTransparent,
required this.enabledButtonColor,
required this.disabledButtonColor,
required this.errorColor,
required this.successColor,
required this.irisColor,
required this.primaryColor0,
required this.primaryColor100,
required this.primaryColor200,
required this.primaryColor300,
required this.primaryColor400,
required this.primaryColor500,
required this.caption1,
required this.body,
required this.title1,
});

@override
ThemeExtension<CollactionTheme> copyWith({
Color? primaryColor,
Color? secondaryColor,
Color? accentColor,
Color? shadowColor,
Color? inactiveColor,
Color? almostTransparent,
Color? secondaryTransparent,
Color? enabledButtonColor,
Color? disabledButtonColor,
Color? errorColor,
Color? successColor,
Color? irisColor,
Color? primaryColor0,
Color? primaryColor100,
Color? primaryColor200,
Color? primaryColor300,
Color? primaryColor400,
Color? primaryColor500,
TextStyle? caption1,
TextStyle? body,
TextStyle? title1,
}) {
return CollactionTheme(
primaryColor: primaryColor ?? this.primaryColor,
secondaryColor: secondaryColor ?? this.secondaryColor,
accentColor: accentColor ?? this.accentColor,
shadowColor: shadowColor ?? this.shadowColor,
inactiveColor: inactiveColor ?? this.inactiveColor,
almostTransparent: almostTransparent ?? this.almostTransparent,
secondaryTransparent: secondaryTransparent ?? this.secondaryTransparent,
enabledButtonColor: enabledButtonColor ?? this.enabledButtonColor,
disabledButtonColor: disabledButtonColor ?? this.disabledButtonColor,
errorColor: errorColor ?? this.errorColor,
successColor: successColor ?? this.successColor,
irisColor: irisColor ?? this.irisColor,
primaryColor0: primaryColor0 ?? this.primaryColor0,
primaryColor100: primaryColor100 ?? this.primaryColor100,
primaryColor200: primaryColor200 ?? this.primaryColor200,
primaryColor300: primaryColor300 ?? this.primaryColor300,
primaryColor400: primaryColor400 ?? this.primaryColor400,
primaryColor500: primaryColor500 ?? this.primaryColor500,
caption1: caption1 ?? this.caption1,
body: body ?? this.body,
title1: title1 ?? this.title1,
);
}

@override
ThemeExtension<CollactionTheme> lerp(
covariant ThemeExtension<CollactionTheme>? other, double t) {
if (other is! CollactionTheme) {
return this;
}

return CollactionTheme(
primaryColor: Color.lerp(primaryColor, other.primaryColor, t),
secondaryColor: Color.lerp(secondaryColor, other.secondaryColor, t),
accentColor: Color.lerp(accentColor, other.accentColor, t),
shadowColor: Color.lerp(shadowColor, other.shadowColor, t),
inactiveColor: Color.lerp(inactiveColor, other.inactiveColor, t),
almostTransparent: Color.lerp(
almostTransparent,
other.almostTransparent,
t,
),
secondaryTransparent: Color.lerp(
secondaryTransparent,
other.secondaryTransparent,
t,
),
enabledButtonColor: Color.lerp(
enabledButtonColor,
other.enabledButtonColor,
t,
),
disabledButtonColor: Color.lerp(
disabledButtonColor,
other.disabledButtonColor,
t,
),
errorColor: Color.lerp(errorColor, other.errorColor, t),
successColor: Color.lerp(successColor, other.successColor, t),
irisColor: Color.lerp(irisColor, other.irisColor, t),
primaryColor0: Color.lerp(primaryColor0, other.primaryColor0, t),
primaryColor100: Color.lerp(primaryColor100, other.primaryColor100, t),
primaryColor200: Color.lerp(primaryColor200, other.primaryColor200, t),
primaryColor300: Color.lerp(primaryColor300, other.primaryColor300, t),
primaryColor400: Color.lerp(primaryColor400, other.primaryColor400, t),
primaryColor500: Color.lerp(primaryColor500, other.primaryColor500, t),
caption1: TextStyle.lerp(caption1, other.caption1, t),
body: TextStyle.lerp(body, other.body, t),
title1: TextStyle.lerp(title1, other.title1, t),
);
}

// the light theme
static const light = CollactionTheme(
primaryColor: Colors.black,
secondaryColor: Color(0xFFF9F9F9),
accentColor: Color(0xFF2EB494),
shadowColor: Color.fromRGBO(0, 0, 0, 0.1),
inactiveColor: Color(0xFF666666),
almostTransparent: Color(0xFFEFEFEF),
secondaryTransparent: Color(0xFFCCCCCC),
enabledButtonColor: Color(0xFF2EB494),
disabledButtonColor: Color(0xFF999999),
errorColor: Color(0xFFE11900),
successColor: Color(0xFF2EB494),
irisColor: Color(0xFF5D5FEF),
primaryColor0: Color(0xFFEFEFEF),
primaryColor100: Color(0xFFCCCCCC),
primaryColor200: Color(0xFF999999),
primaryColor300: Color(0xFF666666),
primaryColor400: Color(0xFF333333),
primaryColor500: Color(0xFF000000),
caption1: TextStyle(
fontSize: 12,
height: 16 / 12,
),
body: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w300,
height: 26 / 17,
),
title1: TextStyle(
fontSize: 28,
height: 34 / 28,
fontWeight: FontWeight.w700,
),
);

// the dark theme
static const dark = CollactionTheme(
primaryColor: Colors.white,
secondaryColor: Color(0xFF060606),
accentColor: Color(0xFF2EB494),
shadowColor: Color.fromRGBO(255, 255, 255, 0.1),
inactiveColor: Color(0xFF666666),
almostTransparent: Color(0xFF101010),
secondaryTransparent: Color(0xFF333333),
enabledButtonColor: Color(0xFF2EB494),
disabledButtonColor: Color(0xFF666666),
errorColor: Color(0xFFE11900),
successColor: Color(0xFF2EB494),
irisColor: Color(0xFF5D5FEF),
primaryColor0: Color(0xFF101010),
primaryColor100: Color(0xFF333333),
primaryColor200: Color(0xFF666666),
primaryColor300: Color(0xFF999999),
primaryColor400: Color(0xFFCCCCCC),
primaryColor500: Colors.white,
caption1: TextStyle(
fontSize: 12,
height: 16 / 12,
),
body: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w300,
height: 26 / 17,
),
title1: TextStyle(
fontSize: 28,
height: 34 / 28,
fontWeight: FontWeight.w700,
),
);
}
41 changes: 41 additions & 0 deletions lib/core/theme/theme.ext.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
part of '../core.dart';

extension ThemeBuildContextX on BuildContext {
ThemeData get theme => Theme.of(this);

// Primary Color
Color get primary => theme.primary;

// Secondary/Accent Color
Color get secondary => theme.colorScheme.secondary;

// Formerly Secondary Color
Color get tertiary => theme.colorScheme.secondaryContainer;

// Background Color
Color get background => theme.colorScheme.background;

// Scaffold color
Color get scaffoldColor => theme.scaffoldBackgroundColor;

// Foreground color
Color get onBackground => theme.onBackground;

// If brightness dark
bool get isDark => theme.brightness == Brightness.dark;

CollactionTheme get kTheme => theme.kTheme;
}

extension ThemeX on ThemeData {
CollactionTheme get kTheme => extension<CollactionTheme>()!;

// Primary Color
Color get primary => colorScheme.primary;

// Foreground color
Color get onBackground => colorScheme.onBackground;

// Scaffold color
Color get scaffoldColor => scaffoldBackgroundColor;
}
6 changes: 3 additions & 3 deletions lib/presentation/auth/auth_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';

import '../../application/auth/auth_bloc.dart';
import '../../application/user/profile/profile_bloc.dart';
import '../../core/core.dart';
import '../routes/app_routes.gr.dart';
import '../shared_widgets/custom_app_bars/custom_appbar.dart';
import '../themes/constants.dart';
import '../utils/context.ext.dart';
import 'widgets/enter_username.dart';
import 'widgets/profile_photo.dart';
Expand Down Expand Up @@ -99,8 +99,8 @@ class AuthPageState extends State<AuthPage> {
DotsIndicator(
position: _currentPage % 3,
dotsCount: 3,
decorator: const DotsDecorator(
activeColor: kAccentColor,
decorator: DotsDecorator(
activeColor: context.kTheme.accentColor,
color: Color(0xFFCCCCCC),
size: Size(12.0, 12.0),
activeSize: Size(12.0, 12.0),
Expand Down
4 changes: 2 additions & 2 deletions lib/presentation/auth/unauthenticated_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';

import '../../core/core.dart';
import '../routes/app_routes.gr.dart';
import '../shared_widgets/pill_button.dart';
import '../themes/constants.dart';
import '../../domain/core/i_settings_repository.dart';
import '../../infrastructure/core/injection.dart';

Expand All @@ -15,7 +15,7 @@ class UnauthenticatedPage extends StatelessWidget {
});

return Scaffold(
backgroundColor: kAccentColor,
backgroundColor: context.kTheme.accentColor,
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
Expand Down
10 changes: 5 additions & 5 deletions lib/presentation/auth/widgets/enter_username.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import 'package:flutter/services.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../application/username/username_bloc.dart';
import '../../../core/core.dart';
import '../../../infrastructure/core/injection.dart';
import '../../shared_widgets/pill_button.dart';
import '../../themes/constants.dart';

class EnterUserName extends StatefulWidget {
final void Function(String fullname) onDone;
Expand Down Expand Up @@ -67,12 +67,12 @@ class EnterUserNameState extends State<EnterUserName> {
),
const SizedBox(height: 10.0),
Row(
children: const [
children: [
Expanded(
child: Text(
'Enter your first name or use a recognizable name that others can identify you by',
textAlign: TextAlign.center,
style: TextStyle(color: kInactiveColor),
style: TextStyle(color: context.kTheme.inactiveColor),
),
),
],
Expand All @@ -93,7 +93,7 @@ class EnterUserNameState extends State<EnterUserName> {
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: 'Your First Name',
focusColor: kAccentColor,
focusColor: context.kTheme.accentColor,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
Expand Down Expand Up @@ -131,7 +131,7 @@ class EnterUserNameState extends State<EnterUserName> {
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: 'Your Last Name',
focusColor: kAccentColor,
focusColor: context.kTheme.accentColor,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
Expand Down
Loading