0

This is my list view widget. There are two list view builders, one inside another. I added shrinkWrap property and physics property. Nothing is rendered.I have another doubt when to use list view, single child scroll view and custom scroll view.


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Listviews"),
        backgroundColor: Colors.blue,
      ),
      body: ListView.builder(
        shrinkWrap: true,
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          if (data[index]["type"] == "single") {
            var innerData = data[index]["data"];

            return Container(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: innerData == null ? 0 : innerData.length,
                itemBuilder: (BuildContext context, int index) {
                  String title = innerData[index]["title"];

                  return Text("$title");
                },
              ),
            );
          }
        },
      ),
    );
  }

This is the output screen

This is my json response:

[
    {
        "type": "single",
        "data": [
            {
                "title": "Fresh Vegetables"
            },
            {
                "title": "Fresh Fruits"
            },
            {
                "title": "Cuts and Sprouts"
            },
            {
                "title": "Exotic Center"
            }
        ]
    }
]

I want to do like the flipkart home page. I want to build widgets based on the response. What is the widgets should I use?

2 Answers 2

1

Use physics property inside listViewBuilder

    shrinkWrap: true,
    physics: ClampingScrollPhysics(), /// listView scrolls
Sign up to request clarification or add additional context in comments.

Comments

0

I some how copy pasted your code and made some modifications and it worked for me just check the code i have modified :

I have loaded your json locally mentioned below:

[
    {
        "type": "single",
        "data": [
            {
                "title": "Fresh Vegetables"
            },
            {
                "title": "Fresh Fruits"
            },
            {
                "title": "Cuts and Sprouts"
            },
            {
                "title": "Exotic Center"
            }
        ]
    }
]

According to you json class i have created a model class where you can access the specific object from the listview using this model class :

// To parse this JSON data, do
//
//     final data = dataFromJson(jsonString);

import 'dart:convert';

List<Data> dataFromJson(String str) => List<Data>.from(json.decode(str).map((x) => Data.fromJson(x)));

String dataToJson(List<Data> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Data {
    String type;
    List<Datum> data;

    Data({
        this.type,
        this.data,
    });

    factory Data.fromJson(Map<String, dynamic> json) => Data(
        type: json["type"],
        data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "type": type,
        "data": List<dynamic>.from(data.map((x) => x.toJson())),
    };
}

class Datum {
    String title;

    Datum({
        this.title,
    });

    factory Datum.fromJson(Map<String, dynamic> json) => Datum(
        title: json["title"],
    );

    Map<String, dynamic> toJson() => {
        "title": title,
    };
}


And just check the main file where i have made the changes :

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sample_testing_project/models.dart';

main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Data> data = List();
  bool _isLoading = false;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    loadYourData();
  }

  Future<String> loadFromAssets() async {
    return await rootBundle.loadString('json/parse.json');
  }

  loadYourData() async {
    setState(() {
      _isLoading = true;
    });
    // Loading your json locally you can make an api call, when you get the response just pass it to the productListFromJson method
    String jsonString = await loadFromAssets();
    final datamodel = dataFromJson(jsonString);
    data = datamodel;

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Listviews"),
          backgroundColor: Colors.blue,
        ),
        body: ListView.builder(
          shrinkWrap: true,
          itemCount: data == null ? 0 : data.length,
          itemBuilder: (BuildContext context, int index) {
            if (data[index].type == "single") {
              var innerData = data[index].data;

              return Container(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: innerData == null ? 0 : innerData.length,
                  itemBuilder: (BuildContext context, int index) {
                    String title = innerData[index].title;

                    return Container(
                      width: MediaQuery.of(context).size.width,
                      child: Card(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text("$title"),
                        ),
                      ),
                    );
                  },
                ),
              );
            }
          },
        ),
      ),
    );
  }
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.