Skip to content

Commit

Permalink
Merge pull request #71 from sparcs-kaist/#70-taxidialog-리팩토링
Browse files Browse the repository at this point in the history 
taxiDialog 리팩토링
  • Loading branch information
@happycastle114
happycastle114 authored Sep 11, 2023
2 parents 569399b + 3e2bb3d commit f0276e4
Show file tree
Hide file tree
Showing 4 changed files with 235 additions and 139 deletions.
123 changes: 123 additions & 0 deletions lib/constants/theme.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
import 'package:flutter/material.dart';

//primaryColor 지정 (색상코드: #6E3647)
final Map<int, Color> primaryColor1 = {
50: const Color.fromRGBO(110, 54, 120, .1),
100: const Color.fromRGBO(110, 54, 120, .2),
200: const Color.fromRGBO(110, 54, 120, .3),
300: const Color.fromRGBO(110, 54, 120, .4),
400: const Color.fromRGBO(110, 54, 120, .5),
500: const Color.fromRGBO(110, 54, 120, .6),
600: const Color.fromRGBO(110, 54, 120, .7),
700: const Color.fromRGBO(110, 54, 120, .8),
800: const Color.fromRGBO(110, 54, 120, .9),
900: const Color.fromRGBO(110, 54, 120, 1),
};
final MaterialColor taxiPrimaryMaterialColor =
MaterialColor(0xFF6E3678, primaryColor1);
const Color taxiPrimaryColor = Color(0xFF6E3678);
const Color taxiMainBackgroundColor = Colors.white;
const Color toastBackgroundColor = Colors.white;
const Color toastTextColor = Colors.black;
const Color notiColor = Color(0x66C8C8C8);
final Color dialogBarrierColor = Colors.black.withOpacity(0.6);

//아래의 상수들은 피그마 기준 상의 패딩 픽셀과는 차이를 두고 있지만,
//이는 모바일 환경상 웹뷰와 같은 간격을 제시하기 위해 설정한 값들입니다.
double devicePixelRatio = 3.0;
const double dialogPadding = 15.0;
final defaultDialogUpperTitlePadding =
Padding(padding: EdgeInsets.symmetric(vertical: 36.0 / devicePixelRatio));

final defaultDialogMedianTitlePadding =
Padding(padding: EdgeInsets.all(6 / devicePixelRatio));

final defaultDialogLowerTitlePadding =
Padding(padding: EdgeInsets.symmetric(vertical: 24 / devicePixelRatio));

final defaultDialogVerticalMedianButtonPadding = Padding(
padding:
EdgeInsets.symmetric(horizontal: dialogPadding / devicePixelRatio));

final defaultDialogLowerButtonPadding = Padding(
padding: EdgeInsets.only(bottom: (dialogPadding / 2) / devicePixelRatio));

final defaultDialogPadding =
Padding(padding: EdgeInsets.all(dialogPadding / devicePixelRatio));

final defaultDialogButtonSize = Size(147.50, 35);

final defaultDialogButtonInnerPadding = EdgeInsets.only(top: 9, bottom: 9);

final defaultDialogButtonBorderRadius = BorderRadius.circular(8.0);

ThemeData buildTheme() {
final base = ThemeData(
primarySwatch: taxiPrimaryMaterialColor,
primaryColor: const Color(0xFF6E3678),

//dialog 테마
dialogTheme: DialogTheme(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
backgroundColor: Colors.white,
actionsPadding: EdgeInsets.all(dialogPadding / devicePixelRatio),
surfaceTintColor: Colors.black,
),
dialogBackgroundColor: Colors.white,

//dialog 버튼
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
elevation: 0.5,
fixedSize: defaultDialogButtonSize,
padding: defaultDialogButtonInnerPadding,
backgroundColor: const Color.fromARGB(255, 238, 238, 238),
shape: RoundedRectangleBorder(
borderRadius: defaultDialogButtonBorderRadius,
),
),
),
outlinedButtonTheme: OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
fixedSize: defaultDialogButtonSize,
padding: defaultDialogButtonInnerPadding,
backgroundColor: taxiPrimaryMaterialColor,
shape: RoundedRectangleBorder(
borderRadius: defaultDialogButtonBorderRadius,
side: const BorderSide(color: Colors.black),
),
),
),

