refactor: move common UI to toolkit (fireship-io#13)

narcodico · web-flow · commit e1b9fe390a9f · 2021-08-17T16:25:12.000+03:00
* refactor: move theme to ui toolkit

* refactor: move common ui to ui toolkit
diff --git a/lib/about/view/about_view.dart b/lib/about/view/about_view.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:quizapp/l10n/l10n.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 
 class AboutView extends StatelessWidget {
   const AboutView({Key? key}) : super(key: key);
@@ -10,7 +10,7 @@ class AboutView extends StatelessWidget {
     return Scaffold(
       appBar: AppBar(
         title: Text(context.l10n.aboutLabel),
-        backgroundColor: kBlue,
+        backgroundColor: QuizColors.blue,
       ),
       body: const Center(
         child: Text('About this app...'),
diff --git a/lib/app/view/app.dart b/lib/app/view/app.dart
@@ -8,8 +8,7 @@ import 'package:quizapp/l10n/l10n.dart';
 import 'package:quizapp/login/login.dart';
 import 'package:shared/shared.dart';
 import 'package:user_repository/user_repository.dart';
-import 'package:quizapp/shared/shared.dart';
-import 'package:quizapp/theme/theme.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 
 List<Page> onGenerateAppPages(
   AppStatus status,
@@ -51,7 +50,7 @@ class _AppView extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       onGenerateTitle: (context) => context.l10n.appTitle,
-      theme: ThemeData.dark().withQuizTheme(),
+      theme: QuizTheme.dark(),
       localizationsDelegates: const [
         AppLocalizations.delegate,
         GlobalMaterialLocalizations.delegate,
diff --git a/lib/home/view/bottom_nav_bar.dart b/lib/home/view/bottom_nav_bar.dart
@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:quizapp/l10n/l10n.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:shared/shared.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 
 enum NavBarItem { topics, about, profile }
 
@@ -41,8 +41,8 @@ class BottomNavBar extends StatelessWidget {
     final l10n = context.l10n;
     return Theme(
       data: context.theme.copyWith(
-        highlightColor: Colors.transparent,
-        splashColor: Colors.transparent,
+        highlightColor: QuizColors.transparent,
+        splashColor: QuizColors.transparent,
       ),
       child: BottomNavigationBar(
         onTap: (index) {
diff --git a/lib/login/view/login_page.dart b/lib/login/view/login_page.dart
@@ -6,8 +6,8 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:quizapp/l10n/l10n.dart';
 import 'package:quizapp/login/cubit/login_cubit.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:shared/shared.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 import 'package:user_repository/user_repository.dart';
 
 class LoginPage extends StatelessWidget {
diff --git a/lib/profile/view/profile_view.dart b/lib/profile/view/profile_view.dart
@@ -3,9 +3,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:quizapp/app/cubit/app_cubit.dart';
 import 'package:quizapp/profile/cubit/profile_cubit.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:quizapp/l10n/l10n.dart';
 import 'package:transparent_image/transparent_image.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 import 'package:user_repository/user_repository.dart';
 
 class ProfileView extends StatefulWidget {
@@ -42,7 +42,7 @@ class Profile extends StatelessWidget {
       listener: (_, __) => context.read<AppCubit>().logOut(),
       child: Scaffold(
         appBar: AppBar(
-          backgroundColor: kDeepOrange,
+          backgroundColor: QuizColors.deepOrange,
           title: const DisplayName(),
         ),
         body: Column(
@@ -155,7 +155,7 @@ class LogOutButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return ActionButton(
       onPressed: context.read<ProfileCubit>().logOut,
-      backgroundColor: kRed,
+      backgroundColor: QuizColors.red,
       label: Text(context.l10n.logOutButtonLabel),
     );
   }
diff --git a/lib/quiz/view/complete_view.dart b/lib/quiz/view/complete_view.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:quizapp/quiz/cubit/quiz_cubit.dart';
 import 'package:provider/provider.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:quizapp/l10n/l10n.dart';
 import 'package:ui_toolkit/ui_toolkit.dart';
 
diff --git a/lib/quiz/view/question_view.dart b/lib/quiz/view/question_view.dart
@@ -3,9 +3,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:provider/provider.dart';
 import 'package:quizapp/quiz/cubit/quiz_cubit.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:quizzes_repository/quizzes_repository.dart';
 import 'package:quizapp/l10n/l10n.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 
 class QuestionView extends StatelessWidget {
   const QuestionView({Key? key, required this.step}) : super(key: key);
diff --git a/lib/quiz/view/quiz_page.dart b/lib/quiz/view/quiz_page.dart
@@ -5,9 +5,9 @@ import 'package:quizapp/quiz/cubit/quiz_cubit.dart';
 import 'package:quizapp/quiz/view/complete_view.dart';
 import 'package:quizapp/quiz/view/question_view.dart';
 import 'package:quizapp/quiz/view/start_view.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:quizzes_repository/quizzes_repository.dart';
 import 'package:shared/shared.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 import 'package:user_repository/user_repository.dart';
 
 class QuizPage extends StatelessWidget {
diff --git a/lib/quiz/view/start_view.dart b/lib/quiz/view/start_view.dart
@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:quizapp/quiz/cubit/quiz_cubit.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:quizapp/l10n/l10n.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 
 class StartView extends StatelessWidget {
   const StartView({Key? key}) : super(key: key);
@@ -67,7 +67,7 @@ class QuizStartButton extends StatelessWidget {
     return ActionButton.icon(
       onPressed: context.read<QuizCubit>().incrementStep,
       icon: const Icon(Icons.poll),
-      backgroundColor: kGreen,
+      backgroundColor: QuizColors.green,
       label: Text(context.l10n.quizStartButtonLabel),
     );
   }
diff --git a/lib/shared/shared.dart b/lib/shared/shared.dart
diff --git a/lib/shared/styles.dart b/lib/shared/styles.dart
diff --git a/lib/topics/view/topic_page.dart b/lib/topics/view/topic_page.dart
@@ -4,8 +4,8 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:quizapp/topics/cubit/topics_cubit.dart';
 import 'package:shared/shared.dart';
 import 'package:topics_repository/topics_repository.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 import 'package:user_repository/user_repository.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:flow_builder/flow_builder.dart';
 
 import 'package:quizapp/topics/view/topic_cover.dart';
@@ -30,7 +30,7 @@ class TopicPage extends StatelessWidget {
       },
       child: Scaffold(
         appBar: AppBar(
-          backgroundColor: Colors.transparent,
+          backgroundColor: QuizColors.transparent,
           leading: BackButton(
             onPressed: () {
               context.flow<TopicsFlowState>().deselectTopic();
diff --git a/lib/topics/view/topics_page.dart b/lib/topics/view/topics_page.dart
@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:quizapp/shared/shared.dart';
 import 'package:quizapp/topics/cubit/topics_cubit.dart';
 import 'package:topics_repository/topics_repository.dart';
 import 'package:quizapp/l10n/l10n.dart';
 import 'package:flow_builder/flow_builder.dart';
+import 'package:ui_toolkit/ui_toolkit.dart';
 import 'package:user_repository/user_repository.dart';
 
 import 'package:quizapp/topics/view/topic_cover.dart';
@@ -20,7 +20,7 @@ class TopicsPage extends StatelessWidget {
     return Scaffold(
       appBar: AppBar(
         title: Text(context.l10n.topicsLabel),
-        backgroundColor: kDeepPurple,
+        backgroundColor: QuizColors.deepPurple,
       ),
       body: const TopicsGrid(),
     );
@@ -133,7 +133,7 @@ class TopicProgress extends StatelessWidget {
         const SizedBox(width: 8),
         Text(
           topic.progress(quizCount),
-          style: const TextStyle(fontSize: 10, color: kGrey),
+          style: const TextStyle(fontSize: 10, color: QuizColors.grey),
         ),
         Expanded(
           child: AnimatedProgressBar.mini(
diff --git a/packages/ui_toolkit/lib/src/colors.dart b/packages/ui_toolkit/lib/src/colors.dart
@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+
+abstract class QuizColors {
+  static const white = Colors.white;
+  static const lightBlack = Colors.black45;
+  static const grey = Colors.grey;
+  static const purple = Color(0xFFB39DDB);
+  static const deepPurple = Colors.deepPurple;
+  static const pink = Color(0xFFF48FB1);
+  static const red = Colors.red;
+  static const green = Colors.green;
+  static const blue = Colors.blue;
+  static const deepOrange = Colors.deepOrange;
+  static const transparent = Colors.transparent;
+}
diff --git a/packages/ui_toolkit/lib/src/constants.dart b/packages/ui_toolkit/lib/src/constants.dart
@@ -0,0 +1,4 @@
+import 'package:flutter/material.dart';
+
+const kMargin = 30.0;
+const kInsets = EdgeInsets.all(kMargin);
diff --git a/packages/ui_toolkit/lib/src/extensions.dart b/packages/ui_toolkit/lib/src/extensions.dart
diff --git a/packages/ui_toolkit/lib/src/theme.dart b/packages/ui_toolkit/lib/src/theme.dart
@@ -1,8 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 
-extension ThemeDataExtensions on ThemeData {
-  ThemeData withQuizTheme() {
+class QuizTheme {
+  static ThemeData dark() => ThemeData.dark().applyQuizTheme();
+}
+
+extension _ThemeDataExtensions on ThemeData {
+  ThemeData applyQuizTheme() {
     return copyWith(
       colorScheme: const ColorScheme.dark(
         primary: Colors.white,
diff --git a/packages/ui_toolkit/lib/src/widgets.dart b/packages/ui_toolkit/lib/src/widgets.dart
@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_spinkit/flutter_spinkit.dart';
-import 'package:quizapp/shared/shared.dart';
+import 'package:ui_toolkit/src/colors.dart';
+import 'package:ui_toolkit/src/constants.dart';
+import 'package:ui_toolkit/src/extensions.dart';
 
 class Loader extends StatelessWidget {
   const Loader({
@@ -43,7 +45,7 @@ class Failure extends StatelessWidget {
       child: Text(
         _message,
         style: const TextStyle(
-          color: kRed,
+          color: QuizColors.red,
           fontWeight: FontWeight.bold,
         ),
       ),
@@ -67,7 +69,7 @@ class NoContent extends StatelessWidget {
         _message,
         textAlign: TextAlign.center,
         style: const TextStyle(
-          color: kGrey,
+          color: QuizColors.grey,
           fontWeight: FontWeight.bold,
         ),
       ),
diff --git a/packages/ui_toolkit/lib/ui_toolkit.dart b/packages/ui_toolkit/lib/ui_toolkit.dart
@@ -1,3 +1,8 @@
 library ui_toolkit;
 
+export 'src/colors.dart';
+export 'src/constants.dart';
+export 'src/extensions.dart';
 export 'src/gen/gen.dart';
+export 'src/theme.dart';
+export 'src/widgets.dart';
diff --git a/packages/ui_toolkit/pubspec.yaml b/packages/ui_toolkit/pubspec.yaml
@@ -9,8 +9,8 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  flutter_spinkit: ^5.0.0
+  google_fonts: ^2.1.0
 
 dev_dependencies:
   very_good_analysis: ^2.3.0
-
-  
diff --git a/pubspec.lock b/pubspec.lock
@@ -365,7 +365,7 @@ packages:
     source: hosted
     version: "2.0.1"
   google_fonts:
-    dependency: "direct main"
+    dependency: transitive
     description:
       name: google_fonts
       url: "https://pub.dartlang.org"
@@ -510,14 +510,14 @@ packages:
       name: path_provider_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.0"
+    version: "2.0.2"
   path_provider_macos:
     dependency: transitive
     description:
       name: path_provider_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.0"
+    version: "2.0.2"
   path_provider_platform_interface:
     dependency: transitive
     description:
@@ -531,7 +531,7 @@ packages:
       name: path_provider_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.1"
+    version: "2.0.3"
   pedantic:
     dependency: transitive
     description:
@@ -552,7 +552,7 @@ packages:
       name: platform
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.0"
+    version: "3.0.2"
   plugin_platform_interface:
     dependency: transitive
     description:
@@ -573,7 +573,7 @@ packages:
       name: process
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.2.1"
+    version: "4.2.3"
   provider:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -18,7 +18,6 @@ dependencies:
     sdk: flutter
   flutter_spinkit: ^5.0.0
   font_awesome_flutter: ^9.1.0
-  google_fonts: ^2.1.0
   intl: ^0.17.0
   quizzes_repository:
     path: packages/quizzes_repository
