Flutter收藏按钮插件fav_button的使用

Flutter收藏按钮插件fav_button的使用

Favorite Button 是一个 Flutter 库，允许你创建心形或星形的收藏按钮，并且带有动画效果。

Omar Nasser

Omar Nasser

GitHub LinkedIn 个人作品集

如何使用它

默认效果为 Icons.favorite：

FavoriteButton(
  valueChanged: (_) {
    // 按钮状态改变时调用的回调函数
  },
),

你也可以定义自定义效果：

FavoriteButton(
  valueChanged: (_isFavorite) {
    print('是否收藏: $_isFavorite');
  },
)

参数

参数名称 描述 默认值
icon 图标 60.0
iconSize 按钮大小 60.0
iconColor 按钮颜色 心形为红色，星形为黄色
valueChanged 返回当前按钮状态的布尔值的函数 必须参数
isFavorite 或 isStarred 按钮的初始状态 可选参数

完整示例 Demo

以下是一个完整的示例，展示如何在 Flutter 应用程序中使用 FavoriteButton 插件。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("收藏按钮示例"),
        ),
        body: Center(
          child: FavoriteButtonExample(),
        ),
      ),
    );
  }
}

class FavoriteButtonExample extends StatefulWidget {
  [@override](/user/override)
  _FavoriteButtonExampleState createState() => _FavoriteButtonExampleState();
}

class _FavoriteButtonExampleState extends State<FavoriteButtonExample> {
  bool _isFavorite = false;

  void _onFavoriteChanged(bool isFavorite) {
    setState(() {
      _isFavorite = isFavorite;
    });
    print('是否收藏: $isFavorite');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FavoriteButton(
          iconColor: _isFavorite ? Colors.red : Colors.grey,
          iconSize: 60.0,
          isFavorite: _isFavorite,
          valueChanged: _onFavoriteChanged,
        ),
      ],
    );
  }
}

更多关于Flutter收藏按钮插件fav_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter收藏按钮插件fav_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是关于如何在Flutter项目中使用fav_button插件来实现收藏按钮功能的代码示例。

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

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

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

接下来，你可以在你的Flutter项目中创建一个收藏按钮，并处理其点击事件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Fav Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isFavorite = false;

  void toggleFavorite() {
    setState(() {
      isFavorite = !isFavorite;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Fav Button Demo'),
      ),
      body: Center(
        child: FavButton(
          isFavorite: isFavorite,
          onTap: toggleFavorite,
          favoriteColor: Colors.red,
          unFavoriteColor: Colors.grey,
          favoriteIcon: Icons.favorite,
          unFavoriteIcon: Icons.favorite_border,
          animationDuration: Duration(milliseconds: 300),
        ),
      ),
    );
  }
}

在这个示例中：

  1. MyApp是应用的根widget，它使用MaterialApp来设置主题和主页。
  2. MyHomePage是一个有状态的widget，它包含了一个FavButton。
  3. isFavorite状态变量用于跟踪收藏状态。
  4. toggleFavorite函数用于切换收藏状态。
  5. FavButton被配置为在点击时调用toggleFavorite函数，并根据isFavorite状态显示不同的图标和颜色。

FavButton的常用参数包括：

  • isFavorite：一个布尔值，表示当前是否为收藏状态。
  • onTap：一个点击事件处理函数。
  • favoriteColor：收藏状态下的按钮颜色。
  • unFavoriteColor：非收藏状态下的按钮颜色。
  • favoriteIcon：收藏状态下的图标。
  • unFavoriteIcon：非收藏状态下的图标。
  • animationDuration：动画持续时间。

你可以根据需要调整这些参数来满足你的应用需求。

回到顶部