Merge pull request #90 from TaskWeaver/89-button-design-theme

89 button design theme

front/android/app/build.gradle

@@ -26,6 +26,13 @@ apply plugin: 'kotlin-android'
 apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
 
 android {
+    packagingOptions {
+        pickFirst 'lib/x86/libc++_shared.so'
+        pickFirst 'lib/x86_64/libc++_shared.so'
+        pickFirst 'lib/armeabi-v7a/libc++_shared.so'
+        pickFirst 'lib/arm64-v8a/libc++_shared.so'
+    }
+
     compileSdkVersion flutter.compileSdkVersion
     ndkVersion flutter.ndkVersion
 

front/lib/app/config/routes.dart

@@ -16,6 +16,7 @@ import 'package:front/features/user/presentation/screens/main_screen.dart';
 import 'package:front/features/user/presentation/screens/my_info_screen.dart';
 import 'package:front/features/user/presentation/screens/signin.dart';
 import 'package:front/features/user/presentation/screens/social_login_info_screen.dart';
+import 'package:front/main/widgetbook.dart';
 import 'package:go_router/go_router.dart';
 
 final router = GoRouter(initialLocation: '/', routes: [
@@ -80,6 +81,11 @@ final router = GoRouter(initialLocation: '/', routes: [
       name: 'main',
       builder: (context, state) => const MainScreen(),
     ),
+    GoRoute(
+      path: 'design',
+      name: 'design',
+      builder: (context, state) => const WidgetbookApp(),
+    ),
     GoRoute(
         path: 'taskDetail',
         name: 'taskDetail',

front/lib/features/home.dart

@@ -8,46 +8,82 @@ class HomeScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(title: const Text('홈')),
-        body: Center(
-            child: Column(children: [
-          ElevatedButton(
-            onPressed: () {
-              context.push('/login'); // 로그인 화면으로 이동
-            },
-            child: const Text('로그인'),
-          ),
-          ElevatedButton(
-            onPressed: () {
-              context.push('/teamsList'); // 로그인 화면으로 이동
-            },
-            child: const Text('team'),
-          ),
-          ElevatedButton(
-            onPressed: () {
-              context.push('/example'); // 로그인 화면으로 이동
-            },
-            child: const Text('formExample'),
-          ),
-          ElevatedButton(
-              onPressed: () {
-                context.go('/main');
-              },
-              child: const Text('메인 페이지')),
-          ElevatedButton(
-              onPressed: () {
-                context.go('/taskDetail');
-              },
-              child: const Text('taskDetail')),
-          ElevatedButton(
-              onPressed: () {
-                context.go('/myInfo');
-              },
-              child: const Text('마이 페이지')),
-          ElevatedButton(
-              onPressed: () {
-                context.go('/notificationToken');
-              },
-              child: const Text('알림 토큰 확인')),
-        ])));
+        body:  Padding(
+          padding: const EdgeInsets.all(32.0),
+          child: Center(
+              child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                ElevatedButton(
+                  onPressed: () {
+                    context.push('/login'); // 로그인 화면으로 이동
+                  },
+                  child: const Text('로그인'),
+                ),
+                const SizedBox(height: 8),
+                ElevatedButton(
+                  onPressed: () {
+                    context.push('/teamsList'); // 로그인 화면으로 이동
+                  },
+                  child: const Text('team'),
+                ),
+                const SizedBox(height: 10),
+                ElevatedButton(
+                  onPressed: () {
+                    context.push('/example'); // 로그인 화면으로 이동
+                  },
+                  child: const Text('formExample'),
+                ),
+                const SizedBox(height: 10),
+                ElevatedButton(
+                    onPressed: () {
+                      context.go('/projectDetail');
+                    },
+                    child: const Text('프로젝트')),
+                const SizedBox(height: 10),
+                ElevatedButton(
+                    onPressed: () {
+                      context.go('/projectCreation');
+                    },
+                    child: const Text('프로젝트 생성')),
+                const SizedBox(height: 10),
+                ElevatedButton(
+                    onPressed: () {
+                      context.go('/projectUpdate');
+                    },
+                    child: const Text('프로젝트 수정')),
+                const SizedBox(height: 10),
+                ElevatedButton(
+                    onPressed: () {
+                      context.go('/main');
+                    },
+                    child: const Text('메인 페이지')),
+                const SizedBox(height: 10),
+                ElevatedButton(
+                    onPressed: () {
+                      context.go('/taskDetail');
+                    },
+                    child: const Text('taskDetail')),
+                const SizedBox(height: 10),
+                ElevatedButton(
+                    onPressed: () {
+                      context.go('/myInfo');
+                    },
+                    child: const Text(
+                      '마이 페이지',
+                      style: TextStyle(color: Colors.white),
+                    )),
+                const SizedBox(height: 10),
+                ElevatedButton(
+                    onPressed: () {
+                      context.go('/design');
+                    },
+                    child: const Text(
+                      '디자인 페이지',
+                      style: TextStyle(color: Colors.white),
+                    )),
+                const SizedBox(height: 10),
+              ])),
+        ));
   }
 }

