CODEWITHSUNDEEP
flutterflutter-clippath
mario uriarte
mario uriarte

Reputation: 31

Oval decoration in flutter, how can I do that?

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

Upvotes: 2

Views: 2004

Answers (3)

Elijah Agbedam
Elijah Agbedam

Reputation: 1

Change ClipRRect to ClipOval; which creates an oval-shaped clip

Upvotes: 0

Sam Jeffrey
Sam Jeffrey

Reputation: 46

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

Upvotes: 0

Moaid ALRazhy
Moaid ALRazhy

Reputation: 1744

instead of using circular radius

consider using elliptical radius like

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

Upvotes: 2

Related Questions