Flutter custom chat bubble

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat group ducafecat

b station https://space.bilibili.com/404904528

original

https://medium.com/flutterdevs/custom-chat-bubble-in-flutter-6aa7d24fc683

Code

https://github.com/flutter-devs/flutter_custom_chat_bubble

reference

text

The conversation chat application shows that the messages in the chat will rise against a strong shadow background. The slope of the chat bubble displayed by modern chat applications depends on the position of the bubble on the screen. In flutter applications, sometimes you need to use chat bubbles. However, it is not good to use a library for a particularly trivial task.

In this blog, we will explore custom chat bubble flutter. We will see how to implement a custom chat bubble demo program, and how to make a custom chat bubble the easiest without using any third-party libraries in your flutter application.

Configure assets

Step 1: add assets

Add assets to the pubspec.yaml file.

assets:
  - assets/images/

flutter packages get in the root directory of the application.

How to implement the code in the dart file:

You need to implement it in your code separately:

Create a new dart file custom_shape.dart in the lib folder.

First, create a custom shape to customize the CustomPainter class. This will be used to draw a custom shape at the end of the chat bubble. The user can add any color in the custom shape.

import 'package:flutter/material.dart';

class CustomShape extends CustomPainter {
  final Color bgColor;

  CustomShape(this.bgColor);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()..color = bgColor;

    var path = Path();
    path.lineTo(-5, 0);
    path.lineTo(0, 10);
    path.lineTo(5, 0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Create a new dart file send_message_screen.dart in the lib folder.

First, we will create the final string message of a constructor.

final String message;
const SentMessageScreen({
  Key key,
  @required this.message,
}) : super(key: key);

In the build method, we will return Padding(). Internally, we will add the Row() widget. In this widget, we will add mainAxisAlignment and add messageTextGroup. We will define the following code.

return Padding(
  padding: EdgeInsets.only(right: 18.0, left: 50, top: 15, bottom: 5),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      SizedBox(height: 30),
      messageTextGroup,
    ],
  ),
);

We will define the messageTextGroup in depth:

We will create a final messageTextGroup equal to Flexible () widget. In this widget, we will add the Row () widget. Internally, adding the main axis alignment is the end, and starts the cross-axis alignment. Inside the child, we will add the Conatiner of the decorative frame and add the color and the radius of the frame. For its sub-attributes, we will add a variable message text. We will add CustomPaint () and we will use the painter class above which is a Colored CustomShape.

final messageTextGroup = Flexible(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Flexible(
          child: Container(
            padding: EdgeInsets.all(14),
            decoration: BoxDecoration(
              color: Colors.cyan[900],
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(18),
                bottomLeft: Radius.circular(18),
                bottomRight: Radius.circular(18),
              ),
            ),
            child: Text(
              message,
              style: TextStyle(color: Colors.white, fontSize: 14),
            ),
          ),
        ),
        CustomPaint(painter: CustomShape(Colors.cyan[900])),
      ],
    ));

Create a new dart file received_message_screen.dart in the lib folder.

Similarly, we can now create a received message screen. We just need to flip the customized shape and put it at the beginning, not the end. We will use the conversion widget to flip the custom shape widget. In the conversion widget, we will add alignment as the center and convert it to Matrix4.rotationY(math. pi) .

final messageTextGroup = Flexible(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Transform(
          alignment: Alignment.center,
          transform: Matrix4.rotationY(math.pi),
          child: CustomPaint(
            painter: CustomShape(Colors.grey[300]),
          ),
        ),
        Flexible(
          child: Container(
            padding: EdgeInsets.all(14),
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.only(
                topRight: Radius.circular(18),
                bottomLeft: Radius.circular(18),
                bottomRight: Radius.circular(18),
              ),
            ),
            child: Text(
              message,
              style: TextStyle(color: Colors.black, fontSize: 14),
            ),
          ),
        ),
      ],
    ));

Create a new dart file home_page.dart in the lib folder.

In the body, we will add a Container () widget. Inside, add decorative frames and add images. It is a sub-attribute, we can add sending and receiving message screens in ListView () at the same time.

Container(
  decoration: BoxDecoration(
      image: DecorationImage(
          image: AssetImage("assets/bg_chat.jpg"),
          fit: BoxFit.cover)),
  child: ListView(
    children: [
      SentMessageScreen(message: "Hello"),
      ReceivedMessageScreen(message: "Hi, how are you"),
      SentMessageScreen(message: "I am great how are you doing"),
      ReceivedMessageScreen(message: "I am also fine"),
      SentMessageScreen(message: "Can we meet tomorrow?"),
      ReceivedMessageScreen(message: "Yes, of course we will meet tomorrow"),
    ],
  ),
),

When we run the application, we should get the output of the screen, just like the screenshot below.

Complete code

import 'package:flutter/material.dart';
import 'package:flutter_custom_chat_bubble/received_message_screen.dart';
import 'package:flutter_custom_chat_bubble/send_messsage_screen.dart';

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

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.cyan[900],
        automaticallyImplyLeading: false,
        title: Text(widget.title),
      ),
      body: Container(
        decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage("assets/bg_chat.jpg"),
                fit: BoxFit.cover)),
        child: ListView(
          children: [
            SentMessageScreen(message: "Hello"),
            ReceivedMessageScreen(message: "Hi, how are you"),
            SentMessageScreen(message: "I am great how are you doing"),
            ReceivedMessageScreen(message: "I am also fine"),
            SentMessageScreen(message: "Can we meet tomorrow?"),
            ReceivedMessageScreen(message: "Yes, of course we will meet tomorrow"),
          ],
        ),
      ),
    );
  }
}

Conclusion:

In the article, I have explained the basic structure of custom chat bubble, you can modify this code according to your choice. This is a small introduction to custom chat bubble user interaction from my side, it works using flutter.

I hope this blog will provide you with full information about trying to customize chat bubbles in your flutter project. We will use any third-party library in your flutter application to customize the chat bubble for the working demo program. So please try it.

https://ducafecat.tech/

https://github.com/ducafecat