Flutter轻量级提示插件light_toast的使用

Flutter轻量级提示插件light_toast的使用

简介

Light Toast 是一个简单、轻量且高度可定制的Flutter插件，旨在为您的Flutter应用程序提供美观的Toast通知。通过引人注目的Toast消息增强应用的用户体验。

示例图1 示例图2 示例图3

功能特性

  • 上下文灵活性：可以在有或没有BuildContext的情况下使用Light Toast，实现无缝集成。
  • 自定义：通过多种颜色、图标和图片（包括本地资源和网络图片）个性化您的Toast消息。
  • 视觉吸引力：可以选择在Toast文本旁边显示图标或图片，增加视觉冲击力。
  • 时间控制：调整Toast消息的显示时长，确保最佳可见性。
  • 按需隐藏：根据需要轻松隐藏Toast消息。

入门指南

1. 添加依赖

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

dependencies:
  light_toast: ^0.0.8
2. 导入包

在Dart文件中添加导入语句：

import 'package:light_toast/light_toast.dart';

使用方法

简单用法
// 简单用法
Toast.show('Hello, Flutter!');
带上下文的用法
// 带BuildContext的用法
Toast.show(context: context, 'Hello, Flutter!');
隐藏Toast
// 隐藏Toast
Toast.hide();

完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter项目中使用 light_toast 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Toast Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 显示Toast消息
              Toast.show(
                'Hello, Flutter!',
              );
            },
            child: const Text('Show Toast'),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用light_toast插件的示例代码。light_toast是一个轻量级的提示插件，非常适合在应用中显示简单的提示信息。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  light_toast: ^2.0.0  # 请检查最新版本号

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

步骤 2: 导入插件

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

import 'package:light_toast/light_toast.dart';

步骤 3: 使用插件

下面是一些使用light_toast插件的示例代码：

简单的文本提示

void _showSimpleToast() {
  LightToast.show("这是一个简单的提示", context,
      backgroundColor: Colors.black54,
      textStyle: TextStyle(color: Colors.white));
}

带有成功图标的提示

void _showSuccessToast() {
  LightToast.showWithCustomIcon(
      "操作成功",
      context,
      icon: Icon(Icons.check_circle, color: Colors.green),
      backgroundColor: Colors.white,
      textStyle: TextStyle(color: Colors.black),
      duration: ToastDuration.lengthLong,
      gravity: ToastGravity.bottom);
}

带有失败图标的提示

void _showErrorToast() {
  LightToast.showWithCustomIcon(
      "操作失败",
      context,
      icon: Icon(Icons.cancel, color: Colors.red),
      backgroundColor: Colors.white,
      textStyle: TextStyle(color: Colors.black),
      duration: ToastDuration.lengthShort,
      gravity: ToastGravity.center);
}

自定义位置和动画的提示

void _showCustomToast() {
  LightToast.show("这是一个自定义提示", context,
      backgroundColor: Colors.blueGrey,
      textStyle: TextStyle(color: Colors.white),
      animation: ToastAnimation.slideFromBottom,
      duration: ToastDuration.lengthLong,
      gravity: ToastGravity.top);
}

完整示例

下面是一个完整的示例，展示了如何在Flutter应用中集成并使用light_toast插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Light Toast Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () => _showSimpleToast(),
                child: Text('显示简单提示'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => _showSuccessToast(),
                child: Text('显示成功提示'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => _showErrorToast(),
                child: Text('显示错误提示'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => _showCustomToast(),
                child: Text('显示自定义提示'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _showSimpleToast() {
    LightToast.show("这是一个简单的提示", context,
        backgroundColor: Colors.black54,
        textStyle: TextStyle(color: Colors.white));
  }

  void _showSuccessToast() {
    LightToast.showWithCustomIcon(
        "操作成功",
        context,
        icon: Icon(Icons.check_circle, color: Colors.green),
        backgroundColor: Colors.white,
        textStyle: TextStyle(color: Colors.black),
        duration: ToastDuration.lengthLong,
        gravity: ToastGravity.bottom);
  }

  void _showErrorToast() {
    LightToast.showWithCustomIcon(
        "操作失败",
        context,
        icon: Icon(Icons.cancel, color: Colors.red),
        backgroundColor: Colors.white,
        textStyle: TextStyle(color: Colors.black),
        duration: ToastDuration.lengthShort,
        gravity: ToastGravity.center);
  }

  void _showCustomToast() {
    LightToast.show("这是一个自定义提示", context,
        backgroundColor: Colors.blueGrey,
        textStyle: TextStyle(color: Colors.white),
        animation: ToastAnimation.slideFromBottom,
        duration: ToastDuration.lengthLong,
        gravity: ToastGravity.top);
  }
}

运行这个示例代码，你将能够在Flutter应用中看到如何使用light_toast插件显示不同类型的提示信息。

回到顶部