skip to Main Content

I have children widgets in a Wrap widget.

enter image description here

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 Wrapped 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"),
        ],
      ),
    );
  }
}

enter image description here

2

Answers


  1. use EXPANDED widget instead of FITTEDBOX widget.

    Login or Signup to reply.
  2. 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:

    body: Container(
      color: Colors.red,
       child: Row(
      children: [
        Flexible(
        child: Wrap(
           children: [
            FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
                FlutterLogo(size: 100),
           ],
        ),
      )
      ],
    )
    )
    

    Result:

    enter image description here

    Hope it helps you.

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