skip to Main Content

I want to create a widget that looks like this:
Desired widget
I have this code:

Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Container(
      decoration: BoxDecoration(
        color: theme.cardColor,
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
          BoxShadow(
            color: theme.shadowColor,
            blurRadius: 5,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Padding(
                padding: EdgeInsets.all(10),
                child: Text(
                  widget.title,
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: theme.accentColor,
                  ),
                ),
              ),
            ],
          ),
          Row(
            children: [
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 15),
                child: Text(
                  "Alarm Date: " + widget.alarmDate.toString(),
                  style: TextStyle(
                    fontSize: 16,
                    color: theme.textTheme.bodyText1?.color,
                  ),
                ),
              ),
              Spacer(),
              Switch(
                value: _isToggled,
                onChanged: (value) {
                  setState(() {
                    _isToggled = value;
                  });
                },
                activeColor: theme.accentColor,
              ),
              SizedBox(width: 10),
            ],
          ),
          Expanded(child:SizedBox()),
          Container(
            height: 20,
            width: double.infinity,
            // padding: EdgeInsets.all(10),
            padding: EdgeInsets.only(bottom: 5),
            color: theme.secondaryHeaderColor,
            child: Row(
              children: [
                Expanded(child: SizedBox()),
                Text(
                  widget.repeatDays.join(" "),
                  style: TextStyle(
                    fontSize: 16,
                    color: theme.textTheme.bodyText1?.color,
                  ),
                ),
                Expanded(child: SizedBox())

              ]
            )
          ),

        ],
      ),
    );
  }

And this is the result:

Current widget

The problem is that the bottom container overlaps its parent’s edges. How can I make it fit its parents edges? I tried giving the same edge to the last container, but due to the different sizes, the bottom edges still looks different from the top edges.

2

Answers


  1. You could wrap the outermost container in a ClipRRect to cut the corners of the whole container (that contains the bottom container too).

    Refer to the documentation on how to use it.

    ClipRRect class

    Login or Signup to reply.
  2. You need to provide clipBehavior on top Container, default it is none.

      return Container(
        clipBehavior: Clip.antiAlias,/// or hardEdge, based on you
        decoration: BoxDecoration(
          color: theme.cardColor,
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search