How to fill the space between two text elements with dots in Flutter

user_13629859 0
Viewed 629

I am trying to show data like this:

Burger..........................$9.99
Steak and Potato...............$14.99
Mac and Cheese..................$6.99

How can I implement it in Flutter?

flutter-layout flutter
2 Answers

as an option

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: Home());
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Row(
        children: [
          Text('Burger'),
          Expanded(child: Text('.' * 100, maxLines: 1)),
          Text('\$9.99'),
        ],
      ),
    );
  }
}

enter image description here

user_150844200

I personally use fDottedLine package https://pub.dev/packages/fdottedline to draw a dotted line in any form.

 : Row(
    children: [
      Text('Burger'),
      FDottedLine(
        color: Colors.black,
        width: 160.0,
        strokeWidth: 2.0,
        dottedLength: 10.0,
        space: 2.0,
      ),
      Text('\$9.99'),
    ],
  ),

You have to give the dynamic widgth using MediaQuery

Output

user_34214860
Related