flutter ListView Separated - flutter

Question

i tried to use listViewSeparated on a Widget along a row with scrolling but it doesn't show anything like its only a Scaffold (white page) i don't know what is the problem
Here is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../layout/cubit/cubit.dart';
import '../../layout/cubit/states.dart';
class HomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return BlocConsumer<LifeStyleCubit, LifeStates>(
listener: (context, state) {},
builder: (context, state) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
ListView.separated(
shrinkWrap: true,
itemBuilder: (context,index) =>SpecialProgramWidget(),
separatorBuilder: (context,index) => SizedBox(width: 20,),
itemCount: 3
),
],
),
),
],
),
),
),
);
},
);
}
Widget SpecialProgramWidget() => Container(
width: 310,
height: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: Column(
children: [
Stack(
alignment: Alignment.bottomRight,
children: [
Container(
height: 230,
width: 310,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10)),
image: DecorationImage(
image: NetworkImage(
'https://i.pinimg.com/564x/20/bd/68/20bd68b5a248bb191178bd9b98b53a76.jpg'),
fit: BoxFit.cover)),
),
Align(
alignment: Alignment.topLeft,
child: Container(
height: 230,
width: 290,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://www.pngplay.com/wp-content/uploads/6/Fitness-PNG-HD-Quality.png'),
fit: BoxFit.cover)),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Special Program',
style: TextStyle(fontSize: 21, color: Colors.white),
),
)
],
),
Container(
width: 310,
height: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10),
bottomRight: Radius.circular(10),
),
border: Border.all(color: Colors.grey.shade400, width: 1),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'Super pump biceps workout',
style: TextStyle(
fontSize: 15,
),
)),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Align(
alignment: Alignment.topLeft,
child: Text(
'6 Weeks',
style: TextStyle(fontSize: 15, color: Colors.grey),
)),
),
],
),
)
],
),
);
}
i need my screen displayed like this
return Scaffold(
body: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SpecialProgramWidget(),
SizedBox(width: 20,),
SpecialProgramWidget(),
SizedBox(width: 20,),
SpecialProgramWidget()
],
),
),
],
)
);
Which it displays the widget along a row... i wanted to do the same thing with ListViewSeparated but i only got White page with no data
i tried some solutions like wrapping Expanded widget on ListViewSeparated but still doesn't work
how can i solve this ?

Answer 1

The issue is on scrollDirection: Axis.horizontal,. Also you dont need to use ListView.separated( inside SingleChildScrolView, the parent is already handling the scroll event.
You can provide fixed with ListView.separated to bypass the issue,
Widget build(BuildContext context) {
// return
// BlocConsumer<LifeStyleCubit, LifeStates>(
// listener: (context, state) {},
// builder: (context, state) {
return Scaffold(
body: LayoutBuilder(
builder: (_, constraints) => Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
SizedBox(
width: constraints.maxWidth,
child: ListView.separated(
shrinkWrap: true,
itemBuilder: (context, index) =>
SpecialProgramWidget(),
separatorBuilder: (context, index) =>
SizedBox(width: 20),
itemCount: 3,
),
),
],
),
),
],
),
),
),
),
// );
// },
);
}
A better decision will be using CustomScrolView I think it will be better for the thing you are trying to get.