DEdvalson
DEdvalson

Reputation: 11

How to Use FittedBox and still use Text softWrap

Using a Text widget with SoftWrap no longer works if the Text widget is a child of a FittedBox. I can see why this could be happening since the constraints to the Text widget would be modified by the FittedBox. I am hoping to be able to use both at once.

Here is a test program that demonstrates the problem:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fitted Box Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Fitted Box Test'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: const Text('Fitted Box Test'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    const Text('W/O FittedBox (GOOD)'),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black),
                          color: Colors.lightGreen),
                      child: const Center(
                        child: Text(
                          'Short Text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    const Text('With FittedBox (GOOD'),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black),
                          color: Colors.lightGreen),
                      child: const FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Text(
                          'Short Text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    const Text('W/O FittedBox (GOOD)'),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black),
                          color: Colors.lightGreen),
                      child: const Center(
                        child: Text(
                          'verbose longer text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    const Text('With FittedBox (BAD)\nShould use two lines'),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black), color: Colors.pink),
                      child: const FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Text(
                          'Verbose Longer Text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Column(
                  children: [
                    const Text('W/O FittedBox (BAD)\nLoses a line', textAlign: TextAlign.center),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(
                            width: 2.0,
                            color: Colors.black,
                          ),
                          color: Colors.pink),
                      child: const Center(
                        child: Text('Really Really Really Over Verbose Text',
                            softWrap: true, textAlign: TextAlign.center, maxLines: 4),
                      ),
                    ),
                  ],
                ),
                Column(
                  children: [
                    const Text(
                      'With FittedBox (BAD)\nShould use more lines',
                      textAlign: TextAlign.center,
                    ),
                    Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                          border: Border.all(width: 2.0, color: Colors.black), color: Colors.pink),
                      child: const FittedBox(
                        fit: BoxFit.scaleDown,
                        child: Text(
                          'Really Really Really Over Verbose Text',
                          softWrap: true,
                          textAlign: TextAlign.center,
                          maxLines: 4,
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Here is a screen shot of the result:

screenshot

Upvotes: 1

Views: 577

Answers (0)

Related Questions