Flutter即时通讯插件firebase_chat的使用

Firebase Chat🔥💬

⛏️ 开始使用

要开始使用 Firebase，请参阅文档：https://firebase.flutter.dev/docs/overview

在项目中添加 Firebase Chat 插件，按照安装页面的说明进行操作并开始使用：

import 'package:firebase_chat/firebase_chat.dart';

📱 示例

扩展 StatefulWidget

class ChatPage extends BaseChat {
  ChatPage({
    required ChatEntity entity,
  }) : super(entity);

  [@override](/user/override)
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends BaseChatState<ChatPage> {
  ...
}

覆盖方法和属性

您可以查看示例文件：https://pub.dev/packages/firebase_chat/example

Widget inputBuilder(BuildContext context, ChatInputState state);
Future editAndUpload(Uint8List data);
Future getImage();

Widget get emptyWidget;
Widget get errorWidget;
Widget get loadingWidget;
Color get primaryColor;
Color get secondaryColor;

模型 📦

Peer User 👨

字段

• id - 用户ID
• image - 用户头像URL
• name - 用户显示名称

构造函数

• PeerUser({this.id, this.image, this.name})
• PeerUser.fromSnapshot(DocumentSnapshot<Map<String, dynamic>> snap)

Chat Entity 📩

字段

• mainUser - 登录用户
• peers - 用户映射 <用户ID, PeerUser>
• lastMessage - 最后发送的消息
• title - 聊天名称（可以为空）

许可证 ⚖️

• MIT

问题与反馈 💭

如果您有任何功能建议或遇到问题，请随时在 https://github.com/tedcrimson/firebase_chat/issues 提交 issue。

示例代码

以下是完整的示例代码，展示如何使用 firebase_chat 插件：

import 'package:firebase_chat/firebase_chat.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/services.dart';

import 'dart:typed_data';
import 'package:draw_page/draw_page.dart';
import 'package:flutter/foundation.dart';
import 'package:camera_capture/camera_capture.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();
  await SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Firebase Chat Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Map<String, PeerUser> peers = {
    'myId': PeerUser(documentId: 'myId', name: 'Grievous'),
    'otherId': PeerUser(
        documentId: 'otherId',
        name: 'Kenobi',
        image:
            'https://cdn.vox-cdn.com/thumbor/SRwHbaTMxPr4f8EJdfai_UR2y34=/1400x1050/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/6434955/obi-wan.0.jpg'),
  };

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ChatPage(
          ChatEntity(
            mainUser: peers['myId'],
            peers: peers,
            path: 'Chats/chatId',
            title: peers['otherId'].name, // 也可以设置为群组名称
          ),
        ));
  }
}

class ChatPage extends BaseChat {
  ChatPage(ChatEntity entity) : super(entity);

  [@override](/user/override)
  _ChatPageState createState() => _ChatPageState();
}

class _ChatPageState extends BaseChatState<ChatPage> {
  [@override](/user/override)
  Color get primaryColor => Colors.blue;

  [@override](/user/override)
  Color get secondaryColor => Colors.blue;

  [@override](/user/override)
  Widget get loadingWidget => Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: CircularProgressIndicator(),
        ),
      );

  [@override](/user/override)
  Widget get emptyWidget => Center(
        child: Padding(
          padding: const EdgeInsets.all(40.0),
          child: Text("Welcome"),
        ),
      );

  [@override](/user/override)
  Widget errorWidget(String error) => Center(child: Text(error));

  [@override](/user/override)
  Future editAndUpload(Uint8List data) async {
    Uint8List edited = await Navigator.of(context).push<Uint8List>(
      MaterialPageRoute(builder: (BuildContext context) {
        return DrawPage(imageData: data, loadingWidget: loadingWidget);
      }),
    );
    sendImage(edited);
  }

  [@override](/user/override)
  Future getImage() async {
    List<Uint8List> images;
    images = await Navigator.of(context).push<List<Uint8List>>(
      MaterialPageRoute(builder: (BuildContext context) => CameraPage()),
    );
    if (images != null && images.length == 1) {
      Uint8List image = await Navigator.of(context).push<Uint8List>(
        MaterialPageRoute(builder: (BuildContext context) {
          return DrawPage(imageData: images[0], loadingWidget: loadingWidget);
        }),
      );
      if (image == null) return null;
      images = [image];
    }
    if (images != null) {
      for (var image in images) {
        await sendImage(image);
      }
    }
  }

  [@override](/user/override)
  Widget inputBuilder(BuildContext context, ChatInputState state) {
    return SafeArea(
      bottom: true,
      top: false,
      child: Container(
        color: Colors.white,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: <Widget>[
            Expanded(
              child: Container(
                padding: EdgeInsets.all(10),
                child: TextField(
                  onSubmitted: (text) {
                    if (text.isNotEmpty) sendMessage();
                  },
                  autofocus: false,
                  maxLines: null,
                  keyboardType: TextInputType.text,
                  style: TextStyle(fontSize: 20.0),
                  controller: textEditingController,
                  onChanged: inputChanged,
                  decoration: InputDecoration.collapsed(
                    hintText: "Type here",
                    hintStyle: TextStyle(color: Colors.grey),
                  ),
                ),
              ),
            ),
            if (state is InputEmptyState && !kIsWeb) // 不支持web
              Material(
                child: new Container(
                  child: new IconButton(
                    icon: new Icon(Icons.add_a_photo),
                    onPressed: () => getImage(),
                    color: primaryColor,
                    disabledColor: Colors.grey,
                  ),
                ),
                color: Colors.white,
              ),

            // 发送消息按钮
            Material(
              child: new Container(
                margin: new EdgeInsets.only(right: 4.0),
                child: new IconButton(
                  icon: new Icon(Icons.send),
                  onPressed: state is ReadyToSendState ? sendMessage : null,
                  color: primaryColor,
                  disabledColor: Colors.grey,
                ),
              ),
              color: Colors.white,
            ),
          ],
        ),
      ),
    );
  }
}