¿Cómo crear una tabla de desplazamiento horizontal con columna fija en Flutter?

Esta es la respuesta más completa que te podemos compartir, sin embargo obsérvala pausadamente y analiza si se puede adaptar a tu proyecto.

Solución:

Aquí hay un ejemplo rápido y este sería el resultado: Video

List _buildCells(int count) 
  return List.generate(
    count,
    (index) => Container(
      alignment: Alignment.center,
      width: 120.0,
      height: 60.0,
      color: Colors.white,
      margin: EdgeInsets.all(4.0),
      child: Text("$index + 1", style: Theme.of(context).textTheme.title),
    ),
  );


List _buildRows(int count) 
  return List.generate(
    count,
    (index) => Row(
      children: _buildCells(10),
    ),
  );


@override
Widget build(BuildContext context) 
  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: _buildCells(20),
          ),
          Flexible(
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: _buildRows(20),
              ),
            ),
          )
        ],
      ),
    ),
  );

Así que traté de producir un código de trabajo mínimo y terminé con una solución viable (incluso si no se solucionan todos los detalles, como que la primera columna bloqueada tiene un ancho flexible en lugar de un ancho fijo como se desea). Esperemos que esto ayude a otros que intentan producir algo similar. Lo que es interesante es que aquí se necesita la construcción Table, porque reemplazar TableRow (envuelto por Table) con solo una Fila provoca un error de desbordamiento. Todavía me interesaría entender por qué, ya que parece crucial para el motor de diseño.

@override
  Widget build(BuildContext context) 
    return ListView(
      padding: EdgeInsets.all(5.0),
      children: [
        Table(
          children: [
            TableRow(
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    // first locked column items
                  ],
                ),
                SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          // table header items
                        ],
                      ),
                      Row(
                        children: [
                          // data cells
                        ],
                      ),
                      Row(
                        children: [
                          // data cells
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ],
    );
  

Sección de Reseñas y Valoraciones

Acuérdate de que tienes autorización de valorar este post si te fue de ayuda.

---

---

Utiliza Nuestro Buscador