Flutter自定义Snackbar内容插件flutter_snackbar_content的使用

当然，下面是一个关于如何使用 flutter_snackbar_content 插件来自定义 Flutter 中 Snackbar 内容的示例代码。这个插件允许你创建高度自定义的 Snackbar，而不仅仅是使用默认样式。

首先，确保你的 pubspec.yaml 文件中已经添加了 flutter_snackbar_content 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_snackbar_content: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来，你可以创建一个自定义的 Snackbar 内容。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_snackbar_content/flutter_snackbar_content.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Snackbar Custom Content Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              _showCustomSnackbar(context);
            },
            child: Text('Show Snackbar'),
          ),
        ),
      ),
    );
  }

  void _showCustomSnackbar(BuildContext context) {
    final ScaffoldMessengerState scaffoldMessenger = ScaffoldMessenger.of(context);
    
    // 自定义 Snackbar 内容
    final SnackBar snackBar = SnackBar(
      content: CustomSnackBarContent(
        message: 'This is a custom message!',
        action: IconButton(
          icon: Icon(Icons.close),
          onPressed: () {
            scaffoldMessenger.removeCurrentSnackBar();
          },
        ),
        backgroundColor: Colors.blue,
        messageTextStyle: TextStyle(color: Colors.white),
        actionTextStyle: TextStyle(color: Colors.white),
        duration: Duration(seconds: 3), // 持续时间
        padding: EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
        borderRadius: BorderRadius.circular(12.0),
      ),
      duration: Duration(seconds: 3), // 确保与 CustomSnackBarContent 中的 duration 一致或更长
    );

    scaffoldMessenger.showSnackBar(snackBar);
  }
}

// 自定义 Snackbar 内容组件
class CustomSnackBarContent extends StatelessWidget {
  final String message;
  final Widget action;
  final Color backgroundColor;
  final TextStyle messageTextStyle;
  final TextStyle actionTextStyle;
  final Duration duration;
  final EdgeInsetsGeometry padding;
  final BorderRadius borderRadius;

  const CustomSnackBarContent({
    Key? key,
    required this.message,
    required this.action,
    this.backgroundColor = Colors.grey,
    this.messageTextStyle = const TextStyle(),
    this.actionTextStyle = const TextStyle(),
    this.duration = const Duration(seconds: 3),
    this.padding = const EdgeInsets.all(8.0),
    this.borderRadius = const BorderRadius.all(Radius.circular(4.0)),
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: borderRadius,
      ),
      padding: padding,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(message, style: messageTextStyle),
          action,
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个自定义的 Snackbar 内容 CustomSnackBarContent，并在 _showCustomSnackbar 方法中将其用作 SnackBar 的 content。你可以根据需要自定义 CustomSnackBarContent 的样式和行为。

这个示例展示了如何自定义 Snackbar 的背景颜色、文本样式、动作按钮、内边距和圆角等属性。希望这对你有所帮助！