I'm building an app where it shows the title, author name, number of upvotes, and an image from the subreddit in a page view. Everything is working fine but for some images, the page view is overflowing, how do I fix this?

Here's the overflow error:

Here's my code

import 'dart:convert';

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

class Stardew extends StatefulWidget {
  const Stardew({ Key? key }) : super(key: key);

  @override
  State<Stardew> createState() => _StardewState();
}

class _StardewState extends State<Stardew> {

  List data = [];

  Future<String> getData() async {

    List temp_data = [];

    var response = await http.get(
      Uri.parse("https://m...content-available-to-author-only...p.com/gimme/stardewvalley/100")
    );

    return response.body;
  }


  @override
  Widget build(BuildContext context) {

    return FutureBuilder(
      future: getData(),
      builder: (BuildContext context, AsyncSnapshot snapshot){

        if(snapshot.data == null){
          return Center(child: CircularProgressIndicator(color: Color(0xff008b00)));
        }

        var jsonData = jsonDecode(snapshot.data);
        jsonData = jsonData["memes"];


        return PageView.builder(
          //scrollDirection: Axis.vertical,

          itemCount: jsonData.length,
          itemBuilder: (BuildContext context, int index){

            return Center(
              child: Padding(
                padding: const EdgeInsets.all(1.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                  
                    getImgCard(
                      jsonData[index]["title"], 
                      //jsonData[index]["preview"][2],//preview image
                      jsonData[index]["url"], //original image 
                      jsonData[index]["author"], 
                      (jsonData[index]["ups"]).toString()
                    )

                  ],
                ),
              ),
            );
          },
        );
      }
    );
  }


  Widget getImage(String imgUrl){
    return Container(
      child: Image.network(
        imgUrl,
        
        fit: BoxFit.scaleDown,
        loadingBuilder: (BuildContext context, Widget child,
            ImageChunkEvent? loadingProgress) {
          if (loadingProgress == null) return child;
          return Center(
            child: CircularProgressIndicator(
              value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded/loadingProgress.expectedTotalBytes! : null,
              color: Color(0xff008b00),
            ),
          );
        },
      ),
    );
  }



  Widget getImgCard(String title, String imgUrl, String author, String ups){
    return Card(
      color: Color(0xff000000),
      clipBehavior: Clip.antiAlias,
      child: Column(
        children: [
          
          ListTile(
            leading: RichText(
              text: TextSpan(
                children: [
                  TextSpan(
                    text: ups,
                    
                  ),
                  const WidgetSpan(
                    child: Icon(Icons.arrow_upward, size: 18, color: Color(0xff008b00),),
                  )
                ],
              ),
            ),
            
            title: Text(title, style: TextStyle(color: Colors.white),),


            subtitle: Text(
              "Posted by u/${author}",
              style: TextStyle(color: Colors.white.withOpacity(0.6)),
            ),
          ),
          
          getImage(imgUrl),

          
          Padding(padding: EdgeInsets.only(bottom: 8))
        ],
      ),
    );
  }
}

How do I fix this? I have tried changing the box fit and it did not work. Then I used expaned and flexible widgets and still can't find the answer to this solution. please help me.

CodePudding user response：

Wrap getImage(imgUrl) inside Expanded widget.

CodePudding user response：

I found the answer myself, removing the parent column and wrapping it with SingleChildScrollView fixed the error.

return PageView.builder(
          //scrollDirection: Axis.vertical,

          itemCount: jsonData.length,
          itemBuilder: (BuildContext context, int index){

            return SingleChildScrollView(
              child: Padding(
                padding: const EdgeInsets.all(1.0),
                child: getImgCard(
                  jsonData[index]["title"], 
                  //jsonData[index]["preview"][2],//preview image
                  jsonData[index]["url"], //original image 
                  jsonData[index]["author"], 
                  (jsonData[index]["ups"]).toString()
                ),  
              )
            );
          },
        );