Reputation: 11
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:
Upvotes: 1
Views: 577