Flutter Container's children disappear when box decoration contains borderRadius.only & border

Viewed 27

Having an issue where the children of my Container disappear when the box decoration contains both borderRadius.only & Border.

This is the exception I get:

The following assertion was thrown during paint():
A borderRadius can only be given for a uniform Border.

Any other suggestions to achieve what I am doing would be helpful.

Img Test

As per flutter inspector the content does not get pushed away but seems to not be painted. Img 2

Trying to render a top border line here: Img 3

Container(
          padding: EdgeInsets.symmetric(horizontal: 10.w),
          child: Container(
            padding: EdgeInsets.all(15.sp),
            decoration: BoxDecoration(
              color: Theme.of(context).colorScheme.onPrimary,
              // Trying to render this. 
             //Removing either this or the border radius allows content to be painted.
              border: const Border(
                  top: BorderSide(
                width: 1,
                color: Colors.red,
              )),
              boxShadow: [
                //BOTTOM
                BoxShadow(
                  blurRadius: 2.r,
                  color: Theme.of(context).colorScheme.shadow.withAlpha(2),
                  offset: Offset(0, 4.sp),
                ),
                //LEFT
                BoxShadow(
                  blurRadius: 2.r,
                  color: Theme.of(context).colorScheme.shadow.withAlpha(2),
                  offset: Offset(-2.sp, 4),
                ),
                //RIGHT
                BoxShadow(
                  blurRadius: 2.r,
                  color: Theme.of(context).colorScheme.shadow.withAlpha(2),
                  offset: Offset(2.sp, 4),
                ),
              ],
              //Removing either this or the border allows content to be painted.
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(15.r),
                bottomRight: Radius.circular(15.r),
              ),
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                BlocBuilder<SiteBloc, SiteState>(
                  builder: (context, state) {
                    bool mqttLive = state.mqtt.isLive;

                    List<ActionButton> actionButtons =
                        state.combo.hotBarInfo.map((e) {
                      return ActionButton(
                        isCurrentlyActive: mqttLive ? e.isActive : false,
                        disabledText: Theme.of(context).colorScheme.tertiary,
                        disabledIcon: Theme.of(context)
                            .colorScheme
                            .surfaceTint
                            .withAlpha(50),
                        profileIndex: e.profileIdx,
                        buttonName: e.name,
                        icon: e.icon,
                        colour: e.colour,
                        allowPress: state.mqtt.isLive,
                        isDisarmButton: e.isDisarmButton,
                      );
                    }).toList();
                    // actionButtons.add(const MoreButton());

                    return Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: actionButtons,
                    );
                  },
                ),
              ],
            ),
          ),
        ),`
1 Answers

Here is a solution I came up with, Although not that I like it very much.

enter image description here

Container(
          padding: EdgeInsets.symmetric(horizontal: 10.w),
          child: Stack(
            ///A container cannot have an uniform border & have borderRadius
            ///applied, this is a solution.
            children: [
              Container(
                height: 1.sp,
                width: double.infinity,
                color: Theme.of(context).colorScheme.surfaceTint.withAlpha(350),
              ),
              Container(
                padding: EdgeInsets.all(15.sp),
                decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.onPrimary,
                  boxShadow: [
                    //BOTTOM
                    BoxShadow(
                      blurRadius: 2.r,
                      color: Theme.of(context).colorScheme.shadow.withAlpha(2),
                      offset: Offset(0, 4.sp),
                    ),
                    //LEFT
                    BoxShadow(
                      blurRadius: 2.r,
                      color: Theme.of(context).colorScheme.shadow.withAlpha(2),
                      offset: Offset(-2.sp, 4),
                    ),
                    //RIGHT
                    BoxShadow(
                      blurRadius: 2.r,
                      color: Theme.of(context).colorScheme.shadow.withAlpha(2),
                      offset: Offset(2.sp, 4),
                    ),
                  ],
                  borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(15.r),
                    bottomRight: Radius.circular(15.r),
                  ),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    BlocBuilder<SiteBloc, SiteState>(
                      builder: (context, state) {
                        bool mqttLive = state.mqtt.isLive;

                        List<ActionButton> actionButtons =
                            state.combo.hotBarInfo.map((e) {
                          return ActionButton(
                            isCurrentlyActive: mqttLive ? e.isActive : false,
                            disabledText:
                                Theme.of(context).colorScheme.tertiary,
                            disabledIcon: Theme.of(context)
                                .colorScheme
                                .surfaceTint
                                .withAlpha(50),
                            profileIndex: e.profileIdx,
                            buttonName: e.name,
                            icon: e.icon,
                            colour: e.colour,
                            allowPress: state.mqtt.isLive,
                            isDisarmButton: e.isDisarmButton,
                          );
                        }).toList();
                        // actionButtons.add(const MoreButton());

                        return Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: actionButtons,
                        );
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
Related