코딩강의/chat_app(플러터-유데미)
286. Adding ChatMessages & Input Widgets
김마드
2023. 12. 10. 17:06
1. 로그인 후, 채팅 화면을 꾸며보자.
-chat.dart
import 'package:chat_app/widgets/chat_messages.dart';
import 'package:chat_app/widgets/new_message.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
class ChatScreen extends StatelessWidget {
const ChatScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('FlutterChat'),
actions: [
IconButton(
onPressed: () {
FirebaseAuth.instance.signOut();
},
icon: Icon(
Icons.exit_to_app,
color: Theme.of(context).colorScheme.primary,
),
),
],
),
body: const Column(
children: [
Expanded(
child: ChatMessages(),
),
NewMessage(),
],
),
);
}
}
1) 마지막 챗 메시지와 뉴메시지 위젯을 만들어주었다.
- chat_messages.dart
import 'package:flutter/material.dart';
class ChatMessages extends StatelessWidget {
const ChatMessages({super.key});
@override
Widget build(BuildContext context) {
return const Center(
child: Text('No messages found.'),
);
}
}
- new_messages.dart
import 'package:flutter/material.dart';
class NewMessage extends StatefulWidget {
const NewMessage({super.key});
@override
State<NewMessage> createState() {
return _NewMessageState();
}
}
class _NewMessageState extends State<NewMessage> {
final _messageController = TextEditingController();
@override
void dispose() {
_messageController.dispose();
super.dispose();
}
void _submitMessage() {
final enteredMessage = _messageController.text;
if (enteredMessage.trim().isEmpty) {
return;
}
// send to Firebase
_messageController.clear();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 15, right: 1, bottom: 14),
child: Row(
children: [
Expanded(
child: TextField(
controller: _messageController,
textCapitalization: TextCapitalization.sentences,
autocorrect: true,
enableSuggestions: true,
decoration: const InputDecoration(labelText: 'Send a message...'),
),
),
IconButton(
color: Theme.of(context).colorScheme.primary,
icon: const Icon(
Icons.send,
),
onPressed: _submitMessage,
),
],
),
);
}
}
1) 채팅 입력창 부분
- 결과 화면
