如何將圖像放在頂角並在 flutter 中對其進行修剪？

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

試試下面的代碼希望它對你有幫助。 您為此使用了Stack小部件和Positioned Widget。 只需用您的圖像替換我的圖像即可。

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,
            ),
          ),
        ],
      ),
    ),

您的結果屏幕->

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

只需使用堆棧小部件即可實現此設計。