关于flutter:Flutter-自定义聊天气泡

65次阅读

共计 5218 个字符，预计需要花费 14 分钟才能阅读完成。

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40…

原文

https://medium.com/flutterdev…

代码

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

参考

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

注释

对话聊天应用程序显示聊天中的音讯会在强烈的暗影背景下回升。古代聊天应用程序显示的聊天气泡的斜率取决于气泡在屏幕上的地位。在 flutter 利用中，有时须要应用聊天气泡。然而，将一个库用于一个特地无关紧要的工作并不好。

在这个博客，咱们将摸索自定义聊天气泡 flutter。咱们将看到如何实现一个自定义聊天泡泡的演示程序，以及如何使一个自定义聊天泡泡最简略的不应用任何第三方库在您的 flutter 应用程序。

配置 assets

  • 第一步: 增加 assets

将 assets 增加到 pubspec.yaml 文件。

assets:
  - assets/images/
  • 第二步: 在应用程序的根目录中运行 flutter packages get。

如何实现 dart 文件中的代码:

你须要别离在你的代码中实现它:

在 lib 文件夹中创立一个名为 custom_shape.dart 的新 dart 文件。

首先，创立自定义形态自定义 CustomPainter 类。这将用于在聊天气泡完结时绘制自定义形态。用户能够在自定义形态中增加任何色彩。

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;}
}

在 lib 文件夹中创立一个名为 send_message_screen.dart 的新 dart 文件。

首先，咱们将创立一个结构器的最终字符串音讯。

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

在构建办法中，咱们将返回 Padding()。在外部，咱们将增加 Row() 小部件。在这个小部件中，咱们将增加 mainAxisAlignment 并增加 messageTextGroup。咱们将定义上面的代码。

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,
    ],
  ),
);

咱们将深刻定义 messageTextGroup:

咱们将创立一个最终的 messageTextGroup 等于 Flexible () 小部件。在这个小部件中，咱们将增加 Row () 小部件。在外部，增加主轴对齐是完结，并启动了跨轴对齐。在儿童外部，咱们将增加装璜框的 Conatiner 和增加色彩，边框半径。它的子属性，咱们将增加一个可变音讯文本。咱们将增加 CustomPaint ()，咱们将应用下面的画家类是带色彩的 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])),
      ],
    ));

在 lib 文件夹中创立一个名为 received_message_screen.dart 的新 dart 文件。

相似地，咱们当初能够创立一个接管到的音讯屏幕。咱们只须要翻转定制的形态，并把它放在开始，而不是完结。咱们将应用转换小部件翻转自定义形态小部件。在转换小部件中，咱们将增加对齐为核心，转换为 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),
            ),
          ),
        ),
      ],
    ));

在 lib 文件夹中创立一个名为 home_page.dart 的新 dart 文件。

在注释中，咱们将增加一个 Container () 小部件。在外面，增加装璜框和增加图像。它是子属性，咱们能够在 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"),
    ],
  ),
),

当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。

残缺代码 

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:

在文章中，我曾经解释了自定义聊天气泡的根本构造，您能够依据本人的抉择批改这个代码。这是一个小的介绍自定义聊天泡泡用户交互从我这边，它的工作应用 flutter。

我心愿这个博客将提供您尝试在您的 flutter 我的项目自定义聊天气泡充沛的信息。咱们将为工作的演示程序自定义聊天气泡应用任何第三方库在您的 flutter 应用程序。所以请尝试一下。

© 猫哥

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

Dart 编程语言根底

https://space.bilibili.com/40…

Flutter 零根底入门

https://space.bilibili.com/40…

Flutter 实战从零开始 新闻客户端

https://space.bilibili.com/40…

Flutter 组件开发

https://space.bilibili.com/40…

Flutter Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

正文完
flutter
发表至： flutter
2021-07-13
 0
关于flutter:阿里卖家-Flutter-for-Web-工程实践
关于flutter:flutter起步时遇到的坑
关于flutter:在-Flutter-使用-GetX-对话框
关于flutter:Flutter-状态管理-使用-MobX