Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

round corner image in PageView.builder | Flutter

I want to round the corners of the image and bring it to left ( line to start popular music)

What I do, – I used two methods, but they didn’t work. codes below the image

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel


code part : (1st try here)

Container(
              width: double.infinity,
              height: 180,
              child: PageView.builder(
                  controller: PageController(viewportFraction: 0.8),
                  itemCount: 5,
                  itemBuilder: (_, i) {
                    return Padding(
                      padding: const EdgeInsets.only(left: 10),
                      child: Container(
                        height: 180,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15.0),
                          // color: Colors.red
                          // image: DecorationImage(
                          //   image: AssetImage("assets/imgs/just.jpg"),
                          // ),
                        ),
                      ),
                    );
                  }),
            )

This code (1st try) working when I use color in BoxDecoration, when I add image property it not working. (round corners)

2nd try here

Container(
              width: double.infinity,
              height: 180,
              child: PageView.builder(
                  controller: PageController(viewportFraction: 0.8),
                  itemCount: 5,
                  itemBuilder: (_, i) {
                    return Padding(
                      padding: const EdgeInsets.only(left: 10),
                      child: Container(
                        height: 180,
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(8.0),
                            child: Image(
                              image: AssetImage("assets/imgs/just.jpg"),
                            )),
                      ),
                    );
                  }),
            )

>Solution :

try to include fit: BoxFit.cover.

For method one

 Container(
  width: double.infinity,
  height: 180,
  child: PageView.builder(
      controller: PageController(viewportFraction: 0.8),
      itemCount: 5,
      itemBuilder: (_, i) {
        return Padding(
          padding: const EdgeInsets.only(left: 10),
          child: Container(
            height: 180,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15.0),
              color: Colors.red,
              image: DecorationImage(
                  image: AssetImage("assets/imgs/just.jpg"), 
                  fit: BoxFit.fill), 
            ),
          ),
        );
      }),
)
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading