Flutter滚动淡入淡出应用栏插件 fade_scroll_app_bar 的使用

fade_scroll_app_bar 是一个用于Flutter的插件，它可以帮助你创建一个大应用栏，并通过滑动实现平滑的淡入淡出效果。以下是该插件的基本用法和示例代码。

特性

使用方法

步骤 1：创建 ScrollController

首先，你需要创建一个 ScrollController 实例：

final ScrollController _scrollController = ScrollController();

步骤 2：添加 FadeScrollAppBar

接下来，在你的页面中添加 FadeScrollAppBar 组件，并传入相应的参数：

import 'package:flutter/material.dart';
import 'package:fade_scroll_app_bar/fade_scroll_app_bar.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,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final ScrollController _scrollController = ScrollController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FadeScrollAppBar(
      scrollController: _scrollController,
      appBarLeading: Icon(Icons.flutter_dash_outlined),
      appBarTitle: Text('Cool App Bar'),
      appBarForegroundColor: Colors.amber,
      pinned: true,
      fadeOffset: 120,
      expandedHeight: 250,
      backgroundColor: Colors.white,
      fadeWidget: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("Really Good App Bar",
              style: Theme.of(context).textTheme.headline2?.copyWith(
                    color: Colors.black,
                  )),
        ],
      ),
      bottomWidgetHeight: 40,
      bottomWidget: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Chip(
            label: Text("Great"),
            backgroundColor: Colors.amber,
            side: BorderSide(
              color: Colors.white,
              width: 1,
            ),
          ),
          SizedBox(width: 10),
          Chip(
            label: Text("App Bar"),
            backgroundColor: Colors.amber,
            side: BorderSide(
              color: Colors.white,
              width: 1,
            ),
          ),
        ],
      ),
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 100,
              width: 300,
              color: Colors.blue,
            ),
          );
        },
      ),
    );
  }
}