how to add horizontal scroll bar flutter - 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),
),
),
],
),
),
);
}

Answer 1

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.