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

Question

In my mobile app I am expecting the tennis ball image to be there in right top corner

Image Expected

But currently it looks like this,

Image Current

the code is as below,

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

Please advise how can I get this done?

Answer 1

Try below code hope its help to you. You used Stack widget and Positioned Widget for that. just replace my image with your image.

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

Your result screen->

Answer 2

you can use stack

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

just use stack widget to achive this design .