Flutter custom layout, decide widget's size based on its child
This should resolve your issue. We remove the constraints passed down by using the UnconstrainedBox
. We only need to remove the vertical so that the AspectRatio
uses the width constraint. Then we ask the sub-tree to be sized by its intrinsic size. This is, of course, now easy to overflow because it will never wrap and will always use its intrinsic width. However you can wrap the UnconstrainedBox
in a FittedBox
and it will never overflow and instead scale to fit a parent that might be smaller than it's intrinsic dimension. You might also want to try setting the axis parameter on the UnconstrainedBox
to horizontal. Then the IntrinsicWidth will be constrained to the parent width.
import 'package:flutter/material.dart';class AppRoot extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', // Appears in app switcher theme: ThemeData( primaryColor: Colors.grey.shade300, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyPage(), ); }}class MyPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( color: Colors.yellow, child: UnconstrainedBox( child: IntrinsicWidth( child: Container( color: Colors.blue, child: AspectRatio( aspectRatio: 1, child: Text( "I want to be in a tight square.", style: TextStyle(backgroundColor: Colors.red), ), ), ), ), ), ), ), ); }}void main() { runApp(AppRoot());}