Why scroll direction horizontal is not working? - flutter

Question

import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
class Screen extends StatefulWidget {
#override
_UserProfileScreenState createState() => _UserProfileScreenState();
}
class _UserProfileScreenState extends State<Screen> {
Widget randomjobs() {
final dbRef = FirebaseDatabase.instance
.reference()
.child("Add Job Details")
.limitToFirst(3);
return FutureBuilder(
future: dbRef.once(),
builder: (context, AsyncSnapshot<DataSnapshot> snapshot) {
if (snapshot.hasData) {
List<Map<dynamic, dynamic>> list = [];
if (snapshot.data.value == null) {
return Text("no Data");
}
for (String key in snapshot.data.value.keys) {
list.add(snapshot.data.value[key]);
}
return ListView.builder(
itemCount: snapshot.data.value.length,
itemBuilder: (BuildContext context, int index) {
return Container(
margin: EdgeInsets.only(top: 20.0),
height: 220.0,
child: PageView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 8, right: 8),
padding: EdgeInsets.only(
top: 20.0, left: 20.0, right: 20.0),
width: 240.0,
height: 240.0,
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(20.0)),
gradient: LinearGradient(
begin: Alignment.bottomRight,
end: Alignment.topLeft,
stops: [0.2, 0.6],
colors: [
Color(0xff7500bf),
Color(0xff5b1ad1),
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Text(list[index]["Job Title"],
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Color(0xfffefeff))),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Opacity(
opacity: 0.6,
child: Text(list[index]["Job Title"],
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
color: Color(0xffffffff))),
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Opacity(
opacity: 0.49,
child: Text(list[index]["Job Title"],
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w600,
color: Color(0xffffffff))),
),
),
Container(
margin: EdgeInsets.only(top: 60.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
GestureDetector(
onTap: () {},
child: Container(
padding: EdgeInsets.only(
top: 12.0,
left: 15.0,
right: 15.0,
bottom: 12.0),
decoration: BoxDecoration(
color: new Color.fromRGBO(
255, 255, 255, 0.5),
borderRadius: BorderRadius.all(
Radius.circular(12.0))),
child: Opacity(
opacity: 0.7,
child: Text('APPLY',
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w600,
color: Color(0xfffefeff))),
),
),
)
],
),
)
],
),
)
],
));
});
}
return CircularProgressIndicator();
},
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Job')),
body: randomjobs(),
);
}
}
This is the total page code. it prints in the vertical direction whereas i need it in horizontal.Even though I am using scroll direction horizontal I am not able to make it happen.Can you help. scrollDirection: Axis.horizontal I have used this in my code but the result is still I am not able to get horizontal scroll below my app bar.
Thank you

Answer 1

Is this what your trying?
body: ListView.builder(
shrinkWrap: true,
//add item count depending on your list
//itemCount: list.length,
itemCount: 4,
//added scrolldirection
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
//Removed your pageview
return Container(
height: 240.0,
margin: EdgeInsets.only(left: 8, right: 8, top: 20),
padding: EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
// rest of your code