FlutterError (A RenderViewport expected a child of type RenderSliver but received a child of type RenderFlex

Question

I have a CustomScrollView widget and inside of it there is a Column which contains a nested SliverList instead of ListView.builder because of some performance issues, and the problem is I cannot use SliverList inside the Column . Below is the full code just copy paste it and run it on you emulator to understand more about the problem.

          import 'package:flutter/material.dart';

          void main() {
            runApp(const MyApp());
          }

          class MyApp extends StatelessWidget {
            const MyApp({Key? key}) : super(key: key);
            @override
            Widget build(BuildContext context) {
              return MaterialApp(
                title: 'Flutter Demo',
                theme: ThemeData(
                  primarySwatch: Colors.blue,
                ),
                home: const MyHomePage(),
              );
            }
          }

          class MyHomePage extends StatelessWidget {
            const MyHomePage({Key? key}) : super(key: key);

            @override
            Widget build(BuildContext context) {
              return const Scaffold(
                body: CustomScrollView(
                  slivers: [
                    SliverToBoxAdapter(child: WidgetTest()),
                  ],
                ),
              );
            }
          }

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

            @override
            State<WidgetTest> createState() => _WidgetTestState();
          }

          class _WidgetTestState extends State<WidgetTest> {
            @override
            Widget build(BuildContext context) {
              return Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 22),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Title",
                          style: Theme.of(context).textTheme.headline1,
                        ),
                      ],
                    ),
                  ),
                  SizedBox(
                    height: 260,
                    child: SliverList(
                      delegate: SliverChildBuilderDelegate(
                        childCount: 5,
                        (context, index) {
                          return Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Container(
                              height: 80,
                              width: 220,
                              color: Colors.red,
                            ),
                          );
                        },
                      ),
                    ),
                  ),
                ],
              );
            }
          }

Answer 1

The issue using Sliver List inside SizedBox .

  SizedBox(
   height: 260,
    child: SliverList(
       delegate: SliverChildBuilderDelegate(

You can Use ListView.builder( here,

SizedBox(
  height: 260,
  child: ListView.builder(
      itemCount: 5,
      itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              height: 80,
              width: 220,
              color: Colors.red,
            ),
          )),
),

else, you need to wrap with CustomScrollView to use SliverList

SizedBox(
    height: 260,
    child: CustomScrollView(
      slivers: [
        SliverList(
          delegate: SliverChildBuilderDelegate(
            childCount: 5,
            (context, index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Container(
                  height: 80,
                  width: 220,
                  color: Colors.red,
                ),
              );
            },
          ),
        )
      ],
    )),

Inside sliver put sliver widget, and other section use normal widget. Also, ListView use sliver inside it.

Answer 2

CustomScrollView requires you to input a list of slivers, not simple widgets. Try wrapping your 'TestWidget' in a SliverToBoxAdapter instead:)