1

I have a list view builder. Inside the list view builder there is grid view builder. It works fine. But above the last image there is unwanted space is generating. I tried with fit:Boxfit.fill in image widget, but it making the picture pixelating. Is there any way to build row or columns dynamically in flutter.


import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class DemoPage extends StatefulWidget {
  @override
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  var data, localData, innerData, count, imageUrl;

  @override
  void initState() {
    super.initState();
    getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Demo Grid")),
      body: ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          localData = data[index];
          count = localData["column"];

          innerData = localData["data"];

          return GridView.builder(
            shrinkWrap: true,
            physics: ScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: count,
            ),
            itemCount: innerData == null ? 0 : innerData.length,
            itemBuilder: (BuildContext context, int index) {
              imageUrl = innerData[index]["imageUrl"];

              // return Container(
              //   padding: const EdgeInsets.all(20),
              //   decoration: BoxDecoration(
              //     image: DecorationImage(
              //       image: NetworkImage(
              //         imageUrl,
              //       ),
              //     ),
              //   ),
              // );

              return Card(
                margin: EdgeInsets.all(10),
                color: Colors.green,
                child: Image.network(imageUrl),
              );
            },
          );
        },
      ),
    );
  } 

 Future<dynamic> getData() async {
    final newEndPoint = "https://api.myjson.com/bins/asy4s";
    final oldEndPoint = "https://api.myjson.com/bins/1fea5o";
    final response = await http.get(newEndPoint);

    final parsedJson = json.decode(response.body);

    setState(() {
      data = parsedJson;
    });
  }
}

Image

2 Answers 2

1

Wrap the image in an Aspect Ratio Widget with aspect Ratio of 16/9

return Card(
                margin: EdgeInsets.all(10),
                color: Colors.green,
                child: AspectRatio( aspectRatio: 16 / 9, child: Image.network(imageUrl)),
              );
Sign up to request clarification or add additional context in comments.

2 Comments

Hi @p2hari, thanks for answering my question. Is not working.
I just saw that the SliverGridDelegateWithFixedCrossAxisCount takes a childAspect Ratio, could you try that
0

Just check the below-mentioned link where if have given the example, where if have created dynamically the widgets and the added. just check the example, maybe it will help you out :

Flutter: Different ListView ItemBuilder layouts based on Network image dimensions

1 Comment

Hi @sagar acharya, thanks for answering my question. I will check the link.

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.