Appy overflow in Container widget

Question

I need to design a Container as displayed in the center, below.

Here is my code for doing so:

Container(
   width: 48,
   height: 48,
   decoration: SideBarStyles.recentItem,
   child: Image.network(
     'https://placeimg.com/640/480/any',
     fit: BoxFit.cover,
   ),
),

SideBarStyles.recentItem value

  static BoxDecoration recentItem = BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(25)),
    color: Color.fromRGBO(42, 37, 82, 0.15),
    border: Border.all(width: 5, color: Variables.sideBarColorDark)
  );

The problem is image is floating out of the box as:

How do I hide the overflow of the image?

Raine Dale Holgado · Accepted Answer · 2020-09-02 04:20:03Z

1

Heres and example

 Container(
                      width: 48,
                      height: 48,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(width: 5, color: Variables.sideBarColorDark),
                        image: new DecorationImage(
                          image: new NetworkImage(
                            'https://placeimg.com/640/480/any',
                          ),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),

answered Sep 2, 2020 at 4:20

Raine Dale Holgado

3,4603 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jigar Patel · Accepted Answer · 2020-09-02 05:08:09Z

1

One way you can do this is like this.

Container(
   width: 48,
   height: 48,
   decoration: SideBarStyles.recentItem,
),

And decoration like this.

  static BoxDecoration recentItem = BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(25)),
    color: Color.fromRGBO(42, 37, 82, 0.15),
    border: Border.all(width: 5, color: Variables.sideBarColorDark)
    image: DecorationImage(
      image: NetworkImage('https://placeimg.com/640/480/any'),
    ),
  );

Result:

answered Sep 2, 2020 at 5:08

Jigar Patel

5,4431 gold badge16 silver badges20 bronze badges

Comments

Matthew Trent · Accepted Answer · 2020-09-02 04:32:15Z

0

If you want your container corners to be cropped/rounded either set the borderRadius property in the container to BorderRadius.all(Radius.circular(value)). Or wrap the container in a ClipRRect widget and set the borderRadius property to BorderRadius.all(Radius.circular(value)).

answered Sep 2, 2020 at 4:32

Matthew Trent

3,3564 gold badges26 silver badges47 bronze badges

Collectives™ on Stack Overflow

Appy overflow in Container widget

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related