Flutter弹出栈式提示框插件flutter_stack_toast的使用

特性

可配置的提示视图
可滑动关闭
自动关闭
可以显示自定义小部件作为提示
简单的提示视图
栈式提示视图

开始使用

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flutter_stack_toast: ^0.0.2

导入插件：

import 'package:flutter_stack_toast/flutter_stack_toast.dart';

使用方法

显示简单提示

通过 showSimpleToast 方法显示简单的文本提示。

StackToast.showToast(context, "desired text");

显示自定义文本提示

通过 showTextToast 方法显示自定义样式的文本提示。

StackToast.showTextToast(context, Text("desired text", 
  style: TextStyle(color: Colors.black, fontSize: 15)));

显示自定义提示

通过 showCustomToast 方法显示自定义的小部件提示。

StackToast.showCustomToast(context, Text("desired text", 
  style: TextStyle(color: Colors.black, fontSize: 15)));

清除所有提示

可以通过 clear 方法清除所有正在显示和排队的提示小部件。

StackToast.clear(context);

配置默认设置

可以更改所有默认配置。

FadeToastConfig()
  .setAlignment(ToastAlignment.bottom)
  .setHorizontalMargin(10)
  .setVerticalMargin(10)
  .setSimpleItemHeight(40)
  .setBoxShadow(BoxShadow(
    color: Colors.black12,
    spreadRadius: 5,
    blurRadius: 7,
    offset: Offset(0, 1),
  ))
  .setBorderRadius(BorderRadius.all(Radius.circular(12.0)))
  .setBackgroundColor(Colors.white)
  .setAnimationDuration(Duration(milliseconds: 300));

显示栈式提示

通过 showStackToast 方法显示简单的栈式提示。

StackToast.showStackToast(context, "desired text");

显示自定义文本栈式提示

通过 showStackTextToast 方法显示自定义样式的文本栈式提示。

StackToast.showStackTextToast(context, Text("desired text", 
  style: TextStyle(color: Colors.black, fontSize: 15)));

显示自定义栈式提示

通过 showStackCustomToast 方法显示自定义的小部件栈式提示。

StackToast.showStackCustomToast(context, Text("desired text", 
  style: TextStyle(color: Colors.black, fontSize: 15)));

清除所有栈式提示

可以通过 clearStackToast 方法清除所有正在显示和排队的栈式提示小部件。

StackToast.clearStackToast(context);

配置栈式提示默认设置

可以更改所有默认配置。

StackToastConfig()
  .setAlignment(ToastAlignment.bottom)
  .setHorizontalMargin(10)
  .setVerticalMargin(10)
  .setSimpleItemHeight(40)
  .setDownsizePercent(5)
  .setBetweenItemSpace(10)
  .setMaxShowingItem(5)
  .setDismissDirection(TextDirection.ltr)
  .setBoxShadow(BoxShadow(
    color: Colors.black12,
    spreadRadius: 5,
    blurRadius: 7,
    offset: Offset(0, 1),
  ))
  .setBorderRadius(BorderRadius.all(Radius.circular(12.0)))
  .setBackgroundColor(Colors.white)
  .setAnimationDuration(Duration(milliseconds: 300))
  .setAutoDismissItemDuration(Duration(seconds: 3))
  .setAutoDismissEnable(true);

示例代码

