how to add horizontal list view in flutter with multiple containers

Question

I want to add horizonal list view like image showing below. how can I do that. below I have addded my code so far. .............. ............. .......... ........... ................. ............. ........... ...... ......... ........ .......... ...................................................................

import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

class GetStarted extends StatelessWidget {
  final List<String> imagesList = [
    'asset/images/canada3.jpg',
    'asset/images/canada1.jpg',
    'asset/images/canada2.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: size.height,
            width: size.width,
            child: CarouselSlider(
              options: CarouselOptions(
                viewportFraction: 1,
                autoPlay: true,
                height: size.height,
                autoPlayInterval: Duration(seconds: 3),
              ),
              items: imagesList
                  .map(
                    (item) => Center(
                  child: Image.asset(
                    item,
                    fit: BoxFit.cover,
                    width: size.width,
                    height: size.height,
                  ),
                ),
              )
                  .toList(),
            ),
          ),
          Container(
            width: size.width,
            height: size.height,
            color: Colors.black.withOpacity(0.3),
          ),

          // Row(
          //   mainAxisAlignment: MainAxisAlignment.center,
          //   children: [
          //     EndBar(textWhite),
          //   ],
          // ),
          Positioned(
              top: size.height * 0.9,
              left: size.width * 0.08,
              child: const Text(
                'Login',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w800,
                  fontSize: 15,
                ),
              )),
          Positioned(
              top: size.height * 0.9,
              right: size.width * 0.08,
              child: const Text(
                'Skip',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w800,
                  fontSize: 15,
                ),
              )),
          Positioned(
              top: size.height * 0.6,
              left: size.width * 0.08,
              child: const Text(
                'Get matched with local pros for\nyour next home project',
                style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w800,
                  fontSize: 20,
                ),
              )),
        ],
      ),
    );
  }
}

ABV · Accepted Answer · 2022-06-16 07:57:49Z

1

Please replace your build method with this,

    @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: [
          Container(
            height: size.height,
            width: size.width,
            child: CarouselSlider(
              options: CarouselOptions(
                viewportFraction: 1,
                autoPlay: true,
                height: size.height,
                autoPlayInterval: Duration(seconds: 3),
              ),
              items: imagesList
                  .map(
                    (item) => Center(
                  child: Image.asset(
                    item,
                    fit: BoxFit.cover,
                    width: size.width,
                    height: size.height,
                  ),
                ),
              )
                  .toList(),
            ),
          ),
          Container(
            width: size.width,
            height: size.height,
            color: Colors.black.withOpacity(0.3),
          ),

          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                padding: EdgeInsets.symmetric(horizontal: 12),
                child: Text(
                  'Get matched with local pros for\nyour next home project',
                  style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w800,
                    fontSize: 20,
                  ),
                ),
              ),
              SizedBox(height: 16,),
              Container(
                height: 250,

                child: ListView.separated(
                  separatorBuilder: (context, index){return SizedBox(width: 20,);},
                  scrollDirection: Axis.horizontal,
                  itemCount: containerImages.length,
                  itemBuilder: (context, index) {
                    return Container(
                      width: 200,
                      height: 200,
                      child: Image.asset(containerImages[index]),
                    );
                  },
                ),
              ),

              Padding(
                padding: EdgeInsets.fromLTRB(12, 16, 12, 16),
                child: Row(
                  children: [
                    const Text(
                      'Login',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w800,
                        fontSize: 15,
                      ),
                    ),
                    Spacer(),
                    const Text(
                      'Skip',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w800,
                        fontSize: 15,
                      ),
                    )
                  ],
                ),
              )
            ],
          ),

        ],
      ),
    );
  }

It will result like,

edited Jun 16, 2022 at 7:57

answered Jun 16, 2022 at 7:30

ABV

9674 silver badges6 bronze badges

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

4 Comments

ABV Over a year ago

You can set the height of parent container. If still issue persist please share code of child of list. I will update it

nayo Over a year ago

height is ok now. how to add separate images for those boxes. final List<String> containerImages = [ 'asset/images/canada3.jpg', 'asset/images/canada1.jpg', 'asset/images/canada2.jpg', 'asset/images/canada2.jpg', ]; << I create this image list. now how to add there

ABV Over a year ago

Updated Listview for that. Please check it.

nayo Over a year ago

it is nicely working now. thank you and good luck with your everything!

Sadhik · Accepted Answer · 2022-06-16 07:27:11Z

1

Container(
                      height: size.height,
                      width: size.width,
                      child: ListView.builder(
                        itemCount: imagesList.length,
                        shrinkWrap: true,
                        scrollDirection: Axis.horizontal,
                        physics: AlwaysScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return Image.asset(
                            imagesList[index],
                            fit: BoxFit.cover,
                            width: size.width,
                            height: size.height,
                          );
                        },
                      ),
                    )

answered Jun 16, 2022 at 7:27

Sadhik

3101 silver badge6 bronze badges

1 Comment

nayo Over a year ago

the page has carousel view of background images. this is not connect with that.

Collectives™ on Stack Overflow

how to add horizontal list view in flutter with multiple containers

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related