Flutter - How to spread text on a line or dynamic letter spacing bsed on width of text or container?

322 Views Asked by At

I need to implement a design whereby two text of different length on two different lines have same letter spacing.

Example:

H   E   L    L   O
H EL L O W O R L D

You get the picture now.

So far I have done it using a Row and Row's MainAxisAlignment.spaceBetween property. However, how can I implement it using letterSpacing and maxLines=1?

Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: 'HELLO'
                      .characters
                      .map((e) => Text(e,
                          style: GoogleFonts.poppins(
                            fontSize: 30,
                            fontWeight: FontWeight.bold,
                          )))
                      .toList(),
                ),
Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: 'HELLO WORLD'
                      .characters
                      .map((e) => Text(e,
                          style: GoogleFonts.poppins(
                            fontSize: 30,
                            fontWeight: FontWeight.bold,
                          )))
                      .toList(),
                ),
1

There are 1 best solutions below

1
Devraj On

Try this

child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              FittedBox(
                fit: BoxFit.fitWidth,
              child: Text('Hello',),

              ),
            ],
          ),