如何将图像放在顶角并 trim 抖动？

Question

在我的移动应用程序中，我希望网球图像出现在右上角

预期图像

但目前看起来是这样的，

图像当前

代码如下,

Expanded(
                  flex: 9,
                  child: Column(
                      children: [
                        Container(
                          height: 66,
                          decoration: BoxDecoration(
                            color: const Color(0xff3e4982),
                            borderRadius: BorderRadius.circular(12),
                            image: DecorationImage(
                              image: AssetImage(
                                'assets/transperent_tennis_ball_icon_green.png'),
                            ),
                          ),
                        ),
                      ]
                  ),
                )

请指教我该如何完成？

Answer 1

只需使用堆栈小部件即可实现此设计。

Answer 2

你可以使用堆栈

Expanded(
                flex: 9,
                child: Column(
                    children: [
                      Container(
                          height: 66,
                          decoration: BoxDecoration(
                            color: const Color(0xff3e4982),
                            borderRadius: BorderRadius.circular(12),
                          ),
                          child: Stack(
                              children: [
                                Positioned(
                                    top:-25,
                                    right:-25,
                                    child: Container(
                                      height: 66,
                                      width:66,
                                      decoration: BoxDecoration(
                                        shape:BoxShape.circle,
                                        image: DecorationImage(
                                          fit: BoxFit.fill,
                                          image: NetworkImage("https://picsum.photos/500/300?random=1"),
                                        ),
                                      ),
                                    )
                                )
                              ])
                      )]
                ),
              ),

Answer 3

试试下面的代码希望对你有帮助。为此，您使用了 Stack widget and Positioned 小部件。只需将我的图片替换为您的图片即可。

Center(
      child: Stack(
        children: [
          Container(
            padding: EdgeInsets.all(20),
            height: 100,
            width: 200,
            decoration: BoxDecoration(
              color: const Color(0xff3e4982),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Submit Score',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                Text(
                  'Game Report',
                  style: TextStyle(
                    fontSize: 14,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            right: -30,
            top: -30,
            child: Image.network(
              'https://miro.medium.com/max/1400/1*-6WdIcd88w3pfphHOYln3Q.png',
              height: 100,
              width: 80,
            ),
          ),
        ],
      ),
    ),

您的结果屏幕->

如何将图像放在顶角并 trim 抖动？

How to put image on top corner and trim it in flutter?

flutter

flutter-layout