像一个艺术家一样绘制气泡样式🎨：Flutter聊天气泡开发指南

2023-09-11 12:22:23

Flutter极致的业务封装📦——各类聊天气泡(一)

引言

在Flutter中，聊天气泡是实现聊天功能不可或缺的一部分。Flutter提供了丰富的自定义组件，使你能够轻松创建自己的聊天气泡样式。本系列文章将分为两部分，第一部分将介绍聊天气泡的基础知识和一些常见的样式，第二部分将深入探讨一些更高级的定制技巧和示例。

自定义组件：打造你的聊天气泡工厂🛠️

聊天气泡通常由一个Container组件和一个Text组件组成。Container组件负责定义气泡的形状和颜色，而Text组件负责显示聊天消息。你可以使用不同的装饰器来修饰Container组件，如BorderRadius、BoxDecoration和BoxShadow等，以创建各种形状和风格的气泡。

import 'package:flutter/material.dart';

class ChatBubble extends StatelessWidget {
  final String message;
  final bool isCurrentUser;

  const ChatBubble({
    Key? key,
    required this.message,
    this.isCurrentUser = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      margin: EdgeInsets.only(
        top: 8,
        bottom: 8,
        left: isCurrentUser ? 50 : 10,
        right: isCurrentUser ? 10 : 50,
      ),
      decoration: BoxDecoration(
        color: isCurrentUser ? Colors.blue : Colors.grey[200],
        borderRadius: BorderRadius.circular(16),
      ),
      child: Text(
        message,
        style: TextStyle(
          color: isCurrentUser ? Colors.white : Colors.black,
        ),
      ),
    );
  }
}