Flutter Custom Chat Bubble

Be sure to retweet brother for more Flutter posts at ~~~~

Ducafecat WeChat group

B stationhttps://space.bilibili.com/40…

The original

https://medium.com/flutterdev…

code

https://github.com/flutter-de…

reference

https://pub.flutter-io.cn/pac…
https://dart.dev/guides/langu…

The body of the

The Conversation Chat app shows messages in the chat rising against a strongly shaded background. The slope of a chat bubble displayed by a modern chat application depends on the position of the bubble on the screen. In the Flutter application, sometimes you need to use a chat bubble. However, it is not good to use a library for a particularly trivial task.

In this blog, we’ll explore the custom chat bubble flutter. We’ll 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.

Configuration of assets

Step 1: Add Assets

Add assets to the pubspec.yaml file.

assets:
  - assets/images/

Step 2: Run in the root directory of the applicationflutter packages get 。

How to implement the code in the dart file:

You need to implement it separately in your code:

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

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

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 called send_message_screen.dart in the lib folder.

First, we’ll create a final string message for the constructor.

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

In the build method, we’ll return Padding(). Internally, we’ll add the Row() widget. In this widget, we will add MainAxisAlignment and add the MessageTextGroup. We will define the following code.

Return PADDING.ONLY (Right: 18.0, Left: 50, Top: 15, Bott: 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 spindle alignment is over, and starting cross-axis alignment. Inside the children, we will add decorative boxes to the Conatiner and add color, border radius. Its child property, we’re going to add a mutable message text. We’re going to add customPaint (), and we’re going to use the painter class above which is customShape with color.

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 in the lib folder called received_message_screen.dart.

Similarly, we can now create a screen of received messages. We just need to flip the custom shape and put it at the beginning, not at the end. We will use the transform widget to flip the custom shape widget. In the transformation widget, we will add alignment as the center and convert 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 called home_page.dart in the lib folder.

In the body, we’ll add a Container () widget. Inside, add a decorative box and add an image. It is a child property, and we can add both send and receive message screens to the ListView ().

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 as shown in the screenshot below.

The 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 this article, I have explained the basic structure of a custom chat bubble, and you can modify this code as you choose. This is a small introduction to custom chat bubble user interaction from my side, which works using Flutter.

I hope this blog will provide you with full information on trying to customize chat bubbles in your Flutter project. We will work for a demo program to customize chat bubbles using any third party libraries in your Flutter application. So give it a try.

The elder brother of the © cat

https://ducafecat.tech/

https://github.com/ducafecat

The issue of

Open source

GetX Quick Start

https://github.com/ducafecat/…

News Client

https://github.com/ducafecat/…

Strapi manual translation

https://getstrapi.cn

WeChat discussion group Ducafecat

A series of collections

The translation

https://ducafecat.tech/catego…