디자인 2차 초안
This commit is contained in:
KIMGYEONGRAN
@@ -139,32 +139,32 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||
),
|
||||
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<ChatScreen> {
|
||||
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<ChatScreen> {
|
||||
),
|
||||
),
|
||||
),
|
||||
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<ChatScreen> {
|
||||
),
|
||||
),
|
||||
),
|
||||
// 우측 채팅 영역 (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<ChatScreen> {
|
||||
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<ChatScreen> {
|
||||
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<ChatScreen> {
|
||||
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<ChatScreen> {
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Color(0xFF000000),
|
||||
color: Colors.black,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -510,12 +535,7 @@ class _ChatScreenState extends State<ChatScreen> {
|
||||
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<ChatScreen> {
|
||||
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<ChatScreen> {
|
||||
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<ChatScreen> {
|
||||
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<ChatScreen> {
|
||||
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,
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user