Ad

How To Put Image On Top Corner And Trim It In Flutter?

- 1 answer

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

Image Expected

Image Expected

But currently it looks like this,

Image Current

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?

Ad

Answer

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-> image

Ad
source: stackoverflow.com
Ad