My ConstrainedBox does not maintain the minimum size dimension

Question

I get a box with a card and centered text but when I decrease the size of the window my card disappears and my text overflows. I get an overflow error when the box gets smaller than the text.

I want the smallest box dimension to be 300x300 and the largest box to be 600x600 rather than shrinking indefinitely

Maybe adding a Singlechildscrollview is the best I can get. I still think there is a way to create a shrinking card up to a certain minimum dimension

        class TestConstrainedBox extends StatefulWidget {
  TestConstrainedBox({Key? key}) : super(key: key);

  @override
  State<TestConstrainedBox> createState() => _TestConstrainedBoxState();
}

class _TestConstrainedBoxState extends State<TestConstrainedBox> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title:Text("Test Constrained Box")),body: 
  SingleChildScrollView(child:
  Container(
      margin: const EdgeInsets.only(top:20.0, left: 20.0, right: 20.0, bottom:10.0),
      child:
      SizedBox.fromSize(size: const Size(450,450),
      //OverflowBox(minHeight:300,minWidth:300,
      //maxWidth:300, maxHeight: 300,
  child:ConstrainedBox(constraints: BoxConstraints(
    minWidth:300,
    minHeight:300,
    maxWidth:350,
    maxHeight:350,
    ),
    child:
    Card(child: 
    Column(mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children:[
      //SizedBox(width:350, height:350, child:
           Text('Hello World!')
           //)
           ]))
  
))
     )
    )
    );
  }
}

Ruchit · Answer 1 · 2023-06-26T06:07:39.097

As per official SizedBox documentation:

If given a child, this widget forces it to have a specific width and/or height. These values will be ignored if this widget's parent does not permit them.

For example, this happens if the parent is the screen (forces the child to be the same size as the parent), or another SizedBox (forces its child to have a specific width and/or height). This can be remedied by wrapping the child SizedBox in a widget that does permit it to be any size up to the size of the parent, such as Center or Align.

so you have to either remove sizedBox or Wrap ConstrainedBox with center.

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(MaterialApp(
      home: TestConstrainedBox(),
    ));

class TestConstrainedBox extends StatefulWidget {
  TestConstrainedBox({Key? key}) : super(key: key);

  @override
  State<TestConstrainedBox> createState() => _TestConstrainedBoxState();
}

class _TestConstrainedBoxState extends State<TestConstrainedBox> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Test Constrained Box")),
      body: SingleChildScrollView(
        child: Container(
          margin: const EdgeInsets.only(
              top: 20.0, left: 20.0, right: 20.0, bottom: 10.0),
          child: SizedBox.fromSize(
            size: const Size(450, 450),
            //OverflowBox(minHeight:300,minWidth:300,
            //maxWidth:300, maxHeight: 300,
            child: Center(
              child: ConstrainedBox(
                constraints: BoxConstraints(
                  minWidth: 300,
                  minHeight: 300,
                  maxWidth: 350,
                  maxHeight: 350,
                ),
                child: Card(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      //SizedBox(width:350, height:350, child:
                      Text('Hello World!')
                      //)
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

My ConstrainedBox does not maintain the minimum size dimension

1 Answers1