Как скрыть / свернуть ListView с анимацией?

Question

Я хочу иметь кнопку, которая, когда я нажимаю на нее, listView исчезает с animation, как анимация «вверх». Мне удалось добиться этого без animation с этим кодом для просмотра списка:

Visibility(
        // O valor aqui e o inicial
        visible: isExpanded,
        child: ListView.builder(
            scrollDirection: Axis.vertical,
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            itemCount: 2,
            itemBuilder: (BuildContext context, int index) {
              return Column(
                children: <Widget>[
                  SizedBox(height: 30),
                  GameCard(locale: widget.locale)
                ],
              );
            }),
      )

И кнопка выполняет это действие:

onTapHeader() {
    setState(() {
      if (isExpanded) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
      isExpanded = !isExpanded;
    });
  }

Есть ли способ оживить это?

Answer 1

Похоже, что нет собственного способа сделать это без злоупотребления виджетами ExpansionPanel или выполнения своих собственных задач. Мое решение состояло в том, чтобы использовать расширяемую библиотеку, поскольку это в основном то, что вам пришлось бы делать, если бы вы делали свое дело.

Вот мой код. Этого должно быть достаточно, чтобы настроить и сделать то, что вы хотите.

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

void main() {
  runApp(MaterialApp(
    theme: ThemeData(accentColor: Colors.black87),
    home: ListExpansion(),
  ));
}

List<String> generateItems(int numberOfItems) {
  return List.generate(numberOfItems, (int index) {
    return 'Item $index';
  });
}

class ListExpansion extends StatefulWidget {
  @override
  _ListExpansionState createState() => _ListExpansionState();
}

class _ListExpansionState extends State<ListExpansion> {
  ExpandableController _controller;
  List<String> _data = generateItems(8);

  @override
  void initState() {
    super.initState();
    _controller = ExpandableController();
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("List Expansion"),
          actions: <Widget>[
            IconButton(
              tooltip: _controller.expanded ? "Collapse" : "Expand",
              icon: _controller.expanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more),
              onPressed: () {
                setState(() {
                  _controller.toggle();
                });
              },
            ),
          ],
        ),
        body: ExpandablePanel(
          controller: _controller,
          hasIcon: false,
          tapHeaderToExpand: false,
          tapBodyToCollapse: false,
          collapsed: ListTile(
            title: Text("I am currently collapsed. Tap the button to expand me and see a list"),
          ),
          expanded: ListView.builder(
            itemCount: _data.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(_data[index]),
              );
            },
          ),
        ),
      ),
    );
  }
}

Убедитесь, что вы добавили зависимость паба следующим образом:

dependencies:
  flutter:
    sdk: flutter

  expandable: ^3.0.1

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2