CODEWITHSUNDEEP
flutter
Zhangir Siranov
Zhangir Siranov

Reputation: 479

Display only a part of widget in container

I want to achieve design like this.

I want to achieve design like this

How can I display only a part of the image like in container above?

As far as I know, Image widget has no built-in method to be cut out in this fashion, and generally children of the widget can't anyhow be built to exceed the boundaries. Just cut the image then?

Upvotes: 1

Views: 779

Answers (2)

Akio Alex
Akio Alex

Reputation: 316

Try this.

Container(
   child: Stack(
      children : <widget>[
         Positioned(
           top : -100,
           right : -100,
           child : Image.asset("asstes/images/img1.png", fit : BoxFit.cover),              
         )
      ]
    )
)

You need not refer whole video. Only refer 2 minutes

Upvotes: 2

ibrahimkarahan
ibrahimkarahan

Reputation: 3015

My Example

Container(
  margin: const EdgeInsets.only(top: 50),
  height: 100,
  width: 100,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black),
  ),
  child: Stack(
    children: <Widget>[
      Positioned(
        right: -35,
        top: -35,
        child: Image(
          image: AssetImage("assets/icon/ic_notification.png"),
          width: 100,
          height: 100,
        ),
      ),
      Column(
        children: <Widget>[
          Text("Item 1"),
          Text("Item 2"),
          Text("Item 3"),
        ],
      ),
    ],
  ),
),

Upvotes: 1

Related Questions