how to add horizontal scroll bar flutter

Question

I'm trying to make a grocery app UI using flutter. How do I add a horizontal scroll bar to this code? suggest a proper way to do this without affecting other codes? the right side of the image shows my implementation so far. can someone please suggest to me a way to do this? also how do I add that left green box in front of search box?

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffEDEFF4),
      bottomNavigationBar: BottomNavigationBar(

          items: [
        BottomNavigationBarItem(
          icon:  Icon(Icons.home,color: Colors.green ),
          label: 'Home',
          backgroundColor: Colors.white,



        ),

        BottomNavigationBarItem(
          icon: Icon(Icons.person,color: Colors.grey),
          label: 'Profile',
           // backgroundColor:Colors.blue,
            ),
        BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart,color: Colors.grey),
          label: 'cart',
           // backgroundColor:Colors.blue,
            ),


            BottomNavigationBarItem(
              icon: Icon(Icons.notifications ,color: Colors.grey),
              label: 'bell',
              // backgroundColor:Colors.blue,
            ),

            BottomNavigationBarItem(
              icon: Icon( Icons.more_horiz, color: Colors.grey),
              label: 'bell',
              // backgroundColor:Colors.blue,
            ),

      ]),


      body: Padding(
        padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
        child: ListView(
          children: [
            buildSearchInput(),
            Stack(
              children: [
                Padding(
                    padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
                    child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.0),
                          color: Color(0xffFFFCEE),
                        ),
                        height: 180,
                        width: 380,
                        child: Column(
                          children: const [
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 20, 180, 10),
                              child: Text(
                                "FRUIT AND BERRIES",
                                style: TextStyle(
                                    fontFamily:'Roboto',
                                    fontSize: 10,
                                    color: Colors.lightGreen,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 0, 180, 10),
                              child: Text(
                                "Tangerine",
                                style: TextStyle(
                                    fontFamily:'Roboto',
                                    fontSize: 22,
                                    color: Colors.black,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 0, 220, 10),
                              child: Text(
                                "Rs.0.90/kg",
                                style: TextStyle(
                                    fontFamily:'Roboto',
                                    fontSize: 12,
                                    color: Colors.grey,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                          ],
                        )
                    )
                ),
                const Padding(
                  padding: EdgeInsets.fromLTRB(120, 0, 40, 0),
                  child: Image(
                    image: AssetImage("assets/images/banana.png"),
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                Padding(
                    padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
                    child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.0),
                          color: Color(0xffFFFCEE),
                        ),
                        height: 180,
                        width: 380,

                        child: Column(
                          children: const [
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 20, 180, 10),
                              child: Text(
                                "FRUIT AND BERRIES",
                                style: TextStyle(
                                    fontFamily:'Roboto',
                                    fontSize: 10,
                                    color: Colors.lightGreen,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 0, 180, 10),
                              child: Text(
                                "Tangerine",
                                style: TextStyle(
                                    fontFamily:'Roboto',
                                    fontSize: 22,
                                    color: Colors.black,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 0, 220, 10),
                              child: Text(
                                "Rs.0.90/kg",
                                style: TextStyle(
                                    fontFamily:'Roboto',
                                    fontSize: 10,
                                    color: Colors.grey,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                          ],
                        )

                    )),
                const Padding(
                  padding: EdgeInsets.fromLTRB(120, 0, 40, 0),
                  child: Image(
                    image: AssetImage("assets/images/orange.png"),
                  ),
                ),
              ],
            ),
            Stack(
              children: [
                Padding(
                    padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
                    child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20.0),
                          color: Color(0xffE2F3DF),
                        ),
                        height: 180,
                        width: 380,
                        child: Column(
                          children: const [
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 20, 180, 10),
                              child: Text(
                                "FRUIT AND BERRIES",
                                style: TextStyle(
                                    fontFamily:'Roboto',
                                    fontSize: 10,
                                    color: Colors.lightGreen,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 0, 180, 10),
                              child: Text(
                                "Tangerine",
                                style: TextStyle(
                                    fontFamily:'Roboto',
                                    fontSize: 22,
                                    color: Colors.black,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.fromLTRB(0, 0, 220, 10),
                              child: Text(
                                "Rs.0.90/kg",
                                style: TextStyle(
                                    fontFamily:'Roboto',
                                    fontSize: 10,
                                    color: Colors.grey,
                                    fontWeight: FontWeight.w700),
                              ),
                            ),
                          ],
                        )
                    )),
                const Padding(
                  padding: EdgeInsets.fromLTRB(100, 0, 40, 0),
                  child: Image(
                    image: AssetImage("assets/images/kiwi.png"),
                   // height:200,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget buildSearchInput() => Container(
        decoration: BoxDecoration(
            color: Colors.white, borderRadius: BorderRadius.circular(14)),
        child: Padding(
          padding: const EdgeInsets.only(left: 20.0, right: 20),
          child: Row(
            children: [
              Icon(
                Icons.search,
                size: 30,
                color: Colors.grey.shade300,
              ),
              Flexible(
                child: TextField(
                  decoration: InputDecoration(border: InputBorder.none),
                ),
              ),
            ],
          ),
        ),
      );
}

score 1 · Accepted Answer · answered Jan 23 '22 at 05:18

You can add ListView with scrollDirection: Axis.horizontal, in this case it will be needed to have fixed height, and it will be scrolled up based on parent ListView scroll event.

buildSearchInput(),
SizedBox(
  height: kToolbarHeight,
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: List.generate(14, (index) => Text("item $index")),
  ),
),

If you wish to have it on top fixed position, wrap everything with Column and ListView with Expanded.

body: Padding(
  padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
  child: Column(
    children: [
      buildSearchInput(),
      SizedBox(
        height: kToolbarHeight,
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: List.generate(14, (index) => Text("item $index")),
        ),
      ),
      Expanded(
        child: ListView(
          children: [
            Stack(....

Head to flutter.dev for info.

Hi. this works. how can I design those texts with containers using these scrolls. — , Jan 23 '22 at 17:43
you can follow [this](https://stackoverflow.com/a/59153630/10157127),also check others answers — Md. Yeasin Sheikh, Jan 23 '22 at 17:45

how to add horizontal scroll bar flutter

1 Answers1