(Flutter) DataTable 行的 DataCell 内的水平 ListView.Builder

Question

I should say that I always have issues with getting ListViews inside columns, rows, etc. without getting tons of errors and having to really find workarounds. I've searched for this one and cannot find a solution that works.

I'm trying to put a ListView.builder inside each DataCell of a DataTable. Here is an example I made up.

I have tried so many different things - putting the ListView in a Container with set width / height, putting it in Flexible, putting it in a Column / Row, and on and on and on. I've also tried all kinds of variations of the properties within the ListView.builder (ie shrinkWrap on and off, physics and no physics, etc.), and each one gives me new errors and none of them work.

  Widget build(BuildContext context) {
List<DataRow> _testRows = [
  DataRow(
    cells: [
      DataCell(
        ListView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemCount: 3,
          scrollDirection: Axis.horizontal,
          itemBuilder: (BuildContext context, int index) {
            return Text(index.toString());
          },
        ),
      ),
      DataCell(
        Text('Data B'),
      ),
      DataCell(
        Text('Data C'),
      ),
    ],
  ),
];

return Scaffold(
  body: DataTable(
    columns: const <DataColumn>[
      DataColumn(
        label: Text('Column A'),
      ),
      DataColumn(
        label: Text('Column B'),
      ),
      DataColumn(
        label: Text('Column C'),
      ),
    ],
    rows: _testRows,
  ),
);

}

Answer 1

You can copy paste run full code below
In this case, you can use function _testRows() and wrap ListView with Container and set width
code snippet

 List<DataRow> _testRows() {
    return [
      DataRow(
        cells: [
          DataCell(
            Container(
              width: 100,
              child: ListView.builder(

working demo

full code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<DataRow> _testRows() {
    return [
      DataRow(
        cells: [
          DataCell(
            Container(
              width: 100,
              child: ListView.builder(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                itemCount: 3,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  return Text(index.toString());
                },
              ),
            ),
          ),
          DataCell(
            Text('Data B'),
          ),
          DataCell(
            Text('Data C'),
          ),
        ],
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: DataTable(columns: const <DataColumn>[
          DataColumn(
            label: Text('Column A'),
          ),
          DataColumn(
            label: Text('Column B'),
          ),
          DataColumn(
            label: Text('Column C'),
          ),
        ], rows: _testRows()),
      ),
    );
  }
}