skip to Main Content

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

enter image description here

2

Answers


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

    enter image description here

    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

    Login or Signup to reply.
  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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search