Flutter: How to create a list with 3 times in a row in flutter?

Question

how can I create a list with 3 items in a row in a list tile like the image below?

Answer 1

You are essentially looking at a table, so use a Table widget:

import 'package:flutter/material.dart';

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

class Item {
  final String name;
  final int price;
  final Icon icon;

  Item(this.name, this.price, this.icon);
}

class MyApp extends StatelessWidget {
  final List<Item> items = [
    Item("chicken", 385, Icon(Icons.delete)),
    Item("fruits", 100, Icon(Icons.delete)),
    Item("vegetables", 200, Icon(Icons.delete)),
    Item("milk", 50, Icon(Icons.delete)),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Table Example'),
        ),
        body: Center(
          child: Table(
            border: TableBorder(
              horizontalInside: BorderSide(
                color: Colors.black,
                style: BorderStyle.solid,
                width: 1.0,
              ),
            ),
            children: items.map((item) {
              return TableRow(
                children: [
                  TableCell(child: Text(item.name)),
                  TableCell(child: Text(item.price.toString())),
                  TableCell(child: item.icon),
                ],
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

See also

• How to create table like ui in flutter

Answer 2

As per your question, if you are using "listTile" widget, then there's 3 parameters : leading, title and trailing widgets. Refer ListTile. Or else, you can use Table widget; or you can use:

    Row(
children:[
Text(),
Text(),
Icon(),
]);

instead of ListTile, as children of ListView.