import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int index = 0;

  OverlayState? overlay;

  List<OverlayEntry> list = [];

  List<IconData> icons = [
    Icons.reset_tv_outlined,
    Icons.add_alert_outlined,
    Icons.woo_commerce,
    Icons.h_mobiledata,
    Icons.golf_course,
    Icons.do_disturb_outlined,
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    overlay ??= Overlay.of(context);

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _simpleToast(),
            const SizedBox(height: 20),
            _stackToast()
          ],
        ),
      ),
    );
  }

  Widget _simpleToast() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Simple toast functions:'),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            StackToast.showToast(context, "It is the toast number $index", duration: Duration(seconds: 2));
            index++;
          },
          child: const Text("Show Toast"),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            StackToast.showTextToast(
              context,
              Text(
                "It is the toast number\n\n\n $index",
                style: const TextStyle(
                  color: Colors.amber,
                  letterSpacing: 5,
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  decoration: TextDecoration.none,
                ),
              ),
              duration: Duration(seconds: 2),
            );
            index++;
          },
          child: const Text("Show Text Toast"),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            StackToast.showCustomToast(
              context,
              Container(
                width: 300,
                height: 50,
                color: Colors.amber,
                child: Icon(
                  icons[Random().nextInt(icons.length)],
                  color: Colors.white,
                ),
              ),
              duration: Duration(seconds: 2),
            );
            index++;
          },
          child: const Text("Show Custom Toast"),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            StackToast.clear(context);
          },
          child: const Text("Clear simple toast"),
        ),
      ],
    );
  }

  Widget _stackToast() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const Text('Stack toast functions:'),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            StackToast.showStackToast(context, "It is the toast number $index");
            index++;
          },
          child: const Text("Show Stack Toast"),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            StackToast.showStackTextToast(
              context,
              Text(
                "It is the toast number $index",
                style: const TextStyle(
                  color: Colors.amber,
                  letterSpacing: 5,
                  fontSize: 14,
                  fontWeight: FontWeight.w600,
                  decoration: TextDecoration.none,
                ),
              ),
            );
            index++;
          },
          child: const Text("Show Stack Text Toast"),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            StackToast.showStackCustomToast(
              context,
              Container(
                width: 300,
                height: 50,
                color: Colors.amber,
                child: Icon(
                  icons[Random().nextInt(icons.length)],
                  color: Colors.white,
                ),
              ),
            );
            index++;
          },
          child: const Text("Show Stack Custom Toast"),
        ),
        const SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            StackToast.clearStackToast(context);
          },
          child: const Text("Clear Stack toast."),
        ),
      ],
    );
  }
}

更多关于Flutter弹出栈式提示框插件flutter_stack_toast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼•3 天前

更多关于Flutter弹出栈式提示框插件flutter_stack_toast的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用 flutter_stack_toast 插件在 Flutter 中弹出栈式提示框的代码示例。这个插件允许你在屏幕上的任意位置显示提示框，并且这些提示框会以栈的形式管理，即新的提示框会显示在旧的提示框之上。

首先，你需要在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_stack_toast: ^latest_version  # 请替换为最新版本号

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

接下来是一个简单的使用示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Stack Toast Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  FlutterStackToast.showToast(
                    context,
                    msg: "Hello, this is a toast message!",
                    position: ToastPosition.bottom,
                    backgroundColor: Colors.blue,
                    textStyle: TextStyle(color: Colors.white),
                    duration: Duration(seconds: 3),
                  );
                },
                child: Text('Show Toast Bottom'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  FlutterStackToast.showToast(
                    context,
                    msg: "Another toast on top!",
                    position: ToastPosition.top,
                    backgroundColor: Colors.green,
                    textStyle: TextStyle(color: Colors.white),
                    duration: Duration(seconds: 2),
                  );
                },
                child: Text('Show Toast Top'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的 Flutter 应用，其中有两个按钮。点击第一个按钮会在屏幕底部显示一个蓝色的提示框，持续3秒；点击第二个按钮会在屏幕顶部显示一个绿色的提示框，持续2秒。由于使用了 flutter_stack_toast，第二个提示框会显示在第一个提示框之上。

ToastPosition 枚举

ToastPosition 枚举定义了提示框可以显示的位置，包括：

bottom
top
left
right
center

你可以根据需要调整 position 参数来显示提示框在不同的位置。

自定义样式

你可以通过 backgroundColor 和 textStyle 参数来自定义提示框的背景颜色和文本样式。此外，duration 参数允许你设置提示框显示的持续时间。

希望这个示例能帮助你理解如何在 Flutter 应用中使用 flutter_stack_toast 插件来弹出栈式提示框。