Блог

Простое отображение-скрытие анимации:

 class ShowHide extends StatelessWidget {
  final double delay;
  final Widget child;
  final double duration;
  final bool isShow;
  ShowHide({
    this.delay = 1,
    this.duration = 1,
    this.child,
    this.isShow = true,
  });

  @override
  Widget build(BuildContext context) {
    final tween = MultiTween<AniProps>()
      ..add(AniProps.scale, Tween(begin: 0.0, end: 1.0),
          Duration(milliseconds: (500 * duration).round()), Curves.linear);

    return CustomAnimation<MultiTweenValues<AniProps>>(
      delay: Duration(milliseconds: (200 * delay).round()),
      control: isShow
          ? CustomAnimationControl.PLAY
          : CustomAnimationControl.PLAY_REVERSE,
      duration: tween.duration,
      tween: tween,
      child: child,
      builder: (context, child, animation) => Transform.scale(
        scale: animation.get(AniProps.scale),
        alignment: Alignment.center,
        child: child,
      ),
    );
  }
}
 

Мой виджет верхнего уровня отображает список миниатюр изображений:

 Column(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Form(
          key: widget.addEventFormKey,
          onChanged: () {},
          child: Expanded(
            child: SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  
                  Visibility(
                    child: AttachmentsListWidget(
                      items: _attachments,
                      onAttachmentDeleted: (String attachment) {
                        setState(() {
                          File(attachment).delete();
                          _attachments.remove(attachment);
                        });
                      },
                    ),
                    visible: _attachments.length > 0,
                 
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
 

AttachmentsListWidget является ли список миниатюр изображений без состояния:

 class AttachmentsListWidget extends StatelessWidget {
  const AttachmentsListWidget({
    Key key,
    @required this.items,
    @required this.onAttachmentDeleted,
  }) : super(key: key);

  final List<String> items;
  final Function(String) onAttachmentDeleted;

  @override
  Widget build(BuildContext context) {
    var _thumbnailsScrollController = ScrollController();
    final thumbnails = <Widget>[];
    Widget thumbnailsWidget;

    if (items.length > 0) {
      for (int i = 0; i < items.length; i  ) {
        thumbnails.add(
          AttachmentWidget(
            attachment: items[i],
            onDeleteClicked: (String attachment) => onAttachmentDeleted(attachment),
          ),
        );
      }
      thumbnailsWidget = Container(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Scrollbar(
              isAlwaysShown: true,
              controller: _thumbnailsScrollController,
              child: SingleChildScrollView(
                controller: _thumbnailsScrollController,
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: thumbnails,
                  crossAxisAlignment: CrossAxisAlignment.start,
                ),
              ),
            ),
          ],
        ),
      );
    } else {
      thumbnailsWidget = Container();
    }
    return thumbnailsWidget;
  }
}
 

Это не проблема, чтобы применить анимацию для показа нового эскиза — мне нужно, чтобы окружить мой AttachmentWidget ShowHide :

 for (int i = 0; i < items.length; i  ) {
        thumbnails.add(
          ShowHide(
            child: AttachmentWidget(
              attachment: items[i],
              onDeleteClicked: (String attachment) => onAttachmentDeleted(attachment),
            ),
          ),
        );
      }
 

Но я не уверен, как применить анимацию до удаления миниатюр. При удалении миниатюры из списка весь виджет восстанавливается и применяется новый список вложений. Таким образом, для удаления отдельных миниатюр не будет применена никакая анимация.

У тебя есть какие-нибудь идеи?