I have children widgets in a Wrap
widget.
class TestWidget extends StatefulWidget {
const TestWidget({super.key});
@override
State<TestWidget> createState() => _TestWidgetState();
}
class _TestWidgetState extends State<TestWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Test'),
),
body: Container(
color: Colors.red,
child: SizedBox.square(
// dimension: 100,
dimension: MediaQuery.of(context).size.width,
// child: FittedBox(
child: Container(
child: Wrap(
children: [
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
],
),
),
),
),
);
}
}
Now the red square need to be smaller because of other dynamic widgets but I want to keep the items Wrap
ped layout the same, just downscale. I used FittedBox
But it does not work, layout changes to inline, not wrapped anymore
class _TestWidgetState extends State<TestWidget> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Test'),
),
body: Row(
children: [
Expanded(
child: Container(
color: Colors.red,
child: AspectRatio(
// dimension: 100,
aspectRatio: 1,
child: FittedBox(
// child: Container(
child: Wrap(
children: [
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
FlutterLogo(size: 100),
],
),
),
),
),
),
Text("Something else"),
],
),
);
}
}
2
Answers
use EXPANDED widget instead of FITTEDBOX widget.
If you are trying to make the red container dynamically fill the space under the wrap widget, not to have a static dimensions, Look at the following widget:
Result:
Hope it helps you.