dash_chat 1.0.14

The most complete Chat UI for flutter inspired by react-native-gifted-chat.

example/lib/main.dart

import 'dart:async';
import 'dart:io';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:intl/intl.dart';
import 'package:dash_chat/dash_chat.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<DashChatState> _chatViewKey = GlobalKey<DashChatState>();

  final ChatUser user = ChatUser(
    name: "Fayeed",
    uid: "123456789",
    avatar: "https://www.wrappixel.com/ampleadmin/assets/images/users/4.jpg",
  );

  final ChatUser otherUser = ChatUser(
    name: "Mrfatty",
    uid: "25649654",
  );

  List<ChatMessage> messages = List<ChatMessage>();
  var m = List<ChatMessage>();

  var i = 0;

  @override
  void initState() {
    super.initState();

    messages.addAll([
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
      ChatMessage(text: "hello", user: user, createdAt: DateTime.now()),
    ]);
  }

  void systemMessage() {
    Timer(Duration(milliseconds: 300), () {
      if (i < 6) {
        setState(() {
          messages = [...messages, m[i]];
        });
        i++;
      }
      Timer(Duration(milliseconds: 300), () {
        _chatViewKey.currentState.scrollController
          ..animateTo(
            _chatViewKey.currentState.scrollController.position.maxScrollExtent,
            curve: Curves.easeOut,
            duration: const Duration(milliseconds: 300),
          );
      });
    });
  }

  void onSend(ChatMessage message) {
    print(message.toJson());
    // var documentReference = Firestore.instance
    //     .collection('messages')
    //     .document(DateTime.now().millisecondsSinceEpoch.toString());

    // Firestore.instance.runTransaction((transaction) async {
    //   await transaction.set(
    //     documentReference,
    //     message.toJson(),
    //   );
    // });
    setState(() {
      messages = [...messages, message];
      print(messages.length);
    });

    if (i == 0) {
      systemMessage();
      Timer(Duration(milliseconds: 600), () {
        systemMessage();
      });
    } else {
      systemMessage();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(),
      body: StreamBuilder(
        stream: Firestore.instance.collection('messages').snapshots(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Center(
              child: CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(
                  Theme.of(context).primaryColor,
                ),
              ),
            );
          } else {
            List<DocumentSnapshot> items = snapshot.data.documents;
            // var messages =
            //     items.map((i) => ChatMessage.fromJson(i.data)).toList();
            return DashChat(
              height: MediaQuery.of(context).size.height - 60.0,
              key: _chatViewKey,
              inverted: false,
              onSend: onSend,
              user: user,
              inputDecoration:
                  InputDecoration.collapsed(hintText: "Add message here..."),
              dateFormat: DateFormat('yyyy-MMM-dd'),
              timeFormat: DateFormat('HH:mm'),
              messages: messages,
              showUserAvatar: true,
              showAvatarForEveryMessage: false,
              scrollToBottom: true,
              // inputFooterBuilder: () {
              //   return Column(
              //     children: [
              //       Text('asd'),
              //       Text('asd'),
              //       Text('asd'),
              //       Text('asd'),
              //       Text('asd'),
              //       Text('asd'),
              //     ],
              //   );
              // },
              onPressAvatar: (ChatUser user) {
                print("OnPressAvatar: ${user.name}");
              },
              onLongPressAvatar: (ChatUser user) {
                print("OnLongPressAvatar: ${user.name}");
              },
              inputMaxLines: 5,
              alwaysShowSend: true,
              inputTextStyle: TextStyle(fontSize: 16.0),
              inputContainerStyle: BoxDecoration(
                border: Border.all(width: 0.0),
                color: Colors.white,
              ),
              onQuickReply: (Reply reply) {
                setState(() {
                  messages.add(ChatMessage(
                      text: reply.value,
                      createdAt: DateTime.now(),
                      user: user));

                  messages = [...messages];
                });

                Timer(Duration(milliseconds: 300), () {
                  _chatViewKey.currentState.scrollController
                    ..animateTo(
                      _chatViewKey.currentState.scrollController.position
                          .maxScrollExtent,
                      curve: Curves.easeOut,
                      duration: const Duration(milliseconds: 300),
                    );

                  if (i == 0) {
                    systemMessage();
                    Timer(Duration(milliseconds: 600), () {
                      systemMessage();
                    });
                  } else {
                    systemMessage();
                  }
                });
              },
              onLoadEarlier: () {
                print("laoding...");
              },
              shouldShowLoadEarlier: false,
              showTraillingBeforeSend: true,
              trailing: <Widget>[
                IconButton(
                  icon: Icon(Icons.photo),
                  onPressed: () async {
                    File result = await ImagePicker.pickImage(
                      source: ImageSource.gallery,
                      imageQuality: 80,
                      maxHeight: 400,
                      maxWidth: 400,
                    );

                    if (result != null) {
                      final StorageReference storageRef =
                          FirebaseStorage.instance.ref().child("chat_images");

                      StorageUploadTask uploadTask = storageRef.putFile(
                        result,
                        StorageMetadata(
                          contentType: 'image/jpg',
                        ),
                      );
                      StorageTaskSnapshot download =
                          await uploadTask.onComplete;

                      String url = await download.ref.getDownloadURL();

                      ChatMessage message =
                          ChatMessage(text: "", user: user, image: url);

                      var documentReference = Firestore.instance
                          .collection('messages')
                          .document(
                              DateTime.now().millisecondsSinceEpoch.toString());

                      Firestore.instance.runTransaction((transaction) async {
                        await transaction.set(
                          documentReference,
                          message.toJson(),
                        );
                      });
                    }
                  },
                )
              ],
            );
          }
        },
      ),
    );
  }
}