Usare le DataTable in Flutter

Il widget DataTable ci permette di visualizzare i dati in forma tabellare in Flutter.

Può essere molto comodo, soprattutto se sviluppiamo app multipiattaforma.

Magari su device mobile mostriamo una lista, in altri ambiti la tabella.

Qui sotto un esempio di codice in vi metto anche l'ordinamento (sulle prime due colonne), e un pò di stile a casaccio:

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 Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

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

class _MyHomePageState extends State<MyHomePage> {
  int _currentSortColumn = 0;
  bool _isSortAsc = true;

  List<Map> _libri = [
    {'id': 1, 'titolo': 'Flutter Basics', 'autore': 'David John'},
    {'id': 2, 'titolo': 'Git and GitHub', 'autore': 'Merlin Nick'},
    {'id': 3, 'titolo': 'Flutter Basics', 'autore': 'David John'},
  ];

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

  List<DataColumn> _createColumns() {
    return [
      DataColumn(
        label: Text('ID'),
        onSort: (columnIndex, _) {
          setState(() {
            _currentSortColumn = columnIndex;
            if (_isSortAsc) {
              _libri.sort((a, b) => b['id'].compareTo(a['id']));
            } else {
              _libri.sort((a, b) => a['id'].compareTo(b['id']));
            }
            _isSortAsc = !_isSortAsc;
          });
        },
      ),
      DataColumn(
        label: const Text('Libri'),
        onSort: (columnIndex, _) {
          setState(() {
            _currentSortColumn = columnIndex;
            if (_isSortAsc) {
              _libri.sort((a, b) => b['titolo'].compareTo(a['titolo']));
            } else {
              _libri.sort((a, b) => a['titolo'].compareTo(b['titolo']));
            }
            _isSortAsc = !_isSortAsc;
          });
        },
      ),
      const DataColumn(label: Text('Autore'))
    ];
  }

  List<DataRow> _createRows() {
    return _libri
        .map(
          (b) => DataRow(
            cells: [
              DataCell(Text(b['id'].toString())),
              DataCell(Text(b['titolo'])),
              DataCell(Text(b['autore']))
            ],
          ),
        )
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter test'),
      ),
      body: ListView(
        children: [
          DataTable(
            columns: _createColumns(),
            rows: _createRows(),
            sortColumnIndex: _currentSortColumn,
            sortAscending: _isSortAsc,
            showBottomBorder: true,
            headingTextStyle: const TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
            headingRowColor: MaterialStateProperty.resolveWith(
              (states) => Colors.black,
            ),
          ),
        ],
      ),
    );
  }
}

Enjoy!