[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-frjkn3p5-1626132866799)( https://ducafecat.tech/2021/07/13/translation/custom-chat-bubble-in-flutter/2021-07-13-07-26-06.png )]
Old iron remember to forward, brother old fellow will show more Flutter good text ~ ~ ~
Wechat group ducafecat
Station b https://space.bilibili.com/404904528
original text
https://medium.com/flutterdevs/custom-chat-bubble-in-flutter-6aa7d24fc683
code
https://github.com/flutter-devs/flutter_custom_chat_bubble
reference resources
- https://pub.flutter-io.cn/packages/get#reactive-state-manager
- https://dart.dev/guides/language/extension-methods
text
[external link picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-ij3f5m0n-1626132866800)( https://ducafecat.tech/2021/07/13/translation/custom-chat-bubble-in-flutter/2021-07-13-07-13-02.png )]
The dialog chat application shows that 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 the fluent application, sometimes you need to use chat bubbles. However, it is not good to use a library for a particularly insignificant task.
In this blog, we will explore the custom chat bubble flutter. We'll see how to implement a demo of a custom chat bubble, and how to make a custom chat bubble the simplest without using any third-party libraries in your shuttle application.
Configure assets
- Step 1: add assets
Add assets to pubspec Yaml file.
assets: - assets/images/
- Step 2: run fluent packages get in the root directory of the application.
How to implement the code in dart file:
You need to implement it in your code:
Create a file named custom in the lib folder_ shape. New dart file for dart.
First, create a custom shape custom CustomPainter class. This will be used to draw custom shapes at the end of the chat bubble. You 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) {
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 file named send in the lib folder_ message_ screen. New dart file for dart.
First, we will create a constructor's final string message.
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 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 messageTextGroup in depth:
We will create a final messageTextGroup equal to the Flexible () widget. In this widget, we will add the Row () widget. Internally, adding spindle alignment is the end and cross axis alignment is started. In the children's interior, we will add the decorator of the frame and add color, frame radius. Its sub attribute, we will add a variable message text. We will add CustomPaint (), and the artist class we will use above 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 file named received in the lib folder_ message_ screen. New dart file for 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 the end. We will flip the custom shape widget using the transform widget. In the conversion 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 folder called home in the lib folder_ page. New dart file for dart.
In the body, we will add a Container () widget. Inside, add decorative boxes and images. It is a sub attribute. We can add the 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"),
],
),
),
When we run the application, we should get the output of the screen, just like the screenshot below.
[external chain picture transfer failed. The source station may have anti-theft chain mechanism. It is recommended to save the picture and upload it directly (img-y3tnlkzk-1626132866801)( https://ducafecat.tech/2021/07/13/translation/custom-chat-bubble-in-flutter/2021-07-13-07-19-48.png )]
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 custom chat bubbles. You can modify this code according to your choice. This is a small introduction to user interaction with custom chat bubbles. From my side, it works using fluent.
I hope this blog will provide you with full information about trying to customize chat bubbles in your shuttle project. We will customize chat bubbles for working demo programs using any third-party libraries in your shuttle application. So please try.
© Cat brother
https://ducafecat.tech/
https://github.com/ducafecat
Previous period
Open Source
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
News client
https://github.com/ducafecat/flutter_learn_news
Translation of strapi manual
https://getstrapi.cn
Wechat discussion group ducafecat
Series collection
translation
https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/
Open source project
https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/
Basics of Dart programming language
https://space.bilibili.com/404904528/channel/detail?cid=111585
Introduction to Flutter zero Foundation
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter actual combat news client from scratch
https://space.bilibili.com/404904528/channel/detail?cid=106755
Fluent component development
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578