//텍스트 테마
textTheme: const TextTheme(
//Dialog 제목
titleSmall: TextStyle(
fontFamily: 'NanumSquare',
color: Color(0xFF323232),
fontSize: 16,
fontWeight: FontWeight.w400),

//Dialog 상세 설명
bodySmall: TextStyle(
fontFamily: 'NanumSquare_acB',
color: Color(0xFF888888),
fontSize: 10,
fontWeight: FontWeight.w700),

//Dialog Outlined 버튼 텍스트
labelLarge: TextStyle(
fontFamily: 'NanumSquare_acB',
color: Color(0xFFEEEEEE),
fontSize: 14,
fontWeight: FontWeight.w700),

//Dialog Elevated 버튼 텍스트
labelMedium: TextStyle(
fontFamily: 'NanumSquare',
color: Color.fromARGB(255, 129, 129, 129),
fontSize: 14,
fontWeight: FontWeight.w400)),
);
return base;
}
9 changes: 4 additions & 5 deletions lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import 'package:taxiapp/utils/token.dart';
import 'package:taxiapp/views/taxiView.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:taxiapp/firebase_options.dart';
import 'constants/theme.dart';

late AndroidNotificationChannel channel;
late FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin;
Expand Down Expand Up @@ -82,13 +83,11 @@ class MyHome extends HookWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Taxi App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
theme: buildTheme(),
home: Container(
color: const Color(0xFF6E3647),
color: Theme.of(context).primaryColor,
child: Container(
color: Colors.white,
color: taxiMainBackgroundColor,
child: TaxiView(),
),
),
Expand Down
126 changes: 55 additions & 71 deletions lib/views/taxiDialog.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,91 +2,75 @@ import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:open_store/open_store.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:taxiapp/constants/theme.dart';

class TaxiDialog extends StatelessWidget {
late Set<Widget> boxContent;
late Set<Widget> boxMainContent;
late Set<Widget> boxSecondaryContent;
late String leftButtonContent;
late String rightButtonContent;
TaxiDialog(
{super.key,
required this.boxContent,
required this.boxMainContent,
required this.boxSecondaryContent,
required this.leftButtonContent,
required this.rightButtonContent});

@override
Widget build(BuildContext context) {
return Container(
width: 350,
height: 165,
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(15)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Padding(padding: EdgeInsets.all(15)),
...boxContent,
const Padding(
padding: EdgeInsets.all(15),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
elevation: 0.5,
fixedSize: const Size(150, 45),
backgroundColor: const Color(0xFFFAF8FB),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: const BorderSide(color: Colors.white),
),
),
child: Text(leftButtonContent,
style: GoogleFonts.roboto(
textStyle: const TextStyle(
color: Color(0xFFC8C8C8),
fontSize: 13,
fontWeight: FontWeight.normal))),
onPressed: () async {
if (Platform.isIOS) {
exit(0);
} else {
SystemNavigator.pop();
}
}),
const Padding(
padding: EdgeInsets.all(10),
),
OutlinedButton(
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(const Size(150, 45)),
backgroundColor: MaterialStateProperty.all<Color>(
const Color(0xFF6E3678)),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: const BorderSide(color: Colors.black),
),
),
),
child: Text(rightButtonContent,
style: GoogleFonts.roboto(
textStyle: const TextStyle(
color: Color(0xFFEEEEEE),
fontSize: 13,
fontWeight: FontWeight.bold))),
onPressed: () async {
OpenStore.instance.open(
androidAppBundleId: dotenv.get("ANDROID_APPID"),
appStoreId: dotenv.get("IOS_APPID"));
}),
],
)
]),
height: double.infinity,
width: double.infinity,
color: dialogBarrierColor,
child: Dialog(
alignment: Alignment.center,
backgroundColor: Theme.of(context).dialogBackgroundColor,
shape: Theme.of(context).dialogTheme.shape,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
defaultDialogUpperTitlePadding,
...boxMainContent,
defaultDialogMedianTitlePadding,
...boxSecondaryContent,
defaultDialogLowerTitlePadding,
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
defaultDialogPadding,
ElevatedButton(
style: Theme.of(context).elevatedButtonTheme.style,
child: Text(leftButtonContent,
style: Theme.of(context).textTheme.labelMedium),
onPressed: () async {
if (Platform.isIOS) {
exit(0);
} else {
SystemNavigator.pop();
}
}),
defaultDialogVerticalMedianButtonPadding,
OutlinedButton(
style: Theme.of(context).outlinedButtonTheme.style,
child: Text(rightButtonContent,
style: Theme.of(context).textTheme.labelLarge),
onPressed: () async {
OpenStore.instance.open(
androidAppBundleId: dotenv.get("ANDROID_APPID"),
appStoreId: dotenv.get("IOS_APPID"));
}),
defaultDialogPadding,
],
),
defaultDialogLowerButtonPadding
]),
),
);
}
}
Loading

0 comments on commit f0276e4

Please sign in to comment.