时间戳

首页 > 解决方案 > 扑动的椭圆形装饰，我该怎么做？

flutter - 扑动的椭圆形装饰，我该怎么做？

问题描述

我有一个想要在颤振中实现的布局，这种装饰在我的布局中随处可见，文本输入、容器、按钮、卡片等。我已经看到你可以用 ClipOval 椭圆化装饰，但它对我不起作用. 如果您注意到这种设计，边缘是圆形的，然后轻轻地做成一个椭圆形，它不是一个带有圆形边缘的矩形，在此先感谢。

带圆角的简单矩形，不是预期的设计

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),
          ),
        ),
      ),
    );
  }
}

我正在尝试这个结果 椭圆矩形设计

标签： flutterflutter-clippath

解决方案

而不是使用圆半径

考虑使用椭圆半径

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

推荐阅读