Flutter: RenderBox was not laid out when i use LIstView

Question

I'm trying to create a ListView but when i build the list i get an error. I already read this article: Flutter: RenderBox was not laid out

I tried to do it but i still get the same error

This is the error:

RenderBox was not laid out: RenderFlex#19d12 relayoutBoundary=up22 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'

This is the code:

import 'package:flutter/material.dart';
import 'package:notenverwaltung/UI/Fach/fach_page.dart';
import 'package:notenverwaltung/models/global.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';

class SemesterModel {
  SemesterModel({this.id, this.name, this.durchschnitt, this.jahr, this.notiz});
  final int id;
  String name;
  double durchschnitt;
  String jahr;
  String notiz;
}

class Semester extends StatelessWidget {
  //SemesterModel model;
  static const _semesterUrl = 'http://10.0.2.2:8888/semester';
  static final _headers = {'Content-Type': 'application/json'};

  const Semester({
    Key key,
  }) : super(key: key);

  Future<List<SemesterModel>> getSemester() async {
    final response = await http.get(_semesterUrl);
    //print(response.body);
    if (response.statusCode == 200) {
      List responseJson = json.decode(response.body.toString());
      List<SemesterModel> semesterList = createSemesterList(responseJson);
      print(semesterList);
      for (int i = 0; i < semesterList.length; i++) {
        print(semesterList[i].id);
        print(semesterList[i].name);
        print(semesterList[i].durchschnitt);
        print(semesterList[i].jahr);
        print(semesterList[i].notiz);
      }

      return semesterList;
    } else {
      throw Exception('Failed to load note');
    }
  }

  List<SemesterModel> createSemesterList(List data) {
    List<SemesterModel> list = new List();
    //print(data);

    for (int i = 0; i < data.length; i++) {
      int id = data[i]["id"];
      String name = data[i]["name"];
      double durchschnitt = data[i]["durchschnitt"];
      String jahr = data[i]["jahr"];
      String notiz = data[i]["notiz"];
      SemesterModel semesterObject = new SemesterModel(
          id: id,
          name: name,
          durchschnitt: durchschnitt,
          jahr: jahr,
          notiz: notiz);
      list.add(semesterObject);
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: new FutureBuilder(
          future: getSemester(),
          builder: (context, snapshot) {
            if (snapshot.data == null) {
              return Container(
                child: Container(
                  child: Text("Loading..."),
                ),
              );
            } else if (snapshot.hasData) {
              return Column(children: <Widget>[
                Expanded(
                  child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        var semester = snapshot.data[index];
                        return SemesterCard(
                            semesterName: semester.name,
                            year: semester.jahr,
                            semesterAvg: semester.name,
                            press: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  //DetailsScreen()
                                  builder: (context) => FachScreen(),
                                ),
                              );
                            });
                      }),
                )
              ]);
            } else {
              return new CircularProgressIndicator();
            }
          },
       ));
}

This is the SemesterCard class:

class SemesterCard extends StatelessWidget {
  const SemesterCard({
    Key key,
    this.semesterName,
    this.year,
    this.semesterAvg,
    this.press,
  }) : super(key: key);

  final String semesterName, year;
  final double semesterAvg;
  final Function press;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.only(
        left: kDefaultPadding,
        top: kDefaultPadding / 2,
        bottom: kDefaultPadding / 2,
      ),
      width: size.width * 0.9,
      child: Column(
        children: <Widget>[
          GestureDetector(
            onTap: press,
            child: Container(
              padding: EdgeInsets.all(kDefaultPadding / 2),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(10),
                  bottomRight: Radius.circular(10),
                  topLeft: Radius.circular(10),
                  topRight: Radius.circular(10),
                ),
                boxShadow: [
                  BoxShadow(
                    offset: Offset(0, 10),
                    blurRadius: 50,
                    color: kPrimaryColor.withOpacity(0.23),
                  ),
                ],
              ),
              child: Row(
                children: <Widget>[
                  RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                            text: "$semesterName\n".toUpperCase(),
                            style: Theme.of(context).textTheme.button),
                        TextSpan(
                          text: "$year".toUpperCase(),
                          style: TextStyle(
                            color: kPrimaryColor.withOpacity(0.5),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Spacer(),
                  Text('$semesterAvg',
                      style: Theme.of(context).textTheme.button.copyWith(
                            color: ((this.semesterAvg < 4.0)
                                ? kTextRed
                                : (this.semesterAvg < 5.0 &&
                                        this.semesterAvg > 4.0)
                                    ? kTextYellow
                                    : kTextGreen),
                          ))
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

I had alot of issues with this expand function. Please help!!!

score 0 · Accepted Answer · answered Dec 30 '20 at 21:09

Thing's to Note concerning your code.

When using SingleChildScrollView for the horizontal axis you need to provide it with a fixed height along which the horizontal items will move. This can be done by wrapping the SingleChildScrollView with a container and setting the 'hieght' property.
Don't use Flexible or Expanded in a Flex widget(Column or Row) if it's inside a Scrollable such as SingleChildScrollView.
You don't need a Column wrapping the ListView builder since you want to scroll in the horizontal axis. And also set the axis of the ListView builder to horizontal. And set physics to NeverScrollablePhysics if you want to control the scrolling from the SingleChildScrollView else you should remove the SingleChildScrollView and use just the ListView builder alone wrapped with a container with a set height.

Flutter: RenderBox was not laid out when i use LIstView

1 Answers1