CODEWITHSUNDEEP
textflutterfitted-box
Figen Güngör
Figen Güngör

Reputation: 12559

FittedBox and Text whitespace issue

I'm trying to make all Text(length varies) in a fixed width box to fit and I want them to look at the same size as the longest word's size when FittedBox applied. So What I'm doing to achieve that is filling the rest of the word with empty space to match the length to the longest word. But that doesn't quite work as you see in the following image:

enter image description here

Here is the code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        '/': (context) => HomePage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  final String padding = " " * 5;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Container(
          color: Colors.red,
          height: 100.0,
          width: 100.0,
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Center(
                child: FittedBox(
                  fit: BoxFit.scaleDown,
                  child: Text(
                    "${padding}Demo$padding",
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.black),
                  ),
                ),
              ),
              Icon(Icons.mic, size: 24.0),
            ],
          ),
        ),
      ),
    );
  }
}

Do you have any idea what is the issue here?

Upvotes: 2

Views: 1035

Answers (1)

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29458

It's really strange, but it seems to work correctly if you remove alignment or set it to start. (What cause this bug - I still don't know)

child: Text('${padding}Demo$padding',
  style: TextStyle(color: Colors.black, decoration: TextDecoration.underline),)

I've added decoration to see these spaces

Upvotes: 1

Related Questions