Flutter弹出提示插件btoast的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter弹出提示插件btoast的使用

BToast

BToast 是一个用于Flutter的简单且可定制的Toast库。它提供了一个易于使用的widget,用于在您的应用程序中显示风格为Toast的通知。

示例

功能

  • 以简单优雅的方式显示Toast风格的通知。
  • 可根据应用需求进行自定义。
  • 支持多种类型的Toast:成功、错误、警告、信息等。
  • 与现有Flutter项目轻松集成。

安装

$ flutter pub add btoast

使用

显示Toast

import 'package:btoast/btoast.dart';

// Context 和内容是必需的
BToast.show(context, "Toast的内容");

// 其他字段是可选的
BToast.show(
  context,
  "Toast的内容",
  duration: 20, // 持续时间(秒)
  theme: Type.WARNING, // 主题类型
  isDark: true, // 是否深色模式
  title: '测试', // 标题
);

移除所有Toast

import 'package:btoast/btoast.dart';

BToast.hide();

属性

以下是 BToast widget 的可用属性:

属性 类型 默认值 描述
context Context 应用程序的上下文。(必需)
content String 设置Toast中的内容。(必需)
type String “SUCCESS” 设置Toast的类型。可以是 “SUCCESS”、“ERROR”、“WARNING”、“INFO” 或任何其他自定义类型。
duration Number 5 设置Toast显示的持续时间(秒)。默认值为5秒。
isDark Boolean false 设置Toast的主题,默认为浅色模式。
title String “” 设置Toast的标题。默认为空字符串。

设计基于Pine UI

BToast的设计基于Pine UI,这是一个现代且灵活的界面设计系统。Pine UI提供了广泛的一致组件和样式,帮助塑造了BToast的外观和用户体验。

许可证

本项目采用MIT许可证。

完整示例Demo

以下是一个完整的示例代码,展示了如何在Flutter应用中使用BToast插件:

import 'package:btoast/btoast.dart';
import 'package:flutter/material.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 _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                // 显示普通Toast
                BToast.show(
                  context,
                  "这是一条普通的Toast",
                );
              },
              child: Text('显示普通Toast'),
            ),
            ElevatedButton(
              onPressed: () {
                // 显示带有标题和自定义主题的Toast
                BToast.show(
                  context,
                  "这是一条带有标题和自定义主题的Toast",
                  duration: 10, // 持续10秒
                  theme: Type.WARNING, // 警告主题
                  isDark: true, // 深色模式
                  title: '警告', // 标题
                );
              },
              child: Text('显示带有标题和自定义主题的Toast'),
            ),
            ElevatedButton(
              onPressed: () {
                // 移除所有Toast
                BToast.hide();
              },
              child: Text('移除所有Toast'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用btoast插件来显示弹出提示的示例代码。btoast是一个流行的Flutter插件,用于显示各种样式的Toast消息。

步骤1:添加依赖

首先,在你的pubspec.yaml文件中添加btoast依赖:

dependencies:
  flutter:
    sdk: flutter
  btoast: ^1.0.3  # 请检查最新版本号

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

步骤2:配置BToast

在你的主应用文件(通常是main.dart)中,配置BToast

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

void main() {
  // 配置BToast
  BToast.init(context);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

步骤3:使用BToast显示提示

在你的主屏幕或其他小部件中,你可以使用BToast来显示提示。例如:

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BToast Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                BToast.show(
                  'Hello, World!',
                  context,
                  duration: BToastDuration.lengthShort,
                  alignment: Alignment.center,
                );
              },
              child: Text('Show Short Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                BToast.show(
                  'This is a long toast message!',
                  context,
                  duration: BToastDuration.lengthLong,
                  alignment: Alignment.bottomCenter,
                  backgroundColor: Colors.blue,
                  textColor: Colors.white,
                );
              },
              child: Text('Show Long Toast'),
            ),
          ],
        ),
      ),
    );
  }
}

完整代码示例

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

void main() {
  BToast.init(context); // 注意:这里实际上需要在MaterialApp的builder中初始化,所以下面会有所调整

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        // 在这里初始化BToast,因为context在MaterialApp的范围内
        BToast.init(context);
        return child!;
      },
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('BToast Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                BToast.show(
                  'Hello, World!',
                  context,
                  duration: BToastDuration.lengthShort,
                  alignment: Alignment.center,
                );
              },
              child: Text('Show Short Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                BToast.show(
                  'This is a long toast message!',
                  context,
                  duration: BToastDuration.lengthLong,
                  alignment: Alignment.bottomCenter,
                  backgroundColor: Colors.blue,
                  textColor: Colors.white,
                );
              },
              child: Text('Show Long Toast'),
            ),
          ],
        ),
      ),
    );
  }
}

请注意,在上面的代码中,BToast.init(context);被移到了MaterialAppbuilder方法中,这是因为MaterialApp提供了一个合适的上下文(context)用于初始化BToast

这样,你就可以在你的Flutter应用中使用btoast插件来显示各种弹出提示了。

回到顶部