Flutter - How to create a horizontal scrollable row?

Question

I want my row to be scrollable and this row has multiple columns. Each column has a container. How to implement this in a flutter. Placing the row in SingleChildSCrollView, my entire screen becomes blank. Can anyone please suggest me a good option to make my row scrollable?

The actual code I'm facing this problem with is too big. So I am rendering the sample first column of my row. Here is my code:

Row(
  children: [
    SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(
                    decoration: BoxDecoration(
                      color: Color(0xfff1f1f1),
                    ),
                    child: SizedBox(
                      width: 140.0,
                      height: 150.0,
                      child: Column(
                          mainAxisAlignment:
                              MainAxisAlignment.center,
                          crossAxisAlignment:
                              CrossAxisAlignment.center,
                          children: [
                            SizedBox(
                              width: 150.0,
                              height: 80.0,
                              child: const Image(
                                width: 150,
                                image: AssetImage(
                                  "images/golf_shoe.png",
                                ),
                              ),
                            ),
                          ]),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        top: 10, left: 15),
                    child: Row(
                        mainAxisAlignment:
                            MainAxisAlignment.start,
                        crossAxisAlignment:
                            CrossAxisAlignment.start,
                        children: [
                          Text('Golf Shoe in\nBlackkk',
                              style: GoogleFonts.lato(
                                  fontSize: 17,
                                  color: Color(0xff5a5a5a),
                                  fontWeight: FontWeight.w400,
                                  letterSpacing: 0.5)),
                        ]),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        top: 10, left: 15),
                    child: Row(
                      mainAxisAlignment:
                          MainAxisAlignment.start,
                      crossAxisAlignment:
                          CrossAxisAlignment.start,
                      children: [
                        Text('\$568.00',
                            style: GoogleFonts.lato(
                                fontSize: 17,
                                fontWeight: FontWeight.w500,
                                letterSpacing: 0.5)),
                        Padding(
                          padding: const EdgeInsets.only(
                              top: 0, left: 25),
                          child: Icon(Icons.add_shopping_cart,
                              size: 20),
                        ),
                      ],
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        top: 10, left: 15),
                    child: Row(
                      mainAxisAlignment:
                          MainAxisAlignment.start,
                      crossAxisAlignment:
                          CrossAxisAlignment.start,
                      children: [
                        Text('In stock',
                            style: GoogleFonts.lato(
                                fontSize: 14,
                                color: Color(0xff1e76b2),
                                fontWeight: FontWeight.w500,
                                letterSpacing: 0.5)),
                      ],
                    ),
                  ),
                ])]))]),

Maybe Table is a simpler way: https://api.flutter.dev/flutter/widgets/Table-class.html. — user18309290, Feb 25 '23 at 06:23

score 1 · Accepted Answer · answered Feb 25 '23 at 06:20

Remove the Row wrapped with SingleChildScrollView, and set MainAxisSize.min for inner Column

 SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.start,
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Container(
                                decoration: BoxDecoration(
                                  color: Color(0xfff1f1f1),
                                ),
                                child: SizedBox(
                                  width: 140.0,
                                  height: 150.0,
                                  child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        SizedBox(
                                          width: 150.0,
                                          height: 80.0,
                                          child: const Image(
                                            width: 150,
                                            image: AssetImage(
                                              "images/golf_shoe.png",
                                            ),
                                          ),
                                        ),
                                      ]),
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(
                                    top: 10, left: 15),
                                child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.start,
                                    crossAxisAlignment:
                                        CrossAxisAlignment.start,
                                    children: [
                                      Text('Golf Shoe in\nBlackkk',
                                          style: GoogleFonts.lato(
                                              fontSize: 17,
                                              color: Color(0xff5a5a5a),
                                              fontWeight: FontWeight.w400,
                                              letterSpacing: 0.5)),
                                    ]),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(
                                    top: 10, left: 15),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.start,
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: [
                                    Text('\$568.00',
                                        style: GoogleFonts.lato(
                                            fontSize: 17,
                                            fontWeight: FontWeight.w500,
                                            letterSpacing: 0.5)),
                                    Padding(
                                      padding: const EdgeInsets.only(
                                          top: 0, left: 25),
                                      child: Icon(Icons.add_shopping_cart,
                                          size: 20),
                                    ),
                                  ],
                                ),
                              ),
                              Padding(
                                padding: const EdgeInsets.only(
                                    top: 10, left: 15),
                                child: Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.start,
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: [
                                    Text('In stock',
                                        style: GoogleFonts.lato(
                                            fontSize: 14,
                                            color: Color(0xff1e76b2),
                                            fontWeight: FontWeight.w500,
                                            letterSpacing: 0.5)),
                                  ],
                                ),
                              ),
                            ])]))

Flutter - How to create a horizontal scrollable row?

1 Answers1