Usare le ExpansionTile in Flutter

L'ExpansionTile è un widget per Flutter che in pratica ci permette di nascondere una parte del contenuto da mostrare al click sulla freccetta.

Per chi sviluppa per il web, lo possiamo accomunare ad un accordion.

In questo articolo vediamo come usarlo insieme ad una ListView.

Non ci sono pacchetti esterni da installare:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Map<String, dynamic>> _items = List.generate(
    50,
    (index) => {
      "id": index,
      "title": "Item $index",
      "content": "Contenuto dell'item con indice $index",
    },
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (_, index) {
          final item = _items[index];
          return Card(
            key: PageStorageKey(item['id']),
            child: ExpansionTile(
              controlAffinity: ListTileControlAffinity.leading,
              childrenPadding:
                  const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
              expandedCrossAxisAlignment: CrossAxisAlignment.end,
              maintainState: true,
              title: Text(
                item['title'],
                style: const TextStyle(
                    color: Colors.amber,
                    fontSize: 15.0,
                    fontWeight: FontWeight.bold),
              ),
              children: [
                Text(item['content']),
              ],
            ),
          );
        },
      ),
    );
  }
}

Enjoy!