Question 77684 in Flutter Question posted in
The official Flutter documentation can be found here.

Align a text in Flutter to make a restaurant menu

I’m trying to make a menu for a reastaurant like this one : –

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 : –

Please, any help will be welcome.
And thanks in advance.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    @Ramji, @Dhruvil Patel, I try your code and it work fine, but it was making an overflow when the text was long, so I made some changes in your example and I got what I was looking for. Thanks a lot for you help. Here is what I dit.

    return SizedBox(
      width: double.infinity,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
            Row(
              children: [
                Expanded( child: Text( text, style: style, maxLines: 2, overflow: TextOverflow.ellipsis, ) ),
              ],),
            Row(
              children: [
                Expanded(
                  child: Text( 
                    '.' * 150, 
                    style: style, 
                    maxLines: 1, 
                    overflow: TextOverflow.fade,)),
                SizedBox(
                  width: 80,
                  child: Text( 
                    '$ $price', 
                    style: style,
                    textAlign: TextAlign.right,)),
              ],
            ),
            
          // Divider( color: Colors.white.withOpacity( 0.5 ),),
        ],
      ),
    );

    enter image description here


  2. 0

    I solved your issue like this:

    Output of your issue : –

    enter image description here

    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',
            ),
          ],
        ),
      ),
    ],
  ),
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search