Flutter动画过渡效果插件flutter_fader的使用

flutter_fader 插件介绍

flutter_fader 是一个用于Flutter的Widget，它允许你淡入和淡出子Widget。当一个widget被淡出时，它将不再存在于视图树中，这意味着它不能被使用或交互。这非常适合隐藏按钮等场景。

入门指南

在你的Flutter项目中，添加该包到你的依赖项：

dependencies:
  ...
  flutter_fader: ^2.0.0

使用示例

示例1：Fader with buttons

两个按钮，点击上面的一个会使其淡出，点击下面的一个会使其淡入。

完整示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Fader Example')),
        body: Center(child: FaderWithButtons()),
      ),
    );
  }
}

class FaderWithButtons extends StatefulWidget {
  @override
  _FaderWithButtonsState createState() => _FaderWithButtonsState();
}

class _FaderWithButtonsState extends State<FaderWithButtons> {
  final FaderController faderController = FaderController();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Fader(
          controller: faderController,
          duration: const Duration(milliseconds: 500),
          child: ElevatedButton(
            onPressed: () {
              faderController.fadeOut();
            },
            child: Text("Fade Out"),
          ),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            faderController.fadeIn();
          },
          child: Text("Fade In"),
        ),
      ],
    );
  }
}

示例2：Fader with scroll

一个非常长的滚动视图，和一个浮动操作按钮。当你向下滚动时，浮动操作按钮会淡出；当你向上滚动时，它会淡入。

完整示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Fader Scroll Example')),
        body: FaderWithScroll(),
      ),
    );
  }
}

class FaderWithScroll extends StatefulWidget {
  @override
  _FaderWithScrollState createState() => _FaderWithScrollState();
}

class _FaderWithScrollState extends State<FaderWithScroll> {
  final FaderController faderController = FaderController();
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  @override
  void dispose() {
    _scrollController.removeListener(_onScroll);
    _scrollController.dispose();
    super.dispose();
  }

  void _onScroll() {
    if (_scrollController.offset > 100 && faderController.isShowing) {
      faderController.fadeOut();
    } else if (_scrollController.offset <= 100 && !faderController.isShowing) {
      faderController.fadeIn();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        ListView.builder(
          controller: _scrollController,
          itemCount: 50,
          itemBuilder: (context, index) {
            return ListTile(title: Text('Item $index'));
          },
        ),
        Positioned(
          bottom: 20,
          right: 20,
          child: Fader(
            controller: faderController,
            duration: const Duration(milliseconds: 300),
            child: FloatingActionButton(
              onPressed: () {},
              child: Icon(Icons.add),
            ),
          ),
        ),
      ],
    );
  }
}

通过以上两个示例，你可以看到如何使用 flutter_fader 插件来实现淡入淡出的效果。希望这些例子能帮助你更好地理解和使用这个插件！