diff --git a/assets/images/send.png b/assets/images/send.png new file mode 100644 index 0000000..e0c8f85 Binary files /dev/null and b/assets/images/send.png differ diff --git a/lib/screens/chat_screen.dart b/lib/screens/chat_screen.dart index ac1814a..0eba754 100644 --- a/lib/screens/chat_screen.dart +++ b/lib/screens/chat_screen.dart @@ -139,32 +139,32 @@ class _ChatScreenState extends State { ), child: Center( child: Container( - margin: const EdgeInsets.all(40), // 메인 컨테이너 여백 조정 + margin: const EdgeInsets.all(30), // 메인 컨테이너 여백 조정 decoration: BoxDecoration( color: Colors.white.withOpacity(0.8), // 투명도 넣기 - borderRadius: BorderRadius.circular(16), // 모서리 둥글게 - border: Border.all(color: Color(0xFFE0E0E0), width: 1), + borderRadius: BorderRadius.circular(36), // 모서리 둥글게 + // border: Border.all(color: Color(0xFFE0E0E0), width: 1), ), child: Row( children: [ - // 좌측 캐릭터 영역 (60%) + // 좌측 캐릭터 영역 (50%) Expanded( - flex: 6, + flex: 5, child: Container( - margin: const EdgeInsets.all(20), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(16), - border: Border.all( - color: Color(0xFFE0E0E0), - width: 1, - ), - ), + margin: const EdgeInsets.fromLTRB(30, 0, 30, 50), + // decoration: BoxDecoration( + // color: Colors.white, + // borderRadius: BorderRadius.circular(30), + // border: Border.all( + // color: Color(0xFFE0E0E0), + // width: 1, + // ), + // ), child: Column( children: [ // 헤더 Padding( - padding: const EdgeInsets.all(30), + padding: const EdgeInsets.fromLTRB(30, 66, 30, 30), child: Row( children: [ Container( @@ -210,15 +210,22 @@ class _ChatScreenState extends State { Expanded( child: Container( margin: const EdgeInsets.symmetric( - horizontal: 20, + horizontal: 30, ), decoration: BoxDecoration( color: Color(0xFFF5F5F5), - borderRadius: BorderRadius.circular(12), + borderRadius: BorderRadius.circular(30), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), // 그림자 색상 및 투명도 + blurRadius: 15, // 그림자가 퍼지는 정도 (숫자가 클수록 부드러움) + offset: const Offset(0, 5), // 그림자 위치 (x: 가로, y: 세로) + ), + ], ), child: _isVideoInitialized ? ClipRRect( - borderRadius: BorderRadius.circular(12), + borderRadius: BorderRadius.circular(30), child: AspectRatio( aspectRatio: _videoController .value @@ -266,84 +273,71 @@ class _ChatScreenState extends State { ), ), ), - const SizedBox(height: 40), + const SizedBox(height: 16), // 캐릭터 정보 + 설명 문구 - Padding( - padding: const EdgeInsets.only( - left: 30, - bottom: 30, - right: 30, + // 1. 가장 바깥쪽 박스 추가 + Container( + margin: const EdgeInsets.fromLTRB(30, 0, 30, 0), + padding: const EdgeInsets.all(24), + decoration: BoxDecoration( + color: Colors.white.withOpacity(0.9), + borderRadius: BorderRadius.circular(30), + //border: Border.all(color: const Color(0xFFE0E0E0), width: 1), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), // 그림자 색상 (투명도 조절) + blurRadius: 10, // 그림자가 퍼지는 정도 + offset: const Offset(0, 4), // 그림자의 위치 (x, y) - 아래쪽으로 살짝 그림자 + ), + ], ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - // 푸미 정보 Row( children: [ Container( width: 48, height: 48, decoration: BoxDecoration( - color: Color(0xFFC8E6C9), - // ← 연한 초록 배경 추가 - borderRadius: BorderRadius.circular( - 24, - ), + color: const Color(0xFFC8E6C9), + borderRadius: BorderRadius.circular(24), ), child: ClipRRect( - borderRadius: BorderRadius.circular( - 24, - ), - child: Image.asset( - 'assets/images/profile.png', - fit: BoxFit.cover, - ), + borderRadius: BorderRadius.circular(24), + child: Image.asset('assets/images/profile.png', fit: BoxFit.cover), ), ), const SizedBox(width: 12), - Column( - crossAxisAlignment: - CrossAxisAlignment.start, + const Column( + crossAxisAlignment: CrossAxisAlignment.start, children: [ - const Text( - '푸미', - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.w600, - color: Color(0xFF212121), - ), - ), - Text( - '스마트가든 AI 가이드', - style: TextStyle( - fontSize: 14, - color: Color(0xFF757575), - ), - ), + Text('푸미', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600, color: Color(0xFF212121))), + Text('스마트가든 AI 가이드', style: TextStyle(fontSize: 14, color: Color(0xFF757575))), ], ), ], ), - const SizedBox(height: 16), - // 설명 문구 (반응형) + const SizedBox(height: 20), + Container( - width: double.infinity, // ← 추가: 양쪽 꽉차게 + width: double.infinity, padding: const EdgeInsets.all(16), decoration: BoxDecoration( - color: Color(0xFFF1F8E9), - borderRadius: BorderRadius.circular(8), - border: Border.all( - color: Color(0xFFC8E6C9), - width: 1, - ), + color: const Color(0xFFF1F8E9), + borderRadius: BorderRadius.circular(12), + //border: Border.all(color: const Color(0xFFC8E6C9), width: 1), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.12), // 그림자 색상 및 투명도 + blurRadius: 15, // 그림자가 퍼지는 정도 (숫자가 클수록 부드러움) + offset: const Offset(0, 5), // 그림자 위치 (x: 가로, y: 세로) + ), + ], ), child: const Text( '안녕하세요!\n스마트가든의 식물들이 건강하게 자랄 수 있도록 도와드릴게요.\n궁금한 점을 언제든 물어보세요!', - style: TextStyle( - fontSize: 13, - color: Color(0xFF558B2F), - height: 1.6, - ), + style: TextStyle(fontSize: 14, color: Colors.black, height: 1.6), ), ), ], @@ -353,18 +347,25 @@ class _ChatScreenState extends State { ), ), ), - // 우측 채팅 영역 (40%) + // 우측 채팅 영역 (50%) Expanded( - flex: 4, + flex: 5, child: Container( - margin: const EdgeInsets.all(20), + margin: const EdgeInsets.all(50), decoration: BoxDecoration( - color: Color(0xFFFAFAFA), - borderRadius: BorderRadius.circular(16), - border: Border.all( - color: Color(0xFFE0E0E0), - width: 1, - ), + color: Color(0xFFfbfdf8), + borderRadius: BorderRadius.circular(30), + // border: Border.all( + // color: Color(0xFFE0E0E0), + // width: 1, + // ), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), // 그림자 색상 (투명도 조절) + blurRadius: 10, // 그림자가 퍼지는 정도 + offset: const Offset(0, 0), // 그림자 위치 (x: 가로, y: 세로) + ), + ], ), child: Column( children: [ @@ -398,26 +399,55 @@ class _ChatScreenState extends State { margin: const EdgeInsets.symmetric( horizontal: 16, ), + // decoration: BoxDecoration( + // image: DecorationImage( + // image: AssetImage( + // 'assets/images/chat_img.png', + // ), + // // ← 배경 이미지 추가 + // fit: BoxFit.cover, + // colorFilter: ColorFilter.mode( + // Colors.white.withOpacity(0.9), + // // 채팅 배경 이미지 투명도 조정 + // BlendMode.lighten, + // ), + // ), + // color: Colors.white.withOpacity(0.5), + // // 채팅창 투명도 + // borderRadius: BorderRadius.circular(30), + // border: Border.all( + // color: Color(0xFFE0E0E0), + // width: 0.5, + // ), + // boxShadow: [ + // BoxShadow( + // color: Colors.black.withOpacity(0.8), // 그림자 색상 (투명도 조절) + // blurRadius: 10, // 그림자가 퍼지는 정도 + // offset: const Offset(0, 0), // 그림자 위치 (x: 가로, y: 세로) + // ), + // ], + // ), decoration: BoxDecoration( + // 배경 이미지 설정 image: DecorationImage( - image: AssetImage( - 'assets/images/chat_img.png', - ), - // ← 배경 이미지 추가 + image: AssetImage('assets/images/chat_img.png'), fit: BoxFit.cover, colorFilter: ColorFilter.mode( - Colors.white.withOpacity(0.9), - // 채팅 배경 이미지 투명도 조정 + Colors.white.withOpacity(0.9), // 이미지 투명도 BlendMode.lighten, ), ), - color: Colors.white.withOpacity(0.5), - // 채팅창 투명도 - borderRadius: BorderRadius.circular(8), - border: Border.all( - color: Color(0xFFE0E0E0), - width: 0.5, - ), + borderRadius: BorderRadius.circular(30), + // 테두리(border) 제거됨 + + // 부드러운 그림자 추가 + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), // 아주 연한 그림자 + blurRadius: 15, // 부드럽게 퍼짐 + offset: const Offset(0, 5), // 아래쪽으로 은은하게 + ), + ], ), child: ListView.builder( controller: _scrollController, @@ -435,8 +465,8 @@ class _ChatScreenState extends State { margin: const EdgeInsets.fromLTRB(16, 12, 16, 12), padding: const EdgeInsets.all(12), decoration: BoxDecoration( - color: Color(0xFFC8E6C9).withOpacity(0.3), // 배경 - borderRadius: BorderRadius.circular(12), + color: Color(0xFFecf6df).withOpacity(0.8), // 배경 + borderRadius: BorderRadius.circular(22), ), child: Row( children: [ @@ -446,12 +476,7 @@ class _ChatScreenState extends State { decoration: BoxDecoration( color: Colors.white, // ← 흰색 borderRadius: BorderRadius.circular(25), - border: Border.all( - color: Color( - 0xFF1976D2, - ).withOpacity(0.2), - width: 0.5, - ), + ), child: Material( color: Colors.transparent, @@ -493,7 +518,7 @@ class _ChatScreenState extends State { style: TextStyle( fontSize: 18, fontWeight: FontWeight.w600, - color: Color(0xFF000000), + color: Colors.black, ), ), ], @@ -510,12 +535,7 @@ class _ChatScreenState extends State { decoration: BoxDecoration( color: Colors.white, // ← 흰색 borderRadius: BorderRadius.circular(25), - border: Border.all( - color: Color( - 0xFF388E3C, - ).withOpacity(0.2), - width: 0.5, - ), + ), child: Material( color: Colors.transparent, @@ -574,12 +594,6 @@ class _ChatScreenState extends State { decoration: BoxDecoration( color: Colors.white, // ← 흰색 borderRadius: BorderRadius.circular(25), - border: Border.all( - color: Color( - 0xFFFFA000, - ).withOpacity(0.2), - width: 0.5, - ), ), child: Material( color: Colors.transparent, @@ -644,11 +658,18 @@ class _ChatScreenState extends State { child: Container( decoration: BoxDecoration( color: Colors.white, - borderRadius: BorderRadius.circular(8), - border: Border.all( - color: Color(0xFFE0E0E0), - width: 0.5, - ), + borderRadius: BorderRadius.circular(22), + // border: Border.all( + // color: Color(0xFFE0E0E0), + // width: 0.5, + // ), + boxShadow: [ + BoxShadow( + color: Colors.black.withOpacity(0.1), // 그림자 색상(연한 검정) + blurRadius: 8, // 그림자가 퍼지는 정도 + offset: const Offset(0, 2), // 그림자 위치 (x: 0, y: 2) - 아래로 살짝 + ), + ], ), child: TextField( controller: _textController, @@ -660,14 +681,14 @@ class _ChatScreenState extends State { decoration: InputDecoration( hintText: '메시지를 입력하세요...', hintStyle: TextStyle( - fontSize: 20, + fontSize: 16, color: Color(0xFF9E9E9E), ), border: InputBorder.none, contentPadding: const EdgeInsets.symmetric( horizontal: 16, - vertical: 12, + vertical: 22, ), ), style: const TextStyle(fontSize: 20), @@ -678,28 +699,23 @@ class _ChatScreenState extends State { const SizedBox(width: 12), // 전송 버튼 SizedBox( - height: 48, + height: 60, width: 60, child: ElevatedButton( - onPressed: () { - _sendMessage(_textController.text); - }, + onPressed: () => _sendMessage(_textController.text), style: ElevatedButton.styleFrom( - backgroundColor: Color(0xFF81C784), + backgroundColor: const Color(0xFF81C784), + elevation: 6, // 그림자 깊이 + shadowColor: Colors.black.withOpacity(0.4), // 그림자 색상 shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular( - 8, - ), + borderRadius: BorderRadius.circular(100), ), padding: EdgeInsets.zero, ), - child: const Text( - '전송', - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w600, - color: Colors.white, - ), + child: ImageIcon( + AssetImage('assets/images/send.png'), + color: Colors.white, + size: 28, ), ), ), @@ -792,7 +808,7 @@ class _ChatBubble extends StatelessWidget { ), decoration: BoxDecoration( color: message.isUser - ? Color(0xFFE8F5E9) + ? Color(0xFFecf6df) : Colors.white, borderRadius: BorderRadius.circular(8), boxShadow: [ @@ -808,8 +824,8 @@ class _ChatBubble extends StatelessWidget { style: TextStyle( fontSize: 20, color: message.isUser - ? Color(0xFF000000) - : Color(0xFF424242), + ? Colors.black + : Colors.black, height: 1.4, ), ), diff --git a/pubspec.yaml b/pubspec.yaml index 12a15bf..d7dddf8 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -83,6 +83,8 @@ flutter: - assets/images/background1.png - assets/images/background2.png - assets/images/background3.png + - assets/images/send.png + - assets/images/layer_img.png - assets/images/layer_img1.png diff --git a/web/favicon.png b/web/favicon.png deleted file mode 100644 index 8aaa46a..0000000 Binary files a/web/favicon.png and /dev/null differ diff --git a/web/icons/favicon.png b/web/icons/favicon.png new file mode 100644 index 0000000..0ea16c8 Binary files /dev/null and b/web/icons/favicon.png differ diff --git a/web/index.html b/web/index.html index d1de1f7..42cc2f8 100644 --- a/web/index.html +++ b/web/index.html @@ -27,7 +27,7 @@ - + smartgarden_chat