Flutter: RenderBox was not laid out when working with ListView

Question

I am trying to display to Listviews, one horizontal and the other is vertical. The horizontal one is working, but the vertical Listview is showing this error "RenderBox was not laid out".

I have read some other answers regarding this error here on stackoverflow, but still cant make it work.

when i run it, i get this error "RenderBox was not laid out: RenderRepaintBoundary#6bd44 relayoutBoundary=up14 NEEDS-PAINT 'package:flutter/src/rendering/box.dart':"

import 'package:flutter/material.dart';
import 'package:appone/screens/detail.dart';
import 'package:http/http.dart' as http;
import 'package:appone/screens/main_drawer.dart';
import 'dart:convert';
import 'package:appone/screens/wp-api.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Teds Pharma',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Teds Pharma'),
        ),
        drawer: MainDrawer(),
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(left: 22.0, right: 22, top: 40),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                  height: 20,
                ),
                Container(
                  width: double.infinity,
                  height: 60,
                  margin: EdgeInsets.symmetric(horizontal: 0),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(8),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black.withOpacity(.12),
                            offset: Offset(0, 10),
                            blurRadius: 30)
                      ]),
                  child: Center(
                    child: Padding(
                      padding: EdgeInsets.only(left: 18, right: 12),
                      child: TextField(
                        decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: "Search...",
                            hintStyle: TextStyle(fontSize: 30),
                            suffixIcon: Icon(Icons.search)),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 18.0, bottom: 18),
                  child: Container(
                    height: 180,
                    child: FutureBuilder(
                        future: fetchfiveWpPosts(),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            return ListView.builder(
                                itemCount: snapshot.data.length,
                                scrollDirection: Axis.horizontal,
                                itemBuilder: (BuildContext context, int index) {
                                  Map wppost = snapshot.data[index];
                                  var imageurl =
                                      wppost['acf']['store_logo']['url'];
                                  return GestureDetector(
                                    onTap: () {
                                      Navigator.of(context).push(
                                          MaterialPageRoute(
                                              builder: (_) => Detail()));
                                    },
                                    child: Padding(
                                      padding: const EdgeInsets.all(8.0),
                                      child: Container(
                                        width: 120,
                                        height: 160,
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(16),
                                        ),
                                        child: ClipRRect(
                                          borderRadius:
                                              BorderRadius.circular(8),
                                          child: FadeInImage.assetNetwork(
                                              placeholder: 'assets/bg.jpg',                                            
                                              image: imageurl,
                                              fit: BoxFit.cover,),
                                        ),
                                      ),
                                    ),
                                  );
                                });
                          }
                          return Center(child: CircularProgressIndicator());
                        }),
                  ),
                ),
              Padding(padding: const EdgeInsets.only(top: 18.0, bottom: 18),
                child: Container(
        child: FutureBuilder(
          future: fetchfiveWpPosts(),
          builder: (context,snapshot){
            if(snapshot.hasData){
              return ListView.builder(
                itemCount: snapshot.data.length,
                scrollDirection: Axis.vertical,
                itemBuilder: (BuildContext context, int index){
                  Map wppost = snapshot.data[index];
                  var imageurl = wppost['acf']['store_logo']['url'];
                return Card(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      //Image.network(imageurl),
                      FadeInImage.assetNetwork(placeholder: 'assets/loading.gif', image: imageurl),
                      Text(wppost['title']['rendered']),
                    ],
                  ),
                );
                }, 
              );
            }
            return CircularProgressIndicator();
          },
        ),
      ),
              ),
                SizedBox(
                  height: 30,
                )
              ],
            ),
          ),
        ));
  }
}

Solution 1

This happens often when you're trying to place Scrollable widget into an infinite heigth widget or infinite heigth (Column) widget into scrollable (SingleChildScrollView,ListView) .

This means you're trying to use SingleChildScrollView> Column> ListView> Column

You should add following property to Column an ListView

Widget build(BuildContext context) {
    return SingleChildScrollView(
    child: Column(
      mainAxisSize: MainAxisSize.min, // Use children total size
    children: [
      ListView.builder(
      itemCount : 10,
        shrinkWrap: true, // Use  children total size                
        itemBuilder : (a, b)=>Text("ffffffffffff")     
      )
    ],
    ),); 
  }

Solution 2

use this line inside column mainAxisSize: MainAxisSize.min in place this line mainAxisAlignment: MainAxisAlignment.center, also this line shrinkWrap: true inside ListView.builder and this physics: NeverScrollableScrollPhysics() And put this line physics: AlwaysScrollableScrollPhysics() inside the SingleChildScrollView, because you cannot repeatedly scroll in more than one widget (SingleChildScrollView,ListView.builder) in this case.

Comments

[Habtamu Soressa]

Thank you very much, this fixed my issue.

[Constantin N.]

You're welcome. Don't forget to validate my answer and also upvote it :-)

[Juan Mendez]

what a clear answer, thanks. I was struggling and it had to do with a custom widget hosting the SingleChildScrollView.

[mcfred]

Amazing! Genius! Fantabulous. You saved my day!!