children above title in ExpansionTile flutter

Question

I need to place the title of expansion tile in the bottom on expanding this is my code:

ExpansionTile(
        title: Text('Colors'),
        subtitle: Text('Expand this tile to see its contents'),
        // Contents
        children: [
          ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.blue,
              ),
              title: Text('Blue')),
          ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.red,
              ),
              title: Text('Red')),
          ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.amber,
              ),
              title: Text('Amber')),
          ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.pink,
              ),
              title: Text('Pink')),
          ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.green,
              ),
              title: Text('Green')),
        ],
      ),

and this is the result

and this is what im trying to do

Answer 1

That's just not how the expansion tile was designed. :-)

But you can make your own Expansion Tile.

Just as an example, I kinda misused the ExpansionTile widget. You can do it more elegantly by completely designing it withput using ExpansionTile within, but at least it shows how you can do it quite quickly.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: UpsideDownExpansionTile(),
        ),
      ),
    );
  }
}

class UpsideDownExpansionTile extends StatefulWidget {
  @override
  createState() => _UpsideDownExpansionTileState();
}

class _UpsideDownExpansionTileState extends State<UpsideDownExpansionTile> {
  bool expanded = false;
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      if (expanded) ...[
        ListTile(
            leading: CircleAvatar(
              backgroundColor: Colors.blue,
            ),
            title: Text('Blue')),
        ListTile(
            leading: CircleAvatar(
              backgroundColor: Colors.red,
            ),
            title: Text('Red')),
        ListTile(
            leading: CircleAvatar(
              backgroundColor: Colors.amber,
            ),
            title: Text('Amber')),
        ListTile(
            leading: CircleAvatar(
              backgroundColor: Colors.pink,
            ),
            title: Text('Pink')),
        ListTile(
            leading: CircleAvatar(
              backgroundColor: Colors.green,
            ),
            title: Text('Green')),
      ],
      ExpansionTile(
        title: Text('Colors'),
        subtitle: Text('Expand this tile to see its contents'),
        onExpansionChanged: (newExpanded) {
          setState(() {
            expanded = newExpanded;
          });
        },
        // Contents
        children: [],
      )
    ]);
  }
}

Explanation: The ExpansionTile is just there for the little arrow widget on the right side. It triggers a function on every change. Within this function we set expanded to true or false. And according to this variable, the ListTiles with the colors are either shown or not.