Flutter For Loop

Question

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,
                                    ),
                                ),
                              )
                            ],
                          ),
                        );
                      }
                    }),
              ),

Do you try to show the song list, group by album?

Hian
– Hian

2020-01-29 02:22:21 +00:00
Commented Jan 29, 2020 at 2:22 — Hian
– Hian, Commented Jan 29, 2020 at 2:22
Yes have it setup as a column

user1971278
– user1971278

2020-01-29 03:50:34 +00:00
Commented Jan 29, 2020 at 3:50 — user1971278
– user1971278, Commented Jan 29, 2020 at 3:50

Hian · Accepted Answer · 2020-01-29 04:49:46Z

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 SingleChildScrollView will 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) {

    }

}

Collectives™ on Stack Overflow

Flutter For Loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related