An example how different widget can be used to expand and collapse content in Flutter

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expanding Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExpandExample(),
    );
  }
}

class ExpandExample extends StatefulWidget {
  @override
  _ExpandExampleState createState() => _ExpandExampleState();
}

class _ExpandExampleState extends State<ExpandExample> {

  ///If the box is expanded
  bool _isExpanded = false;

  ///Toogle the box to expand or collapse
  void _toogleExpand() {
    setState(() {
      _isExpanded = !_isExpanded;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200.0,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Material(
                color: Colors.blue,
                child: InkWell(
                  onTap: _toogleExpand,
                  child: Container(
                    padding: EdgeInsets.all(25.0),
                    width: double.infinity,
                    child: Text('Click me to ' + (_isExpanded ? 'collapse' : 'expand')),
                  ),
                ),
              ),
              ExpandedSection(
                expand: _isExpanded,
                child: Container(
                  width: double.infinity,
                  color: Colors.red,
                  padding: EdgeInsets.all(25.0),
                  child: Text('Hello there'),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class ExpandedSection extends StatefulWidget {

  final Widget child;
  final bool expand;
  ExpandedSection({this.expand = false, this.child});

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

class _ExpandedSectionState extends State<ExpandedSection> with SingleTickerProviderStateMixin {
  AnimationController expandController;
  Animation<double> animation; 

  @override
  void initState() {
    super.initState();
    prepareAnimations();
  }

  ///Setting up the animation
  void prepareAnimations() {
    expandController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500)
    );
    Animation curve = CurvedAnimation(
      parent: expandController,
      curve: Curves.fastOutSlowIn,
    );
    animation = Tween(begin: 0.0, end: 1.0).animate(curve)
      ..addListener(() {
        setState(() {

        });
      }
    );
  }

  @override
  void didUpdateWidget(ExpandedSection oldWidget) {
    super.didUpdateWidget(oldWidget);
    if(widget.expand) {
      expandController.forward();
    }
    else {
      expandController.reverse();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return SizeTransition(
      axisAlignment: 1.0,
      sizeFactor: animation,
      child: widget.child
    );
  }
}

thanks man,
i have a list of card..
where I am tap on a card, all cards expand a child , i want to expand only child of card i tapped on it.

@BurierAbdalwahhabElia Hmm, seems that you are sharing the same "open" state for all cards. Maybe you need a state/widget for every individual card?

yes, i want to collapse child only for card i tapped on it.. how to doing that?

…

On Wed, 23 Sep 2020, 8:39 pm Adam Jonsson, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ @BurierAbdalwahhabElia <https://github.com/BurierAbdalwahhabElia> Hmm, seems that you are sharing the same "open" state for all cards. Maybe you need a state/widget for every individual card? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/57caa39ec3584343833ece556198187c#gistcomment-3464780>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIB7QXMZ32AVG2JU3LUOO4DSHIXDZANCNFSM4RWH7UAA> .

@BurierAbdalwahhabElia
hi can you use this code?

your work is awesome bro thankyouu.
i need help . i want to keep the widget Expanded at First Launch . how to do that ?
i modify state _isExpanded = true . but it gets me nothing . still collapsed
thanks for your help

perfect ! this code is so good. thanks bro

Flutter 2.* version:

import 'package:flutter/material.dart';

class ExpandedSection extends StatefulWidget {
  final Widget child;
  final bool expand;
  ExpandedSection({this.expand = false, required this.child});

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

class _ExpandedSectionState extends State<ExpandedSection>
    with SingleTickerProviderStateMixin {
  late AnimationController expandController;
  late Animation<double> animation;

  @override
  void initState() {
    super.initState();
    prepareAnimations();
  }

  ///Setting up the animation
  void prepareAnimations() {
    expandController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    Animation<double> curve = CurvedAnimation(
      parent: expandController,
      curve: Curves.fastOutSlowIn,
    );
    animation = Tween(begin: 0.0, end: 1.0).animate(curve)
      ..addListener(() {
        setState(() {});
      });
  }

  @override
  void didUpdateWidget(ExpandedSection oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.expand) {
      expandController.forward();
    } else {
      expandController.reverse();
    }
  }

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

  @override
  Widget build(BuildContext context) {
    return SizeTransition(
        axisAlignment: 1.0, sizeFactor: animation, child: widget.child);
  }
}