CODEWITHSUNDEEP
flutter
Nhiên Ngô Đình
Nhiên Ngô Đình

Reputation: 573

Flutter - How can I fit each image in a horizontal ListView to screen?

I created a horizontal ListView contains lots of images, but each image in ListView does not fit the screen (sometimes I have to scroll to see the rest of it and of course a part of the next image). How can I stretch each image fit the screen and scroll to see the next image (next image has to fit the screen too)

UPDATE EXAMPLE Horizontal Image ListView

Upvotes: 2

Views: 3357

Answers (4)

Nhiên Ngô Đình
Nhiên Ngô Đình

Reputation: 573

What I meant was carousel widget, never heard about it before. I was new at Mobile development.

Upvotes: 1

nivla360
nivla360

Reputation: 1129

You can use MediaQuery to achieve this. Simply by typing MediaQuery.of(context).size.width which gives you the width of the device screen then you assign to the width of the image

Upvotes: 0

Rutvik Gumasana
Rutvik Gumasana

Reputation: 1630

You can use this code for Horizontal list view with perfect fit images.

 Container(
            height: 275,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemCount: furnitures.length,
              itemBuilder: (BuildContext context, int index) {
                Map furniture = furnitures[index];

                return Padding(
                  padding: EdgeInsets.only(right: 20),
                  child: GestureDetector(
                    onTap: (){
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (BuildContext context){
                            return Details();
                          },
                        ),
                      );
                    },
                    child: Container(
                      height: 275,
                      width: 280,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(
                            furniture['name'],
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 20,
                            ),
                          ),
                          SizedBox(height: 10),
                          ClipRRect(
                            borderRadius: BorderRadius.circular(15),
                            child: Image.asset(
                              "${furniture["img"]}",
                              height: 240,
                              width: 280,
                              fit: BoxFit.cover,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                );
              },

            ),
          )

Upvotes: 0

Phat Tran
Phat Tran

Reputation: 3870

You can use DecorationImage with BoxFit.fill

Example:

Container(
          width: 64.0,
          height: 64.0,
          decoration: new BoxDecoration(
            shape: BoxShape.circle,
            image: new DecorationImage(
                fit: BoxFit.fill,
                image: new NetworkImage('my_url.jpg')
            )
        ))

Upvotes: 1

Related Questions