CODEWITHSUNDEEP
flutter
Peter R
Peter R

Reputation: 3516

How can I add a collapsing animation to a widget?

I'm trying to get an effect like this.

I've got the logic working, but currently there seems to be no animation (even if I bump the ms up). What the best way to achieve this "collapsing" affect.

Here's my current code.

@override
  Widget build(BuildContext context) {
    comment = Provider.of<Comment>(context);
    return GestureDetector(
      onTap: () {
        comment.toggleVisibility();
      },
      child: AnimatedSwitcher(
        child: comment.isVisible
            ? _buildComment(context)
            : _buildCollapsedComment(context),
        transitionBuilder: (Widget child, Animation<double> animation) {
          return ScaleTransition(
            scale: animation,
            child: child,
          );
        },
        duration: Duration(
          milliseconds: 3000,
        ),
      ),
    );

Upvotes: 0

Views: 740

Answers (1)

Mukul
Mukul

Reputation: 1155

Maybe This Helps you, I have used AnimatedSize on a Container to animate it's height with some Duration.

import 'package:flutter/material.dart';

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget>
    with TickerProviderStateMixin {
  bool listTileTapped = false;
  double size = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            //A simple widget Where we can tap to Expand its lower widget with some height and animation
            GestureDetector(
              onTap: () {
                setState(() {
                  listTileTapped = !listTileTapped;
                });
                if (listTileTapped) {
                  size = 300;
                } else {
                  size = 0;
                }
              },
              child: new Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: new Text("Hello Click Me to Expand"),
                ),
              ),
            ),

            //This widgets is used for setting the size to the container
            AnimatedSize(
              curve: Curves
                  .fastOutSlowIn, //you can choose your suitable curver for the purpose
              vsync: this,
              duration: Duration(seconds: 3),
              child: new Container(
                height: size,
                color: Colors.red,
                child: Center(child: new Text("This is the child Here!")),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

EDITED:

I found this working solution too, just use this ExpandedSection class from this link

Upvotes: 1

Related Questions