Flutter Silver widget showing A RenderViewport expected a child of type RenderSliver but received a child of type RenderErrorBox

Question

Flutter I am using Silver Widget to show the list but its showing error

A RenderViewport expected a child of type RenderSliver but received a child of type RenderErrorBox

I think some issue is in Silver Widget or when I call the widget in builder ?

My code

class _EventsState extends State<Events> {
  dynamic _events = [];
  dynamic isloader = false;
  @override
  initState() {
    // TODO: implement initState

    super.initState();
    doSomeAsyncStuff();
  }


  Future<void> doSomeAsyncStuff() async {

    setState((){isloader = true;});
    final storage = new FlutterSecureStorage();
    String value = await storage.read(key: 'token');
    print(value);

    String url = 'http://sublimeapi.netcodesolution.com/api/NewsAndEvents/';

    String token = value;
    final response = await http.get(url, headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': 'Bearer $token',
    });
    print('Token : ${token}');
    dynamic eventData = json.decode(response.body);
    print(eventData["Data"]); // this is the data need to show
    setState((){
      isloader = true;
      var _event = eventData["Data"];
      });
  }


  @override
  Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery
        .of(context)
        .padding
        .top;
    return Expanded(
      child: Container(
        child: new CustomScrollView(
          scrollDirection: Axis.vertical,
          slivers: <Widget>[
            new SliverAppBar(
              backgroundColor: Colors.white,
              expandedHeight: statusBarHeight * 5,
              flexibleSpace: new FlexibleSpaceBar(
                title: const Text(
                  'Event Lists',
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 20, color: Color(0xff343A40)),
                ),
              ),
            ),
            isloader ? CircularProgressIndicator() : // user loader there
            new SliverPadding(
                padding: const EdgeInsets.symmetric(vertical: 2.0),
                sliver: new SliverFixedExtentList(
                  itemExtent: 280.0,
                  delegate: new SliverChildBuilderDelegate(
                          (builder, index) => _buildListItem(index),
                      childCount: _events.length),
                )),
          ],
        ),
      ),
    );
  }

  Widget _buildListItem(int index) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return GestureDetector(
      child: Center(
        child: Card(
          margin: EdgeInsets.zero,
          clipBehavior: Clip.antiAlias,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30),
          ),
          elevation: 30,
          child: Container(
            child: Stack(
              children: <Widget>[
                Container(
                  width: width * 0.6,
                  height: height * 0.17,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(
                        'assets/images/61.jpg',
                      ),
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: height * 0.17),
                  child: Container(
                    height: height * 0.15,
                    color: Colors.white,
                    width: MediaQuery.of(context).size.width * 0.6,
                    child: Padding(
                      padding: const EdgeInsets.only(
                          top: 30, bottom: 7, left: 15, right: 15),
                      child: Row(
                        children: <Widget>[
                          Flexible(
                            child: Text(
                              _events[index]['Description'],
                              style: TextStyle(
                                  color: Color(0xff343A40),
                                  fontFamily: 'OpenSans',
                                  fontWeight: FontWeight.bold,
                                  fontSize: 15),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                Positioned.fill(
                  child: Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        margin: EdgeInsets.only(left: width * 0.02),
                        child: ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(12)),
                          child: Container(
                            height: height * 0.08,
                            width: width * 0.4,
                            color: Color(0xff343A40),
                            child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Text(
                                    _events[index]['CreatedOn']
                                        .substring(0, 10),
                                    style: TextStyle(
                                        fontSize: 20,
                                        color: Color(0xffFFFFFF),
                                        fontFamily: 'OpenSans',
                                        fontWeight: FontWeight.bold),
                                  ),
                                ]),
                          ),
                        ),
                      )),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

I upload the whole code because done know issue is in Silver widget or When calling the _buildListItem widget its showing error in SliverPadding

Answer 1

Changes I've done.

1. As you have used Expanded in the top parent, I have removed Expanded.

2. Instead of this

isloader ? CircularProgressIndicator() : // user loader there new SliverPadding( padding: const EdgeInsets.symmetric(vertical: 2.0), sliver: new SliverFixedExtentList( itemExtent: 280.0, delegate: new SliverChildBuilderDelegate( (builder, index) => _buildListItem(index), childCount: _events.length), ), ),

I used this

new SliverFixedExtentList(
              itemExtent: 280.0,
              delegate: new SliverChildBuilderDelegate(
                      (builder, index) => _buildListItem(index),
                  childCount: _events.length),
            )

This is complete code:

class _EventsState extends State<Events> {
  dynamic _events = [];
  dynamic isloader = false;
  @override
  initState() {
    // TODO: implement initState

    super.initState();
    doSomeAsyncStuff();
  }


  Future<void> doSomeAsyncStuff() async {

    setState((){isloader = true;});
    final storage = new FlutterSecureStorage();
    String value = await storage.read(key: 'token');
    print(value);

    String url = 'http://sublimeapi.netcodesolution.com/api/NewsAndEvents/';

    String token = value;
    final response = await http.get(url, headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': 'Bearer $token',
    });
    print('Token : ${token}');
    dynamic eventData = jsonDecode(response.body);
    print(eventData["Data"]); // this is the data need to show
    setState((){
      isloader = true;
      if(eventData["Data"] != null){
        _events = eventData["Data"];
      }
    });
  }


  @override
  Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery
        .of(context)
        .padding
        .top;
    return Container(
        child: new CustomScrollView(
          scrollDirection: Axis.vertical,
          slivers: <Widget>[
            new SliverAppBar(
              backgroundColor: Colors.white,
              expandedHeight: statusBarHeight * 5,
              flexibleSpace: new FlexibleSpaceBar(
                title: const Text(
                  'Event Lists',
                  textAlign: TextAlign.left,
                  style: TextStyle(fontSize: 20, color: Color(0xff343A40)),
                ),
              ),
            ),
            new SliverFixedExtentList(
              itemExtent: 280.0,
              delegate: new SliverChildBuilderDelegate(
                      (builder, index) => _buildListItem(index),
                  childCount: _events?.length),
            )// user loader there
          ],
        ),
      );
  }

  Widget _buildListItem(int index) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return GestureDetector(
      child: Center(
        child: Card(
          margin: EdgeInsets.zero,
          clipBehavior: Clip.antiAlias,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(30),
          ),
          elevation: 30,
          child: Container(
            child: Stack(
              children: <Widget>[
                Container(
                  width: width * 0.6,
                  height: height * 0.17,
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(
                        'assets/images/61.jpg',
                      ),
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: height * 0.17),
                  child: Container(
                    height: height * 0.15,
                    color: Colors.white,
                    width: MediaQuery.of(context).size.width * 0.6,
                    child: Padding(
                      padding: const EdgeInsets.only(
                          top: 30, bottom: 7, left: 15, right: 15),
                      child: Row(
                        children: <Widget>[
                          Flexible(
                            child: Text(
                              _events[index]['Description'],
                              style: TextStyle(
                                  color: Color(0xff343A40),
                                  fontFamily: 'OpenSans',
                                  fontWeight: FontWeight.bold,
                                  fontSize: 15),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                Positioned.fill(
                  child: Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        margin: EdgeInsets.only(left: width * 0.02),
                        child: ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(12)),
                          child: Container(
                            height: height * 0.08,
                            width: width * 0.4,
                            color: Color(0xff343A40),
                            child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Text(
                                    _events[index]['CreatedOn']
                                        .substring(0, 10),
                                    style: TextStyle(
                                        fontSize: 20,
                                        color: Color(0xffFFFFFF),
                                        fontFamily: 'OpenSans',
                                        fontWeight: FontWeight.bold),
                                  ),
                                ]),
                          ),
                        ),
                      )),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}