Flutter消息提示插件toast_w的使用

Flutter消息提示插件toast_w的使用

toast_widget

这是一个新的Flutter包项目。

开始使用

这个项目是一个Dart包项目的起点。
包是一个库模块，包含可以轻松在多个Flutter或Dart项目中共享的代码。

对于如何开始使用Flutter，您可以查看我们的在线文档，该文档提供了教程、示例、移动开发指南以及完整的API参考。

以下是一个完整的示例代码，展示了如何在Flutter应用中使用toast_w插件来显示消息提示。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '您已经点击了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 使用ToastW显示消息提示
          ToastW.show(
            context,
            onTapClose: true, // 点击关闭
            builder: (context) => Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Card(
                color: Colors.green,
                elevation: 8,
                child: ListTile(
                  title: Text("成功"), // 标题
                  subtitle: Text("已发送成功！"), // 副标题
                  trailing: Icon(Icons.arrow_forward_ios), // 图标
                ),
              ),
            ),
          );
        },
        tooltip: '增加',
        child: Icon(Icons.add),
      ),
    );
  }
}

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

1 回复

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


toast_w 是一个 Flutter 插件，用于在应用程序中显示简单的消息提示（Toast）。它类似于 Android 中的 Toast 消息，可以在屏幕底部或顶部显示短暂的提示信息。以下是使用 toast_w 插件的步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 toast_w 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  toast_w: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 toast_w 插件：

import 'package:toast_w/toast_w.dart';

3. 使用 Toast

toast_w 提供了几种方法来显示 Toast 消息：

  • Toast.show()：显示默认的 Toast 消息。
  • Toast.showTop()：在屏幕顶部显示 Toast 消息。
  • Toast.showBottom()：在屏幕底部显示 Toast 消息。

示例代码

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Toast Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ToastExample(),
    );
  }
}

class ToastExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Toast Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Toast.show('This is a default toast message', context);
              },
              child: Text('Show Default Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Toast.showTop('This is a top toast message', context);
              },
              child: Text('Show Top Toast'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Toast.showBottom('This is a bottom toast message', context);
              },
              child: Text('Show Bottom Toast'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 运行应用

运行你的 Flutter 应用程序，点击按钮即可看到不同类型的 Toast 消息。

5. 自定义 Toast

toast_w 还允许你自定义 Toast 的显示时间和样式。例如：

Toast.show(
  'This is a custom duration toast',
  context,
  duration: Toast.lengthLong,  // 设置显示时间为长
  gravity: Toast.center,       // 设置显示位置为居中
);

6. 其他选项

你可以通过 Toast 类的其他方法来进一步自定义 Toast 的外观和行为，例如设置背景颜色、文字颜色等。

Toast.show(
  'Custom Style Toast',
  context,
  backgroundColor: Colors.green,
  textColor: Colors.white,
);
回到顶部