0

Eu fiz uma lista divididos em dois gridview porque queria que fosse exibido só os 3 primeiros itens e com um botão para exibir mais itens depois. Não sei se foi o jeito correto de fazer mas funciona para mim.

Mas o método de exibir e ocultar os itens está muito agressivo então eu consegui colocar a animação para os itens aparecerem, mas não estou conseguindo fazer desaparecer com o fade. E depois q aparece a primeira vez, mesmo que eu ocultar e fazer aparecer novamente a animação não funciona mais.

Gostaria de saber como fazer essa animação funcionar corretamente, e se estou no caminho certo dessa maneira ou deveria ser tudo de forma diferente.

Esse gif mostra como esta a animação no momento.

inserir a descrição da imagem aqui

Coloquei o código no dartpad para facilitar a visualização:

https://dartpad.dev/526a5719cae7d8be0772f1e87ef02ced

E segue o código todo abaixo também.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Test'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidget createState() => _MyWidget();
}

class _MyWidget extends State<MyWidget> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 800),
    );
    _animation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(_animationController);
    super.initState();
  }

  @override
  dispose() {
    _animationController.dispose();
    super.dispose();
  }

  var _isExpanded = false;

  _toggleExpanded() {
    _animationController.forward();
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {

    return SingleChildScrollView(
      child: Column(children: <Widget>[
        GridView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
            mainAxisSpacing: 0.0,
            crossAxisSpacing: 0.0,
          ),
          itemCount: 3,
          itemBuilder: (context, index) {
            return ItemCategory(
              title: "Teste $index",
              icon: Icons.apps,
              coloritem: Colors.deepPurple,
              onpressbtn: "teste $index",
            );
          },
        ),
        Visibility(
          visible: _isExpanded,
          child: FadeTransition(
            opacity: _animation,
            child: GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 1.0,
                mainAxisSpacing: 0.0,
                crossAxisSpacing: 0.0,
              ),
              itemCount: 5,
              itemBuilder: (context, index) {
                var indx = index+3;
                return ItemCategory(
                  title: "Teste $indx",
                  icon: Icons.apps,
                  coloritem: Colors.deepPurple,
                  onpressbtn: "teste $index",
                );
              },
            ),
          ),
        ),
        IconButton(
          icon: _isExpanded
              ? Icon(Icons.keyboard_arrow_up)
              : Icon(Icons.keyboard_arrow_down),
          tooltip: 'Open More options',
          onPressed: _toggleExpanded,
        ),
      ]),
    );
  }
}

// Esses são itens de exemplo para ser exibido no gridview.
class ItemCategory extends StatelessWidget {
  ItemCategory({this.title, this.icon, this.coloritem, this.onpressbtn});

  final String title;
  final IconData icon;
  final MaterialColor coloritem;
  final String onpressbtn;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(8.5),
      child: InkWell(
        onTap: () {},
        splashColor: Colors.amber,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(
                icon,
                size: 70.0,
                color: coloritem,
              ),
              Text(title, style: new TextStyle(fontSize: 17.0))
            ],
          ),
        ),
      ),
    );
  }
}

1 Resposta 1

1

Entao oq esta errado é a ordem de execução, você chama a animação antes de exibir o conteúdo, o que quebra a sequencia, primeiro você deve deixar visível e depois chamar a animação. E se voce quiser ver a animação de saída no reverse, o certo é usar um listener na animacao para ver quando a animação terminou o reverse para entao fechar o visible.

Seu codigo ficaria assim.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Test'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  _MyWidget createState() => _MyWidget();
}

class _MyWidget extends State<MyWidget> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 800),
    );
    _animation = Tween(
      begin: 0.0,
      end: 1.0,
    ).animate(_animationController);
    
    _animationController.addStatusListener((status){
      if(status == AnimationStatus.dismissed){
        setState(() {
            _isExpanded = false;
        });
      }
    });
    
    
    super.initState();
  }

  @override
  dispose() {
    _animationController.dispose();
    super.dispose();
  }

  var _isExpanded = false;

  _toggleExpanded() {
    
    if(_animationController.isDismissed){
      setState(() {
          _isExpanded = true;
      });
      _animationController.forward();
    }else{
      _animationController.reverse();
      
    }
    
  }

  @override
  Widget build(BuildContext context) {

    return SingleChildScrollView(
      child: Column(children: <Widget>[
        GridView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
            mainAxisSpacing: 0.0,
            crossAxisSpacing: 0.0,
          ),
          itemCount: 3,
          itemBuilder: (context, index) {
            return ItemCategory(
              title: "Teste $index",
              icon: Icons.apps,
              coloritem: Colors.deepPurple,
              onpressbtn: "teste $index",
            );
          },
        ),
        Visibility(
          visible: _isExpanded,
          child: FadeTransition(
            opacity: _animation,
            child: GridView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 1.0,
                mainAxisSpacing: 0.0,
                crossAxisSpacing: 0.0,
              ),
              itemCount: 5,
              itemBuilder: (context, index) {
                var indx = index+3;
                return ItemCategory(
                  title: "Teste $indx",
                  icon: Icons.apps,
                  coloritem: Colors.deepPurple,
                  onpressbtn: "teste $indx",
                );
              },
            ),
          ),
        ),
        IconButton(
          icon: _isExpanded
              ? Icon(Icons.keyboard_arrow_up)
              : Icon(Icons.keyboard_arrow_down),
          tooltip: 'Open More options',
          onPressed: _toggleExpanded,
        ),
      ]),
    );
  }
}

class ItemCategory extends StatelessWidget {
  ItemCategory({this.title, this.icon, this.coloritem, this.onpressbtn});

  final String title;
  final IconData icon;
  final MaterialColor coloritem;
  final String onpressbtn;

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(8.5),
      child: InkWell(
        onTap: () {},
        splashColor: Colors.amber,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(
                icon,
                size: 70.0,
                color: coloritem,
              ),
              Text(title, style: new TextStyle(fontSize: 17.0))
            ],
          ),
        ),
      ),
    );
  }
}
1
  • Perfeito, eu não sabia que o status mudava pra dismissed somente quando a animação fechava, muito interessante. Também não sabia que deveria usar reverse. Pela logica eu estava procurando algo como backwards. Muito obrigado mesmo, estava a dias tentando entender isso. 29/08/2020 às 22:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .