How to make the Wrap widget child inside SingleChildScrollView to expand to full height in Flutter?

Question

I'm trying to make a UI where there are some text fields inside a container and there are some icon buttons which are always going to stay at the bottom.

Here is the code minimal code

Center(
  child: Container(
    // width: 1006,
    constraints: BoxConstraints(
      maxWidth: 1006,
      maxHeight: sizingInformation.screenSize.height,
    ),
    margin: EdgeInsets.only(
      left: isMobile ? 0 : 34,
    ),
    child: Flex(
      direction: Axis.vertical,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      Flex(
      // rest of the widgets
      ),
      Expanded(
        child: Container(
          padding: EdgeInsets.all(isMobile ? 15 : 34),
          margin: EdgeInsets.only(
            top: isMobile ? 15 : 27,
          ),
          constraints: BoxConstraints(
            maxWidth: 1006,
          ),
          height: 750,
          decoration: BoxDecoration(
            color: CARD_DARK_PURPLE,
            borderRadius: BorderRadius.circular(8),
          ),
          child: SingleChildScrollView(
            physics: AlwaysScrollableScrollPhysics(),
            child: Wrap(
              direction: Axis.horizontal,
              children: <Widget>[
                Wrap(
                  direction: Axis.horizontal,
                  children: <Widget>[
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          "Pošiljalac",
                          style: TextStyle(
                            color: WHITE,
                            fontSize: isMobileTablet ? 22 : 24,
                            fontWeight: BOLD,
                          ),
                        ),
                        SizedBox(
                          height: 20,
                        ),
                        _phoneInfo(widget.order.senderPhoneNumber, isMobile),
                        _emailInfo(widget.order.senderEmail, isMobile),
                        _fullNameInfo(widget.order.senderFirstName,
                            widget.order.senderLastName, isMobile, isMobileTablet),
                        _addressInfo(widget.order.senderStreetNumber, isMobile),
                        _zipCodeInfo(widget.order.senderZipCode, isMobile),
                        _cityInfo(widget.order.senderCity, isMobile),
                        SizedBox(
                          height: isDesktopLaptop ? 14 : 0,
                        ),
                        _payeeInfo(isMobile,  isMobileTablet),
                      ],
                    ),
                    SizedBox(
                      width: 34,
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        SizedBox(
                          height: isDesktopLaptop ? 482 : 10,
                        ),
                        _weightInfo(isMobile,  isMobileTablet),
                        _noteSmall(isMobile,  isMobileTablet),
                      ],
                    ),
                  ],
                ),
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.end,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      SizedBox(height: 10),
                      Flex(
                        direction: Axis.horizontal,
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          SizedBox(width: 20),
                          Material(
                            color: DIVIDER,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(30),
                            ),
                            child: Center(
                              child: Ink(
                                decoration: const ShapeDecoration(
                                  color: DIVIDER,
                                  shape: CircleBorder(),
                                ),
                                child: IconButton(
                                  splashColor: DARK_PURPLE.withOpacity(0.3),
                                  icon: Image.asset(
                                    'assets/images/inter-note-icon.png',
                                    width: 20,
                                    height: 24,
                                  ),
                                  onPressed: () {
                                    if (widget.order.operatorNote == "/") {
                                      _dialogs.internNoteDialog(
                                          context,
                                          widget.order.id,
                                          "order",
                                          widget.order.operatorNote);
                                    } else {
                                      _dialogs.changeInternNoteDialog(
                                          context,
                                          widget.order.id,
                                          "order",
                                          widget.order.operatorNote);
                                    }
                                  },
                                ),
                              ),
                            ),
                          ),
                          SizedBox(width: 20),
                          Material(
                            color: DIVIDER,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(30),
                            ),
                            child: Center(
                              child: Ink(
                                decoration: const ShapeDecoration(
                                  color: DIVIDER,
                                  shape: CircleBorder(),
                                ),
                                child: IconButton(
                                  splashColor: DARK_PURPLE.withOpacity(0.3),
                                  icon: Image.asset(
                                    'assets/images/trash-icon.png',
                                    width: 28,
                                    height: 28,
                                  ),
                                  onPressed: () {
                                    _dialogs.deleteOrderDialog(
                                        context, widget.order.id, isMobile);
                                  },
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),  
    ),
  ),
)

This is the UI that I'm trying to achieve(the box highlighted on the right side specifically)

There is SingleChildScrollView parent which has Wrap as its child. SingleChildScrollView is taking the full height available but Wrap isn't spanning to that full height. I want to make the Wrap span full height so that the icons can stay at the bottom always.

So, I placed it inside Expanded as I thought it would make it expand to the full available height. But I got this error.

The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.

Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a _SingleChildViewport widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  Wrap ← Expanded ← _SingleChildViewport ← IgnorePointer-[GlobalKey#01401] ← Semantics ← _PointerListener ← Listener ← _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey<RawGestureDetectorState>#7427b] ← _PointerListener ← ⋯
When the exception was thrown, this was the stack
dart:sdk_internal 4461:11                                                 throw_
packages/flutter/src/widgets/widget_span.dart.lib.js 12339:23             <fn>
packages/flutter/src/widgets/widget_span.dart.lib.js 12355:24             [_updateParentData]
packages/flutter/src/widgets/widget_span.dart.lib.js 12372:61             attachRenderObject
packages/flutter/src/widgets/widget_span.dart.lib.js 12184:12             mount
...
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by widgets library ═══════════════════════════════════
Incorrect use of ParentDataWidget.
════════════════════════════════════════════════════════════════════════════════

So, Expanded is not the answer to this. But I don't know what else is. I'm new to Flutter and having a hard time understanding the Flutter layout system. Any help would be great. Thanks for your time.

Answer 1

What if you make your Wrap widget the child of a container the size of the screen ?

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
          child: Container(
              height: MediaQuery.of(context).size.height,
              width: MediaQuery.of(context).size.width,
              child: Wrap(
                children: [],
              ))),
    );
  }
}