custom_expansion_tile.dart

import 'dart:math';

import 'package:boxy/flex.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Expansion Tile Demo',
      theme: ThemeData.dark(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Expansion Tile Demo')),
      body: ListView(
        children: const [
          CustomExpansionTile(),
        ],
      ),
    );
  }
}

class CustomExpansionTile extends StatefulWidget {
  const CustomExpansionTile({Key? key}) : super(key: key);

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

class _CustomExpansionTileState extends State<CustomExpansionTile> {
  var open = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(32.0),
      padding: const EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        color: Colors.brown.shade800,
        borderRadius: BorderRadius.circular(16.0),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          BoxyRow(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Dominant.expanded(
                child: Padding(
                  padding: EdgeInsets.all(16.0),
                  child: Text(
                    'Leftside of the bed at the bottom with the sticker thing',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w900,
                      fontSize: 22.0,
                    ),
                  ),
                ),
              ),
              SizedBox(
                // This outer SizedBox is required because BoxyRow needs
                // to measure the intrinsic width of non-dominant children
                // before laying out an expanded dominant child, and
                // LayoutBuilder does not support intrinsics.
                width: 48,
                child: Material(
                  borderRadius: BorderRadius.circular(12.0),
                  color: Colors.brown.shade500,
                  clipBehavior: Clip.antiAlias,
                  child: InkWell(
                    child: LayoutBuilder(
                      builder: (context, constraints) {
                        return AnimatedContainer(
                          padding: const EdgeInsets.all(8.0),
                          height: open ? 48 : constraints.maxHeight,
                          duration: const Duration(milliseconds: 200),
                          transform: Matrix4.identity()
                            ..rotateZ(open ? -pi : 0),
                          transformAlignment: Alignment.center,
                          child: const Icon(Icons.keyboard_arrow_down),
                        );
                      },
                    ),
                    onTap: () {
                      setState(() {
                        open = !open;
                      });
                    },
                  ),
                ),
              ),
            ],
          ),
          AnimatedCrossFade(
            crossFadeState:
                open ? CrossFadeState.showFirst : CrossFadeState.showSecond,
            duration: const Duration(milliseconds: 200),
            firstChild: const Padding(
              padding: EdgeInsets.only(left: 16.0, bottom: 16.0, right: 16.0),
              child: Text(
                'This is mostly filled with junk from ye olden days. ah quite '
                'the remembrance. Open this to reminisce the past glory of '
                'McDonalds.',
                style: TextStyle(
                  fontSize: 19.0,
                ),
              ),
            ),
            secondChild: const SizedBox(),
          ),
        ],
      ),
    );
  }
}