Oval decoration in flutter, how can I do that?

1.3k Views Asked by At

I have a layout that I want to implement in flutter, this decoration is featured everywhere in my layout, Text Inputs, Containers, Buttons, Cards, etc. I have seen that you can oval the decorations with ClipOval but it did not work for me. If you notice this design, the edges are rounded and then gently make an oval, it is not a rectangle with rounded edges, thanks in advance.

Simple rectangle with rounded corners, not the expected design

class AppCard extends StatelessWidget {
  const AppCard({
    Key key,
    this.image,
    this.child,
    this.opacity = 0.3,
  }) : super(key: key);

  final String image;
  final Widget child;
  final double opacity;

  @override
  Widget build(BuildContext context) {
    final ThemeData themeData = Theme.of(context);

    return ClipRRect(
      borderRadius: BorderRadius.circular(25.0),
      child: Container(
        child: child,
        width: MediaQuery.of(context).size.width,
        height: 190,
        decoration: BoxDecoration(
          color: COLOR_GREEN,
          image: DecorationImage(
            fit: BoxFit.fitWidth,
            colorFilter: new ColorFilter.mode(
                Colors.black.withOpacity(opacity), BlendMode.dstATop),
            image: AssetImage(image),
          ),
        ),
      ),
    );
  }
}

I am trying this result oval rectangular design

2

There are 2 best solutions below

0
On

Return a Material with borderRadius: BorderRadius.circular(25.0), and child as an Inkwell and then the container that you have.

1
On

instead of using circular radius

consider using elliptical radius like

BorderRadius.all(Radius.elliptical(100, 50)),