Listview crash the application Flutter

Question

When I comment a line from the list view widget or app it works, but when I uncomment it it doesn't appear at all ...

It is a listview to render a notification list that you receive via api, api is working normally with the future builder, but when I add the listbuilder it stops working ...

CODE

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:mais_mob/src/shared/models/notifications_model.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:transparent_image/transparent_image.dart';

class ProfilePage extends StatefulWidget {
  @override
  _ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  String _search;
  int _page = 0;
  Future<List<NotificationModel>> _getGifs() async {
    http.Response response;

    response = await http.get(
        "http://127.0.0.1:8001/api/v1/notifications/get/f331dfd0-cae4-410d-9700-b9ec72c48d7c");
    List myModels;
    myModels = (json.decode(response.body) as List)
        .map((i) => NotificationModel.fromJson(i))
        .toList();

    return myModels;
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: _future());
  }

  _future() {
    return FutureBuilder(
        future: _getGifs(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return SingleChildScrollView(
              child: Column(
                // mainAxisAlignment: MainAxisAlignment.start,
                // crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Stack(
                    children: <Widget>[
                      Container(
                        width: double.infinity,
                        height: 280.0,
                        decoration: BoxDecoration(
                            color: Color.fromRGBO(162, 56, 0, 1),
                            borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(30.0),
                                bottomRight: Radius.circular(30.0))),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 60.0, left: 20.0),
                        child: InkWell(
                            onTap: () {
                              Navigator.of(context).pop();
                            },
                            child: Icon(
                              Icons.arrow_back,
                              color: Colors.white,
                            )),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(top: 150.0),
                        child: Center(
                          child: Container(
                            height: 200.0,
                            width: 310.0,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(20.0)),
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.black12.withOpacity(0.1)),
                                ]),
                            child: Column(
                              children: <Widget>[
                                Padding(
                                  padding: const EdgeInsets.only(top: 20.0),
                                  child: Container(
                                    height: 100.0,
                                    width: 100.0,
                                    decoration: BoxDecoration(
                                        image: DecorationImage(
                                            image: AssetImage(
                                                "assets/image/profile/profile3.jpg"),
                                            fit: BoxFit.cover),
                                        color: Colors.white,
                                        borderRadius: BorderRadius.all(
                                          Radius.circular(50.0),
                                        ),
                                        boxShadow: [
                                          BoxShadow(
                                              color: Colors.black12
                                                  .withOpacity(0.2),
                                              blurRadius: 10.0,
                                              spreadRadius: 2.0)
                                        ]),
                                  ),
                                ),
                                SizedBox(
                                  height: 5.0,
                                ),
                                Text(
                                  "user['name']",
                                  style: TextStyle(
                                      color: Colors.black,
                                      fontFamily: "Sofia",
                                      fontWeight: FontWeight.w700,
                                      fontSize: 20.0),
                                ),
                                Text(
                                  "user['email']",
                                  style: TextStyle(
                                      color: Colors.black38,
                                      fontFamily: "Sofia",
                                      fontWeight: FontWeight.w300,
                                      fontSize: 16.0),
                                ),
                              ],
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 25.0, top: 40.0, bottom: 10.0),
                    child: Text(
                      "Notificações",
                      style: TextStyle(
                          fontFamily: "Sofia",
                          fontWeight: FontWeight.w700,
                          fontSize: 16.0),
                    ),
                  ),
                  // ListView.builder(
                  //     itemCount: 1,
                  //     itemBuilder: (context, index) {
                  //       return ListTile(
                  //         title: Text(snapshot.data[index].id),
                  //         subtitle: Text('x'),
                  //       );
                  //     }),
                  SizedBox(
                    height: 20.0,
                  )
                ],
              ),
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        });
  }
}

