segemented bar scrolling bar issue - flutter

Question

I'm facing issue with scrolling bar, the lists of data load at bottom rather than showing at top.I have made code dynamic which is loading according to conditions. I'm new flutter I have written code as from different side and still learning, If you want to give suggest me to written in better way please go ahead let me know the change where I can do.
class EventsPageState extends State<EventsPage>
with SingleTickerProviderStateMixin {
int theirGroupValue = 0;
List data = List();
String url = 'https://e19f7c9d.ngrok.io/api/events/westernaf/packages';
Future<String> makeRequest() async {
var response = await http
.get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
setState(() {
var extractdata = json.decode(response.body);
data = extractdata["result"];
});
for (var i = 0; i < data.length; i++) {
var startTime = data[i]['start_date'].split('T')[0];
var endTime = data[i]['end_date'].split('T')[0];
final todayDate = DateTime.now();
final pkgStartDate = DateTime.parse(startTime);
final pkgEndDate = DateTime.parse(endTime);
final difDate = todayDate.isAfter(pkgStartDate);
final difDate2 = todayDate.isBefore(pkgEndDate);
if (difDate && difDate2 == true) {
if (data[i]['regTypeId'] == 1) {
this.theirGroupValue = 0;
} else if (data[i]['regTypeId'] == 2) {
this.theirGroupValue = 1;
} else if (data[i]['regTypeId'] == 3) {
this.theirGroupValue = 2;
} else {
this.theirGroupValue = 0;
}
}
}
}
final Map<int, Widget> logoWidgets = const <int, Widget>{
0: Text('Early Bird'),
1: Text('General'),
2: Text('Onsite'),
};
List<bool> inputs = new List<bool>();
#override
void initState() {
super.initState();
this.makeRequest();
setState(() {
for (int i = 0; i < 35; i++) {
inputs.add(false);
}
});
}
void ItemChange(bool val, int index) {
setState(() {
inputs[index] = val;
});
}
static Widget giveCenter(String ListView) {
return new Card(
// child Container(
child: Text(
"Text: $ListView",
style: TextStyle(color: Colors.blue, fontSize: 20.0),
// )
),
);
}
void _Register() {
Navigator.push(
context, new MaterialPageRoute(builder: (context) => LandingScreen()));
}
#override
Widget _listingShow(i) {
if (data[i]['regTypeId'] == 1) {
var startTime = data[i]['start_date'].split('T')[0];
var endTime = data[i]['end_date'].split('T')[0];
final todayDate = DateTime.now();
final pkgStartDate = DateTime.parse(startTime);
final pkgEndDate = DateTime.parse(endTime);
final difDate = todayDate.isAfter(pkgStartDate);
final difDate2 = todayDate.isBefore(pkgEndDate);
if (difDate && difDate2 == true) {
return new Row(
children: <Widget>[
Expanded(
child: Text(data[i]["packageName"]),
),
Expanded(
child: Text((data[i]["price"]).toString()),
),
Expanded(
child: Checkbox(
value: inputs[i],
onChanged: (bool val) {
ItemChange(val, i);
},
),
),
],
);
}
}
}
#override
Widget _listingShow2(i) {
if (data[i]['regTypeId'] == 2) {
var startTime = data[i]['start_date'].split('T')[0];
var endTime = data[i]['end_date'].split('T')[0];
final todayDate = DateTime.now();
final pkgStartDate = DateTime.parse(startTime);
final pkgEndDate = DateTime.parse(endTime);
final difDate = todayDate.isAfter(pkgStartDate);
final difDate2 = todayDate.isBefore(pkgEndDate);
if (difDate && difDate2 == true) {
return new Row(
children: <Widget>[
Expanded(
child: Text(data[i]["packageName"]),
),
Expanded(
child: Text((data[i]["price"]).toString()),
),
Expanded(
child: Checkbox(
value: inputs[i],
onChanged: (bool val) {
ItemChange(val, i);
},
),
),
],
);
}
}
}
#override
Widget _listingShow3(i) {
if (data[i]['regTypeId'] == 3) {
var startTime = data[i]['start_date'].split('T')[0];
var endTime = data[i]['end_date'].split('T')[0];
final todayDate = DateTime.now();
final pkgStartDate = DateTime.parse(startTime);
final pkgEndDate = DateTime.parse(endTime);
final difDate = todayDate.isAfter(pkgStartDate);
final difDate2 = todayDate.isBefore(pkgEndDate);
if (difDate && difDate2 == true) {
return new Row(
children: <Widget>[
Expanded(
child: Text(data[i]["packageName"]),
),
Expanded(
child: Text((data[i]["price"]).toString()),
),
Expanded(
child: Checkbox(
value: inputs[i],
onChanged: (bool val) {
ItemChange(val, i);
},
),
),
],
);
}
}
}
Widget build(BuildContext context) {
List<Widget> bodies = [
new ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, i) {
return ListTile(
title: _listingShow(i),
);
},
),
new ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, i) {
return ListTile(
title: _listingShow2(i),
);
},
),
new ListView.builder(
itemCount: data == null ? 0 : data.length,
itemBuilder: (BuildContext context, i) {
return ListTile(
title: _listingShow3(i),
);
},
),
];
return Scaffold(
body: bodies[this.theirGroupValue],
appBar: AppBar(
elevation: 2.0,
backgroundColor: Colors.white,
centerTitle: true,
title: Text(
'Select conference Package',
style: TextStyle(color: Colors.black),
),
bottom: PreferredSize(
preferredSize: Size(double.infinity, 45.0),
child: Padding(
padding: EdgeInsets.only(top: 5.0, bottom: 10.0),
child: Row(
children: <Widget>[
SizedBox(
width: 15.0,
),
Expanded(
child: CupertinoSegmentedControl(
groupValue: this.theirGroupValue,
onValueChanged: (changeFromGroupValue) {
setState(() {
theirGroupValue = this.theirGroupValue;
});
},
children: logoWidgets,
),
),
],
),
),
),
),
);
}
}
I have attached the pic above, If you want to c all code I will push all the code.If needed , all I want to c listing at the top

Answer 1

in bodies, you define the ListViews like this:
ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, i) {
return ListTile(
title: _listingShow(i),
);
},
),
And this it listingShow, which returns the widget you use as the title property of your ListView.
Widget _listingShow3(i) {
if (data[i]['regTypeId'] == 3) {
// construct and return the widget
}
}
The problem is, your ListView has always a fixed number of items which is data.length, but in your function, you only return a widget if the data matches a certain type (if (data[i]['regTypeId'] == 3)), else, you return nothing. But the ListTile is always there, it just doesn't show anything.
My suggestion is to divide data into 3 separate lists, you can see how I did it here, it's probably not optimised, you'll need to figure out a better way.