How to shrink and expand a Wrap widget in Flutter? - flutter

Question

I would like to shrink and expand my Wrap widget when the size of the parent Container is increased or decreased. The fonts of the individual children should increase or decrease along with the size of the boxes. What is the best way to achieve this?
I have tried FittedBox (scaledDown) which reduces the sizes but then widget doesn't wrap at all (!) and all the children remain on one line.
This is the default behavious (if the Wrap widget is defined in a Container with a specific size).
Here is the code...
Widget _build(BuildContext context) {
var words = ["a", "abc", "de", "ef", "g", "i", "is", "s", "th"];
return new Scaffold(
body: Column(children: <Widget>[
Text('height 100'),
Container(
color: Colors.red,
height: 100.0,
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
children: _buildWordButtons(words),
),
),
Text('height 50'),
Container(
color: Colors.green,
height: 50.0,
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
children: _buildWordButtons(words),
),
),
Text('FittedBox, scaleDown, height 200'),
Container(
color: Colors.blue,
height: 200.0,
child: FittedBox(
fit: BoxFit.scaleDown,
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
children: _buildWordButtons(words),
),
),
),
]),
);
}
List<Widget> _buildWordButtons(List<String> words) {
var buttons = List<Widget>();
for (var word in words) {
buttons.add(Container(
decoration: new BoxDecoration(border: new Border.all(color: Colors.black)),
child: Text(
word,
style: TextStyle(fontSize: 50.0),
),
margin: EdgeInsets.all(5.0),
));
}
return buttons;
}

Answer 1

If you'd like to create a Text widget that will adapt to the size of its parent widget, you may want to look into LayoutBuilder widget. Using this widget should help its child widget determine its parent widget's constraints. Since you've mentioned that having a spacious Container should print long texts in a newline, you can have it set inside the LayoutBuilder.
Here's a sample. I've modified the code snippet provided.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final words = ["a", "abc", "de", "ef", "g", "i", "is", "s", "th"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(children: <Widget>[
Text('height 100'),
Container(
color: Colors.red,
height: 100.0,
child: adaptiveText(),
),
Text('height 50'),
Container(
color: Colors.green,
height: 50.0,
child: adaptiveText(),
),
Text('height 200'),
Container(
alignment: Alignment.center,
color: Colors.blue,
height: 200.0,
child: adaptiveText(),
),
]),
);
}
adaptiveText() {
return LayoutBuilder(
builder: (context, constraints) {
debugPrint('constraint maxHeight: ${constraints.maxHeight}');
// adapt Text widget if parent widget size is <= 100
if (constraints.maxHeight <= 100)
return FittedBox(
fit: BoxFit.scaleDown,
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
children: _buildWordButtons(words),
),
);
else
return Wrap(
alignment: WrapAlignment.spaceEvenly,
children: _buildWordButtons(words),
);
},
);
}
List<Widget> _buildWordButtons(List<String> words) {
var buttons = List<Widget>();
for (var word in words) {
buttons.add(Container(
decoration:
new BoxDecoration(border: new Border.all(color: Colors.black)),
child: Text(
word,
style: TextStyle(fontSize: 50.0),
maxLines: 3,
),
margin: EdgeInsets.all(5.0),
));
}
return buttons;
}
}
Demo