Flutter实现仿微信消息弹窗的效果

在现代应用中，消息通知是必不可少的功能之一。而为了提高用户体验，通知的展示效果往往是我们关注的重点。微信的消息弹窗设计简单大方，并且带有毛玻璃背景效果，使得消息提示既醒目又美观。

本文将使用Flutter框架以及GetX的Snackbar功能，来实现一个类似微信的消息弹窗效果。本文代码实现如下：

效果：

1. 环境配置

在开始之前，确保项目已经添加了GetX库，可以通过以下命令安装依赖：

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.1  # 安装 GetX 库

然后在pubspec.yaml里确保已正确添加所需的图片资源：

flutter:
  assets:
    - assets/images/weChat.png

2. 实现代码

2.1 主界面结构

首先我们通过简单的界面展示一个按钮，点击按钮之后会弹出一个自定义的消息弹窗。我们使用GetMaterialApp作为根组件，以便利用GetX的Snackbar特性。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'dart:ui';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('仿微信消息弹窗'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showCodeSnackBar(
              context,
              images: 'assets/images/weChat.png',
              title: '新消息',
              content: '您有一条未读消息，请及时查看。',
            );
          },
          child: Text('显示消息弹窗'),
        ),
      ),
    );
  }
}

2.2 自定义消息弹窗方法

接下来，我们通过封装一个自定义的showCodeSnackBar方法来实现消息弹窗的显示。Snackbar的布局会包含一个带圆角的图标、消息标题、消息内容，同时使用毛玻璃背景效果来增强弹窗的视觉体验。

void showCodeSnackBar(
    BuildContext context, {
      String images = 'assets/images/notification_icon.png',
      String? title,
      String? content,
    }) {
  Get.showSnackbar(
    GetSnackBar(
      margin: const EdgeInsets.symmetric(horizontal: 14),
      borderRadius: 10,
      duration: const Duration(seconds: 6),
      snackPosition: SnackPosition.TOP,
      backgroundColor: Colors.transparent, // 设置为透明背景
      padding: EdgeInsets.zero, // 去除默认填充
      isDismissible: true, // 允许用户手动关闭
      animationDuration: const Duration(milliseconds: 500),
      messageText: ClipRRect(
        borderRadius: BorderRadius.circular(16), // 圆角处理
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0), // 毛玻璃效果
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 15,vertical: 10),
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.8), // 半透明背景色
              borderRadius: BorderRadius.circular(10),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.25), // 阴影颜色
                  offset: const Offset(0, 4), // 阴影偏移
                  blurRadius: 5, // 模糊半径
                  spreadRadius: 1, // 扩散半径
                ),
              ],
            ),
            child: Row(
              children: [
                // 图标
                ClipRRect(
                  borderRadius: BorderRadius.circular(12), // 圆角半径
                  child: Image.asset(
                    images,
                    width: 44,
                    height: 44,
                    fit: BoxFit.cover, // 适应图片比例
                  ),
                ),
                SizedBox(width: 12),
                // 消息标题和内容
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        title ?? '默认标题',
                        style: const TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                      const SizedBox(height: 2),
                      Text(
                        content ?? '默认内容',
                        style: const TextStyle(
                          color: Colors.black,
                          fontSize: 14,
                        ),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
      titleText: const SizedBox.shrink(), // 避免多余的空间
    ),
  );
}

3. 总结

本文通过使用GetX的Snackbar功能，封装了一个仿微信消息弹窗的效果。通过自定义的布局、毛玻璃背景效果和圆角图片，我们实现了仿微信的消息弹窗。希望本文对你在Flutter中实现自定义弹窗的设计有所帮助。