Log terminal

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ flutter: The following assertion was thrown during performResize(): flutter: Vertical viewport was given unbounded height. flutter: Viewports expand in the scrolling direction to fill their container. In this case, a vertical flutter: viewport was given an unlimited amount of vertical space in which to expand. This situation flutter: typically happens when a scrollable widget is nested inside another scrollable widget. flutter: If this widget is always nested in a scrollable widget there is no need to use a viewport because flutter: there will always be enough vertical space for the children. In this case, consider using a Column flutter: instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size flutter: the height of the viewport to the sum of the heights of its children. flutter: flutter: The relevant error-causing widget was: flutter: ListView file:///Users/lucas/www1/mais_mob/lib/src/pages/dashboard/profile.dart:149:28 flutter: flutter: When the exception was thrown, this was the stack: flutter: #0 RenderViewport.performResize. (package:flutter/src/rendering/viewport.dart:1172:15) flutter: #1 RenderViewport.performResize (package:flutter/src/rendering/viewport.dart:1233:6) flutter: #2 RenderObject.layout (package:flutter/src/rendering/object.dart:1703:9) flutter: #3 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #4 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #5 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #6 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #7 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #8 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #9 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #10 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #11 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #12 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #13 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #14 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #15 RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:744:15) flutter: #16 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #17 _RenderSingleChildViewport.performLayout (package:flutter/src/widgets/single_child_scroll_view.dart:497:13) flutter: #18 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #19 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #20 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #21 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #22 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #23 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #24 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #25 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #26 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #27 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #28 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #29 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:105:13) flutter: #30 RenderObject.layout (package:flutter/src/rendering/object.dart:1724:7) flutter: #31 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:163:11) flutter: #32 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:477:7) flutter: #33 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:232:7) flutter: #34 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:391:14) flutter: #35 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1584:7) flutter: #36 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:844:18) flutter: #37 RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:344:19) flutter: #38 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:774:13) flutter: #39 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:283:5) flutter: #40 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1102:15) flutter: #41 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1041:9) flutter: #42 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:957:5) flutter: #46 _invoke (dart:ui/hooks.dart:259:10) flutter: #47 _drawFrame (dart:ui/hooks.dart:217:3) flutter: (elided 3 frames from package dart:async) flutter: flutter: The following RenderObject was being processed when the exception was fired: RenderViewport#7ca7e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE: flutter: needs compositing flutter: creator: Viewport ← IgnorePointer-[GlobalKey#8349f] ← Semantics ← _PointerListener ← Listener ← flutter: _GestureSemantics ← RawGestureDetector-[LabeledGlobalKey#91c65] ← flutter: _PointerListener ← Listener ← _ScrollableScope ← _ScrollSemantics-[GlobalKey#fd66b] ← Scrollable ← flutter: ⋯ flutter: parentData: (can use size) flutter: constraints: BoxConstraints(0.0<=w<=414.0, 0.0<=h<=Infinity) flutter: size: MISSING flutter: axisDirection: down flutter: crossAxisDirection: right flutter: offset: ScrollPositionWithSingleContext#09283(offset: 0.0, range: null..null, viewport: null, flutter: ScrollableState, AlwaysScrollableScrollPhysics -> BouncingScrollPhysics, IdleScrollActivity#87e45, flutter: ScrollDirection.idle) flutter: anchor: 0.0 flutter: This RenderObject had the following descendants (showing up to depth 5): flutter: center child: RenderSliverPadding#68fac NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: child: RenderSliverList#0a754 NEEDS-LAYOUT NEEDS-PAINT flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════ flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#7ca7e NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderViewport#7ca7e NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#26c9e relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#4973c relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#cdd75 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#b1e5a relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#18a2b relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#39c4e relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderFlex#041d2 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: _RenderSingleChildViewport#b5a7c relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderIgnorePointer#9907c relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsAnnotations#9654a relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#7ea85 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderSemanticsGestureHandler#44215 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: RenderPointerListener#11392 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: _RenderScrollSemantics#c667c relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE flutter: Another exception was thrown: RenderBox was not laid out: _RenderSingleChildViewport#b5a7c relayoutBoundary=up7 NEEDS-PAINT flutter: Another exception was thrown: NoSuchMethodError: The getter 'visible' was called on null.

Answer 1

This can happen when trying to nest a Listview or a ListView.builder inside a Column.

You can put the Listview or a ListView.builder using Expanded.

Expanded( 
    child: ListView()
)

OR

You can put the Listview or a ListView.builder using SizedBox and set a value to the 'height' parameter of the SizedBox. The height will be fixed.

SizedBox(
    height: 150,
    child: ListView()
)

OR

You can set true to shrinkWrap property of the ListView.

ListView(
    shrinkWrap: true
)

Answer 2

It is because the listview is taking infinite height If you add shrinkwrap, it will take just enough height for the list to display.

You might have use Flexible() also if that doesn't solve

Add shrinkwrap =true

On

Listview.builder( .... shrinkWrap:true. ),

If still doesn't solve, wrap the Listview or the widget containing it which is child of column into Flexible.

Flexible(flex:1,child :list/widget containing list)

Answer 3

You haven't provided a height that why it is throwing this error.Either wrap it in a Container as suggested bu @Random Guru, or add it as a child of Expanded.

Expanded(
 child:ListView.Builder(...)
)

Answer 4

You are getting the error because you didn't give the ListView.builder a height. You can solve it by wrapping your ListView in a Container and give the Container a height and width property.

Check the code below, It works perfectly:

Container(
      // give it your desired height here
      height: 500,
      // give it your desired height here
      width: MediaQuery.of(context).size.width,
      child: ListView.builder(
        itemCount: 1,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(snapshot.data[index].id),
            subtitle: Text('x'),
          );
        },
      ),
    );

I hope this helps.