expandable wrong

main.dart

import 'package:flutter/material.dart';

final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);

const double COLUMN_WIDTH = 150;
const double COLUMN_WIDTH_EXPANDED = COLUMN_WIDTH;
const double COLUMN_WIDTH_TOTAL_EXPANDED = COLUMN_WIDTH + COLUMN_WIDTH_EXPANDED;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
            child: Container(
                height: 300,
                child: ListView(scrollDirection: Axis.horizontal, children: [
                  ExpandableColumn(
                    title: "Expand",
                    child: Container(width: COLUMN_WIDTH, color: Colors.blue),
                    expandedChild: Container(
                        width: COLUMN_WIDTH_EXPANDED, color: Colors.red),
                    expanded: false,
                  ),
                  ExpandableColumn(
                    title: "Expand",
                    child: Container(width: COLUMN_WIDTH, color: Colors.green),
                    expandedChild: Container(
                        width: COLUMN_WIDTH_EXPANDED, color: Colors.purple),
                    expanded: false,
                  ),
                ]))),
      ),
    );
  }
}

class ExpandableColumn extends StatefulWidget {
  const ExpandableColumn(
      {Key key,
      this.title,
      @required this.child,
      this.expandedChild,
      this.onExpand,
      this.expanded})
      : super(key: key);
  final Widget child;
  final Widget expandedChild;
  final Function onExpand;
  final String title;
  final bool expanded;

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

class ExpandableColumnState extends State<ExpandableColumn>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
  Function onExpand;
  bool expanded;
  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  void initState() {
    super.initState();
    onExpand = widget.onExpand;
    expanded = widget.expanded;
    _controller = AnimationController(
      duration: const Duration(seconds: 4),
      vsync: this,
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.fastOutSlowIn,
    );
  }

  updateExpansion() {
    if (expanded) {
      _controller.forward();
    } else {
      _controller.reverse();
    }
  }

  onPressed() {
    expanded = !expanded;
    updateExpansion();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Align(
        alignment: Alignment.topLeft,
        child: Container(
            child: Column(children: [
          ExpandableListTitle(
            title: widget.title,
            expanded: expanded,
            onPress: onPressed,
            // onPress: () => {
            //   setState(() {
            //     expanded != null ? expanded = !expanded : expanded = true;
            //     updateExpansion();
            //     if (onExpand != null) onExpand(expanded);
            //   })
            // },
          ),
          Expanded(
              child: Container(
            child: Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Container(
                width: COLUMN_WIDTH,
                child: widget.child,
              ),
              SizeTransition(
                  sizeFactor: _animation,
                  axis: Axis.horizontal,
                  axisAlignment: -1,
                  child: Container(
                      width: COLUMN_WIDTH, child: widget.expandedChild))
            ]),
          ))
        ])));
  }
}

class ExpandableListTitle extends StatefulWidget {
  const ExpandableListTitle({
    Key key,
    this.title,
    this.expanded,
    this.onPress,
  }) : super(key: key);
  final String title;
  final bool expanded;
  final Function onPress;
  @override
  _ExpandableListTitleState createState() => _ExpandableListTitleState();
}

class _ExpandableListTitleState extends State<ExpandableListTitle> {
  // bool expanded;
  // Function onPress;
  // String title;
  // @override
  // void initState() {
  //   super.initState();
  //   expanded = widget.expanded;
  //   onPress = widget.onPress;
  //   title = widget.title;
  // }

  @override
  Widget build(BuildContext context) {
    return Container(
      //width: widget.expanded ? 300 : 150,
      child: GestureDetector(
        behavior: HitTestBehavior.opaque,
        // onTap: () =>
        //     onPress != null ? onPress() : print('ExpandableListTitle tap'),
        onTap: widget.onPress,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              child: Container(
                margin: const EdgeInsets.only(left: 12, top: 15),
                child: Text(this.widget.title,
                    style: const TextStyle(
                        fontSize: 20,
                        fontWeight: FontWeight.w700,
                        fontFamily: 'Roboto',
                        color: Colors.white)),
              ),
            ),
            Container(width: widget.expanded ? 150 : 0),
            Container(
              child: Container(
                margin: const EdgeInsets.only(right: 7, top: 15),
                child: widget.expanded != null && widget.expanded
                    ? const Icon(Icons.arrow_back_ios_outlined,
                        color: Colors.grey)
                    : const Icon(Icons.arrow_forward_ios, color: Colors.grey),
              ),
            ),
          ],
        ),
      ),
    );
  }
}