Flutter custom chat bubbles

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

Ducafecat WeChat group

B stationspace.bilibili.com/404904528

The original

Medium.com/flutterdevs…

code

Github.com/flutter-dev…

reference

Pub. Flutter – IO. Cn/packages/ge…
The dart. Dev/guides/lang…

The body of the

The conversation chat application shows messages in a chat rising against a strongly shaded background. The slope of the chat bubble displayed by modern chat applications depends on the bubble’s position on the screen. Chat bubbles are sometimes used in flutter applications. However, it is not good to use a library for a particularly trivial task.

In this blog, we will explore the 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 simplest 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/
Copy the code

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

How to implement code in the DART file:

You need to implement it separately in your code:

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

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

import 'package:flutter/material.dart';

class CustomShape extends CustomPainter {
  final Color bgColor;

  CustomShape(this.bgColor);

  @override
  void paint(Canvas canvas, Size size) {
    varpaint = 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; }}Copy the code

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

First, we will create a constructor’s final string message.

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

In the build method, we return the Padding(). Internally, we’ll add the Row() widget. In this widget, we will add mainAxisAlignment and add a 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,
    ],
  ),
);
Copy the code

We’ll define messageTextGroup in more detail:

We will create a final messageTextGroup equal Flexible () widget. In this widget, we will add the Row () widget. Internally, adding spindle alignment is the end and starting cross-axis alignment. Inside the children, we will add Conatiner to the decorative box and add color to the border radius. To its child property, we will add a mutable message text. We will add CustomPaint () and we will use the painter class above as a 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]),]));Copy the code

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

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 the end. We will use the transform widget to flip the custom shape widget. In the transformation widget, we center the addition 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(() [() [() [() [()Copy the code

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

In the body, we will add a Container () widget. Inside, add decorative boxes and add images. It is a child property, and we can add both send and receive message screens in 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"),,),),Copy the code

When we run the application, we should get screen output like 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"[[(), [(), [(), [(); }}Copy the code

Conclusion:

In this article, I’ve explained the basic structure of custom chat bubbles, 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 sufficient information on trying to customize chat bubbles in your Flutter project. We will work with custom chat bubbles for the demo using any third party library in your Flutter application. So give it a try.

The elder brother of the © cat

ducafecat.tech/

github.com/ducafecat

The issue of

Open source

GetX Quick Start

Github.com/ducafecat/g…

News client

Github.com/ducafecat/f…

Strapi manual translation

getstrapi.cn

Wechat discussion group Ducafecat

A series of collections

The translation

Ducafecat. Tech/categories /…