Align a text in Flutter to make a restaurant menu-CodePudding

I'm trying to make a menu for a reastaurant like this one: enter image description here

I'm using Flutter and this is my code:

 return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ListTile(
          title: Row(
            children: [
              Expanded(child: Text( text, style: style, )),
              const SizedBox( width: 15 ),
              Text( '\$ $price', style: style,),
            ],
          ),
        ),
        Divider( color: Colors.white.withOpacity( 0.5 ),),
      ],
    );

But this is the result that I'm getting: enter image description here Please, any help will be welcome. And thanks in advance.

CodePudding user response：

The result that you want to achieve can be done just by using the row widget, you don't have to wrap it up with ListTile. I am writing the code snippet of Row widget for you. You can copy paste it and it will work. Additionally I see that you are generating it in the column widget. If you have a dynamic array then I suggest that you use ListView Divider instead. It will have a divider to add between your rows as well. You can find more about it on flutter official documentation.

 Row(
children:[
//You may add some padding to Text for better looking UI. 
   Text("Chicken Masala"),
   Expanded(child:Divider()),
   Text("180")
])

Just replace your column's children with this row and you will be able to see it.

CodePudding user response：

I solved your issue like this:

Output of your issue :}

body: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      ListTile(
        title: Row(
          children: [
            const Text(
              'Cheese Burger',
            ),
            Expanded(child: Text('.' * 100, maxLines: 1)),
            const Text(
              '\$ 10',
            ),
          ],
        ),
      ),
      const SizedBox(
        height: 10,
      ),
      ListTile(
        title: Row(
          children: [
            const Text(
              'Chicken Masala Soup',
            ),
            Expanded(child: Text('.' * 100, maxLines: 1)),
            const Text(
              '\$ 10',
            ),
          ],
        ),
      ),
    ],
  ),