Hi learning Flutter and I am trying to transfer this for loop from Appcelerator to Flutter.
Appcelerator:
Alloy.Globals.networkRequest.send({
url : Alloy.Globals.networkConfigs.albums_url,
method : "GET",
payload : null,
success : function(e_response) {
jsonResponse = JSON.parse(e_response);
var currentIndex = 0;
var counter = 1;
var parsedArray = [];
Ti.API.info('===ALBUMS_URL JSON RESPONSE==== ' + JSON.stringify(jsonResponse));
Ti.App.Properties.setObject("ALBUMS", jsonResponse);
for (var i = 0,
j = jsonResponse.length; i < j; i++) {
if (i <= 21) {
var views_received = Alloy.createController('view_new_release', {
title : jsonResponse[i].title,
recordID : jsonResponse[i].id,
song : jsonResponse[i].list_items,
tracksData : jsonResponse[i],
coverImage : jsonResponse[i].cover_url, //
callback : function(data) {
$.global_player.loadGloabalPlayerData($.view_parent_customer_selection);
Ti.API.info('====view_new_release click data====== ' + JSON.stringify(data));
On Flutter I am just grabbing data and showing it in order but would like to add the for loop instead so that I focus the data a bit better. Here is the code on Flutter I am trying to change. If someone could assist I would appreciate it. Thanks.
Container(
height: MediaQuery.of(context).size.height * 0.25,
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: distributions == null ? 0 : distributions.length,
itemBuilder: (BuildContext context, int i) {
if (distributions == null) {
return Center(
child: CircularProgressIndicator(),
);
} else {
return Padding(
padding: const EdgeInsets.all(5.0),
child: Column(
children: <Widget>[
Container(
child: Center(
child: GestureDetector(
onTap: () {
playMySong(
distributions[i]['list_items']['0']
['title'],
distributions[i]['list_items']['0']
['artist'],
distributions[i]['list_items']['0']
['genre'],
distributions[i]['list_items']['0']
['song'],
distributions[i]['list_items']['0']
['lyrics'],
distributions[i]['cover_url']);
print(distributions[i]['list_items']['0']
['song']);
},
child: CachedNetworkImage(
imageUrl: distributions[i]['cover_url']
.toString(),
fit: BoxFit.fitHeight,
placeholder: (context, url) =>
CircularProgressIndicator(),
errorWidget: (context, url, error) =>
Icon(Icons.error),
),
),
),
width: MediaQuery.of(context).size.width * 0.3,
decoration: BoxDecoration(
color: Colors.grey[850],
borderRadius:
BorderRadius.all(Radius.circular(5)),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
distributions[i]['title'].toString(),
// titles[i],
style: TextStyle(
color: Colors.white,
),
),
)
],
),
);
}
}),
),
Imho, nothing wrong with your first snapshot... It is the flutter way. But if you want to use the for loop way then you could use SingleChildScrollView.
Be careful because
SingleChildScrollViewwill render all of your items at once which is very heavy
import 'package:flutter/material.dart';
class SamplePage extends StatefulWidget {
SamplePage({Key key}) : super(key: key);
@override
State<StatefulWidget> createState() => SamplePageState();
}
class SamplePageState extends State<SamplePage> {
List<Map<String, dynamic>> distributions = List();
@override
void initState() {
super.initState();
distributions.add(<String, String>{
'cover_url': '', 'title': 'Blinding Lights',
});
distributions.add(<String, String>{
'cover_url': '', 'title': 'Blinding Lights',
});
distributions.add(<String, String>{
'cover_url': '', 'title': 'Blinding Lights',
});
distributions.add(<String, String>{
'cover_url': '', 'title': 'Blinding Lights',
});
distributions.add(<String, String>{
'cover_url': '', 'title': 'Blinding Lights',
});
distributions.add(<String, String>{
'cover_url': '', 'title': 'Blinding Lights',
});
}
@override
Widget build(BuildContext context) {
final children = <Widget>[];
for (int i = 0; i < distributions?.length ?? 0; i++) {
if (distributions[i] == null) {
children.add(Center(child: CircularProgressIndicator()));
}
else {
children.add(ItemView(distribution: distributions[i]));
}
}
return Scaffold(
body: Container(
height: (MediaQuery.of(context)).size.height * 0.25,
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(children: children)
),
),
);
}
}
class ItemView extends StatelessWidget {
final Map<String, dynamic> distribution;
ItemView({Key key, this.distribution}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(5.0),
child: Column(children: <Widget>[
Container(
width: (MediaQuery.of(context)).size.width * 0.3,
decoration: BoxDecoration(color: Colors.grey[850], borderRadius: BorderRadius.all(Radius.circular(5)),),
child: Center(
child: GestureDetector(
onTap: () => playMySong(distribution),
child: Image.network(distribution['cover_url'].toString(), fit: BoxFit.fitHeight),
)
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Text(distribution['title'].toString(), style: TextStyle(color: Colors.white),),
)
])
);
}
void playMySong(Map<String, dynamic> distribution) {
}
}