使用flutter写一个聊天室,不需要说其他的话,展示代码
时间: 2023-09-24 19:06:31 浏览: 85
### 回答1:
好的,以下是使用 Flutter 编写的简单聊天室的代码示例:
import 'package:flutter/material.dart';
void main() => runApp(ChatApp());
class ChatApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Chat',
home: ChatScreen(),
);
}
}
class ChatScreen extends StatefulWidget {
@override
_ChatScreenState createState() => _ChatScreenState();
}
class _ChatScreenState extends State<ChatScreen> {
final List<ChatMessage> _messages = <ChatMessage>[];
final TextEditingController _textController = TextEditingController();
void _handleSubmitted(String text) {
_textController.clear();
ChatMessage message = ChatMessage(
text: text,
);
setState(() {
_messages.insert(, message);
});
}
Widget _buildTextComposer() {
return Container(
margin: EdgeInsets.symmetric(horizontal: 8.),
child: Row(
children: <Widget>[
Flexible(
child: TextField(
controller: _textController,
onSubmitted: _handleSubmitted,
decoration: InputDecoration.collapsed(
hintText: 'Send a message',
),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 4.),
child: IconButton(
icon: Icon(Icons.send),
onPressed: () => _handleSubmitted(_textController.text),
),
),
],
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Chat'),
),
body: Column(
children: <Widget>[
Flexible(
child: ListView.builder(
padding: EdgeInsets.all(8.),
reverse: true,
itemBuilder: (_, int index) => _messages[index],
itemCount: _messages.length,
),
),
Divider(height: 1.),
Container(
decoration: BoxDecoration(
color: Theme.of(context).cardColor,
),
child: _buildTextComposer(),
),
],
),
);
}
}
class ChatMessage extends StatelessWidget {
final String text;
ChatMessage({this.text});
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10.),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 16.),
child: CircleAvatar(
child: Text('User'),
),
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('User', style: Theme.of(context).textTheme.subhead),
Container(
margin: EdgeInsets.only(top: 5.),
child: Text(text),
),
],
),
),
],
),
);
}
}
### 回答2:
import 'package:flutter/material.dart';
void main() => runApp(ChatApp());
class ChatApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Chat Room',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ChatRoom(),
debugShowCheckedModeBanner: false,
);
}
}
class ChatRoom extends StatefulWidget {
@override
_ChatRoomState createState() => _ChatRoomState();
}
class _ChatRoomState extends State<ChatRoom> {
List<String> messages = [];
TextEditingController textEditingController = TextEditingController();
void _sendMessage() {
String message = textEditingController.text.trim();
if (message.isNotEmpty) {
setState(() {
messages.add(message);
textEditingController.clear();
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Chat Room'),
),
body: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
itemCount: messages.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(messages[index]),
);
},
),
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: Row(
children: <Widget>[
Expanded(
child: TextField(
controller: textEditingController,
decoration: InputDecoration(
hintText: 'Enter message',
),
),
),
FlatButton(
onPressed: _sendMessage,
child: Text('Send'),
color: Colors.blue,
textColor: Colors.white,
),
],
),
),
],
),
);
}
}
阅读全文