Flutter渐变列表动画插件flutter_faded_list的使用

本插件帮助你以模糊图像作为第一项展示你的小部件列表。

安装

要使用此插件，在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_faded_list: ^0.0.4

或者使用以下命令自动安装：

$ flutter pub add flutter_faded_list

简单使用

首先，导入插件：

import 'package:flutter_faded_list/flutter_faded_list.dart';

然后在你的代码中使用 FadedHorizontalList 小部件：

FadedHorizontalList(
  blankSpaceWidth: 200, // 设置空白空间的宽度
  bodyColor: const Color(0xffAD4516), // 设置背景颜色
  imageWidget: Image.network("https://i.picsum.photos/id/478/536/354.jpg?hmac=adxYyHX8WcCfHkk07quT2s92fbC7vY2QttaeBztwxgI"), // 设置背景图像
  children: [
    for (var i = 0; i < 10; ++i)
      const Padding(
        padding: const EdgeInsets.all(70.0),
        child: Text("  Hello World!  "), // 设置列表项内容
      ),
  ],
)

示例代码

以下是完整的示例代码，演示如何在 Flutter 应用程序中使用 flutter_faded_list 插件：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Faded List',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const FirstPage(title: "Flutter Faded List"),
    );
  }
}

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.format_textdirection_l_to_r),
        onPressed: () {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => SecondPage(title: title)),
          );
        },
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const Text("TextDirection  LTR"),
            DirectionWidget(
              textDirection: TextDirection.ltr,
              child: FadedHorizontalList(
                blankSpaceWidth: 200, // 设置空白空间的宽度
                bodyColor: const Color(0xffAD4516), // 设置背景颜色
                imageWidget: Image.network(
                    "https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170"), // 设置背景图像
                children: [
                  for (var i = 0; i < 10; ++i)
                    const FadedSampleItem(hotDrink: HotDrink.coffee) // 设置列表项内容
                ],
              ),
            ),
            DirectionWidget(
              textDirection: TextDirection.ltr,
              child: FadedHorizontalList(
                headerColor: const Color(0xffAD4516), // 设置头部背景颜色
                blankSpaceWidth: 200, // 设置空白空间的宽度
                bodyColor: const Color(0xffd27900), // 设置背景颜色
                borderRadius: 20.0, // 设置圆角半径
                imageWidget: Image.network(
                    "https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170"), // 设置背景图像
                headerWidget: const FadedSampleHeaderWidget(
                    hotDrink: HotDrink.coffee, color: Color(0xffAD4516)), // 设置头部内容
                children: [
                  for (var i = 0; i < 10; ++i)
                    const FadedSampleItem(hotDrink: HotDrink.coffee) // 设置列表项内容
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}