skip to Main Content

I applied Transform.scale, but the aspect ratio is broken and the buttons are popping out. I want to know how to scale all child widgets without breaking them.

I’ve tried setting the width and height on the Container, and I’ve tried to warp with AspectRatio on it. But it always broken when I changed the size of Chrome.

Added, edited

I want to fit the screen. Base size is 590×750.
When I changed to lower than base size, it breaks.

class TestApp extends StatelessWidget {
  const TestApp({super.key});

  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  const TestPage({super.key});

  @override 
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    var width = screenSize.width;
    var height = screenSize.height;
    var scaleW = width / 590;
    var scaleH = height / 750;
    var scaleFit = scaleW < scaleH ? scaleW : scaleH;
    scaleFit *= 0.8; //scale for test
    print('$width, $height, $scaleW, $scaleH, $scaleFit');

    return Stack(
      children: [
        FilledBox(text: 'screen', color: Colors.white,),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: Align(
            alignment: Alignment.center,
            child: Transform.scale(
              scale: scaleFit,
              child: TestMenu(),
            ),
          ),
        ),
      ],
    );
  }
}

class FilledBox extends StatelessWidget {
  const FilledBox({ super.key, required this.text, required this.color });
  final Color color;
  final String text;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) { 
        var w = constraints.maxWidth;
        var h = constraints.maxHeight;
        return Container(
          width: w,
          height: h,
          color: color,
          child: Text('$text $w,$h', style: TextStyle(color: Colors.black, fontSize: 30, fontWeight: FontWeight.bold, decoration: TextDecoration.none),),
        );
      },
    );
  }
}


class TestMenu extends StatelessWidget {
  const TestMenu({super.key});

  @override 
  Widget build(BuildContext context) {
    return Container(
      width: 590, 
      height: 750, 
      color: Colors.black.withOpacity(0.2),
      child: 
      //FilledBox(color: Colors.cyan,),
      Dialog(),
    );
  }
}

class Dialog extends StatelessWidget {
  const Dialog({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        
        SizedBox(
          width: 590, 
          height: 660, 
          child: FilledBox(text: 'dialog', color: Colors.green,),
        ),
    
        SizedBox(
          width: 590, 
          height: 90, 
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
    
              IconButton(
                onPressed: (){ }, 
                padding: EdgeInsets.zero, 
                icon: SizedBox(width: 190, height: 90, child: FilledBox(text:'bt', color: Colors.blue,),),
              ),
    
              IconButton(
                onPressed: (){ }, 
                padding: EdgeInsets.zero, 
                icon: SizedBox(width: 190, height: 90, child: FilledBox(text:'bt', color: Colors.orange,),),
              ),
    
              IconButton(
                onPressed: (){ }, 
                padding: EdgeInsets.zero, 
                icon: SizedBox(width: 190, height: 90, child: FilledBox(text:'bt', color: Colors.blue,),),
              ),
    
            ],
          ),
        ),
    
      ],
    );
  }
}

Added2

If screen size is more than my setting is OK.
[1]: https://i.sstatic.net/65lrOZXB.png

If screen size is less than my setting is not OK.
[2]: https://i.sstatic.net/WSCi5bwX.png

2

Answers


  1. Chosen as BEST ANSWER

    I found the OverflowBox. I wrapped the widget with Overflowbox. And my problem was solved.

    class TestMenu extends StatelessWidget {
      const TestMenu({super.key});
    
      @override 
      Widget build(BuildContext context) {
        return OverflowBox(
          maxWidth: 590,
          maxHeight: 750,
          child: Container(
            width: 590, height: 750, 
            color: Colors.black.withOpacity(0.2),
            child: Dialog(),
          ),
        );
      }
    }
    

    I think I asked the wrong question. Because it was a screen size and overflow issue, not a scale issue.


  2. You can easily use ScaleTransition Widget, which is provided by Flutter itself.

    Check this out to get to know scaleTransition

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search