front/lib/features/team/presentation/pages/team/team_datail_view.dart

@@ -8,6 +8,7 @@ import 'package:front/features/team/presentation/providers/projects_state.dart';
 import 'package:front/features/team/presentation/providers/team_controller.dart';
 import 'package:front/features/team/presentation/providers/team_detail.dart';
 import 'package:front/features/team/presentation/providers/team_detail_controller.dart';
+import 'package:front/features/user/presentation/viewmodel/main_screen_viewmodel.dart';
 
 class TeamDetailView extends ConsumerStatefulWidget {
   final String teamId;

front/lib/main/main.dart

@@ -4,6 +4,7 @@ import 'package:front/app/config/routes.dart';
 import 'package:front/core/config/providers/secure_storage.dart';
 import 'package:front/features/user/data_sources/rivorpod.dart';
 import 'package:front/main/app_config.dart';
+import 'package:front/shared/theme/theme.dart';
 
 class MyApp extends StatelessWidget {
   const MyApp({super.key});
@@ -19,6 +20,7 @@ class MyApp extends StatelessWidget {
         child: MaterialApp.router(
       debugShowCheckedModeBanner: false,
       title: config.appName,
+      theme: themeData,
       routeInformationParser: router.routeInformationParser,
       routeInformationProvider: router.routeInformationProvider,
       routerDelegate: router.routerDelegate,

front/lib/main/main_dev.dart

@@ -18,6 +18,5 @@ void main() async {
     apiBaseUrl: 'https://dev.taskWeaver.com/',
     child: MyApp(),
   );
-
   runApp(ProviderScope(child: TranslationProvider(child: configuredApp)));
 }

front/lib/main/widgetbook.dart

@@ -3,6 +3,7 @@
 import 'package:flutter/material.dart';
 // Import the generated directories variable
 import 'package:front/main/widgetbook.directories.g.dart';
+import 'package:front/shared/theme/theme.dart';
 import 'package:widgetbook/widgetbook.dart';
 import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
 
@@ -24,7 +25,7 @@ class WidgetbookApp extends StatelessWidget {
           themes: [
             WidgetbookTheme(
               name: 'Light',
-              data: ThemeData.light(),
+              data: themeData,
             ),
             WidgetbookTheme(
               name: 'Dark',

front/lib/shared/theme/elevated_button_theme.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/material.dart';
+import 'package:front/shared/theme/theme.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+Color? getBackgroundColor(Set<MaterialState> states) {
+  if (states.contains(MaterialState.dragged) ||
+      states.contains(MaterialState.selected)) {
+    return themeData.colorScheme.primary.withOpacity(0.92);
+  }
+  return themeData.colorScheme.primary;
+}
+
+Color? getOverlayColor(Set<MaterialState> states) {
+  if (states.contains(MaterialState.hovered)) {
+    return Colors.black.withOpacity(0.04);
+  } else if (states.contains(MaterialState.pressed)) {
+    return Colors.black.withOpacity(0.08);
+  }
+  return Colors.black.withOpacity(0.2);
+}
+
+Color? getForegroundColor(Set<MaterialState> states) {
+  if (states.contains(MaterialState.disabled)) {
+    return themeData.colorScheme.onPrimary.withOpacity(0.35);
+  }
+  return themeData.colorScheme.onPrimary;
+}
+
+TextStyle? getButtonTextStyle(Set<MaterialState> states) {
+  return themeData.textTheme.labelLarge;
+}
+
+ElevatedButtonThemeData elevatedButtonThemeData = ElevatedButtonThemeData(
+  style: ButtonStyle(
+    backgroundColor: MaterialStateProperty.resolveWith(getBackgroundColor),
+    textStyle: MaterialStateProperty.resolveWith(getButtonTextStyle),
+    padding: MaterialStateProperty.all(
+      const EdgeInsets.symmetric(
+        vertical: 16,
+      ),
+    ),
+    foregroundColor: MaterialStateProperty.resolveWith(getForegroundColor),
+    overlayColor: MaterialStateProperty.resolveWith(getOverlayColor),
+    shadowColor: MaterialStateProperty.all(Colors.transparent),
+    shape: MaterialStateProperty.all(
+      RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(8),
+      ),
+    ),
+  ),
+);
+
+@widgetbook.UseCase(
+  name: '',
+  type: ElevatedButton,
+)
+Widget elevatedButtonUseCase(BuildContext context) {
+  return Container(
+    color: Colors.white,
+    child: Padding(
+      padding: const EdgeInsets.all(24.0),
+      child: Center(
+          child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          ElevatedButton(
+            onPressed:
+                context.knobs.boolean(label: 'Disabled', initialValue: false)
+                    ? null
+                    : () {},
+            child: Text(context.knobs.string(
+                label: 'Elevated Button Text',
+                initialValue: 'Elevated Button')),
+          ),
+        ],
+      )),
+    ),
+  );
+}

front/lib/shared/theme/theme.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:front/shared/theme/elevated_button_theme.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+ThemeData themeData = ThemeData(
+  colorScheme: const ColorScheme(
+    background: Colors.white,
+    primary: Color.fromARGB(255, 32, 183, 103),
+    brightness: Brightness.light,
+    error: Colors.red,
+    onBackground: Colors.black,
+    onError: Colors.white,
+    onPrimary: Colors.white,
+    onSecondary: Colors.white,
+    onSurface: Colors.black,
+    secondary: Color.fromARGB(0xff, 0x20, 0xB7, 0x67),
+    surface: Colors.white,
+  ),
+  elevatedButtonTheme: elevatedButtonThemeData,
+  textTheme: TextTheme(
+    labelLarge: GoogleFonts.notoSans(
+      fontSize: 16,
+      fontWeight: FontWeight.w700,
+    ),
+  ),
+
+);

front/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -7,10 +7,12 @@ import Foundation
 
 import firebase_core
 import firebase_messaging
+import path_provider_foundation
 import shared_preferences_foundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   FLTFirebaseCorePlugin.register(with: registry.registrar(forPlugin: "FLTFirebaseCorePlugin"))
   FLTFirebaseMessagingPlugin.register(with: registry.registrar(forPlugin: "FLTFirebaseMessagingPlugin"))
+  PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
 }

front/pubspec.lock

@@ -448,6 +448,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "13.0.1"
+  google_fonts:
+    dependency: "direct main"
+    description:
+      name: google_fonts
+      sha256: f0b8d115a13ecf827013ec9fc883390ccc0e87a96ed5347a3114cac177ef18e8
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.1.0"
   graphs:
     dependency: transitive
     description:
@@ -464,6 +472,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.1.0"
+  http:
+    dependency: transitive
+    description:
+      name: http
+      sha256: a2bbf9d017fcced29139daa8ed2bba4ece450ab222871df93ca9eec6f80c34ba
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
   http_mock_adapter:
     dependency: "direct main"
     description:
@@ -632,6 +648,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.8.3"
+  path_provider:
+    dependency: transitive
+    description:
+      name: path_provider
+      sha256: b27217933eeeba8ff24845c34003b003b2b22151de3c908d0e679e8fe1aa078b
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  path_provider_android:
+    dependency: transitive
+    description:
+      name: path_provider_android
+      sha256: "477184d672607c0a3bf68fbbf601805f92ef79c82b64b4d6eb318cbca4c48668"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.2"
+  path_provider_foundation:
+    dependency: transitive
+    description:
+      name: path_provider_foundation
+      sha256: "5a7999be66e000916500be4f15a3633ebceb8302719b47b9cc49ce924125350f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.2"
   path_provider_linux:
     dependency: transitive
     description:

front/pubspec.yaml

@@ -39,6 +39,7 @@ dependencies:
   slang_flutter: ^3.30.0
   slang_build_runner: ^3.30.0
   get_it: ^7.6.7
+  google_fonts: 6.1.0
 
 
 dev_dependencies: