如何更改带有圆角边缘背景的容器

Question

I am trying to match the color in the rectangle with the color above it.

I have tried to use Cards and ClipRRect both produce the same problem.

Column(
          children: <Widget>[
            Expanded(
              child: Container(),
            ),
            Expanded(
              child: Container(
                child: Text(
                  'data ',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                  textAlign: TextAlign.center,
                ),
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(80),
                  ),
                ),
              ),
            ),
            Expanded(
              child: Container(
                child: Text(
                  'data',
                  style: TextStyle(
                    color: Colors.white,
                  ),
                  textAlign: TextAlign.center,
                ),
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.grey,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(80),
                  ),
                ),
              ),
            )
          ],
        )

The color inside the rectangle should be the same as the color above it

Answer 1

Output:

This is one way of doing it.

Column(
  children: <Widget>[
    Expanded(
      child: Container(),
    ),
    Expanded(
      child: Container(
        child: Text(
          'data ',
          style: TextStyle(
            color: Colors.white,
          ),
          textAlign: TextAlign.center,
        ),
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(80),
          ),
        ),
      ),
    ),
    Expanded(
      child: Stack(
        children: <Widget>[
          Container(
            width: double.infinity,
            color: Colors.blue,
          ),
          Container(
            alignment: Alignment.topCenter,
            child: Text(
              'data',
              style: TextStyle(
                color: Colors.white,
              ),
              textAlign: TextAlign.center,
            ),
            width: double.infinity,
            decoration: BoxDecoration(
              color: Colors.grey,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(80),
              ),
            ),
          ),
        ],
      ),
    )
  ],
)

Answer 2

This sounds like a good candidate for a Stack

@override
Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
            top: 50, // Top margin per card
            child: Container(
              child: Text(
                'data ',
                style: TextStyle(
                  color: Colors.white,
                ),
                textAlign: TextAlign.center,
              ),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(80),
                ),
              ),
            )),
        Positioned.fill(
            top: 250,
            child: Container(
              child: Text(
                'data ',
                style: TextStyle(
                  color: Colors.white,
                ),
                textAlign: TextAlign.center,
              ),
              decoration: BoxDecoration(
                color: Colors.grey,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(80),
                ),
              ),
            )),
      ],
    );
  }

This would prevent you from having to match the colour of your Container with the card you happen to be showing the new card in front of.