jieun/smartgarden_chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

디자인 2차 초안

Browse Source
This commit is contained in:
KIMGYEONGRAN
2026-06-23 11:14:41 +09:00
parent 989910a3ff
commit 8465be1d06
6 changed files with 156 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/send.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

280
lib/screens/chat_screen.dart
View File

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

2
pubspec.yaml
View File

@@ -83,6 +83,8 @@ flutter:
- assets/images/background1.png - assets/images/background1.png
- assets/images/background2.png - assets/images/background2.png
- assets/images/background3.png - assets/images/background3.png
- assets/images/send.png
- assets/images/layer_img.png - assets/images/layer_img.png
- assets/images/layer_img1.png - assets/images/layer_img1.png

BIN
web/favicon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 917 B

BIN
web/icons/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

2
web/index.html
View File

@@ -27,7 +27,7 @@
<link rel="apple-touch-icon" href="icons/Icon-192.png"> <link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon --> <!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/> <link rel="icon" type="image/png" href="icons/favicon.png"/>
<title>smartgarden_chat</title> <title>smartgarden_chat</title>
<link rel="manifest" href="manifest.json"> <link rel="manifest" href="manifest.json">