Flutter custom layout, decide widget's size based on its child Flutter custom layout, decide widget's size based on its child dart dart

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());}