SliverList is not showing in FLutter

Question

I'm using SliverAppBar and SliverLsit that's wrapped in a CustomScrollView. I am trying to build a widget with sliver list but nothing renders, my screen shows completely in blank.
The goal is to have a search bar until the middle of the screen and the other middle will be occupied by a List View Builder (inside a FutureBuilder).

When I switch to debug it throws an uncaught exception:

The ParentDataWidget Positioned(left: 39.3, top: 78.1, width: 314.2) wants to apply ParentData of type StackParentData to a RenderObject, which has been set up to accept ParentData of incompatible type FlexParentData.

Usually, this means that the Positioned widget has the wrong ancestor RenderObjectWidget. Typically, Positioned widgets are placed directly inside Stack widgets.
The offending Positioned is currently placed inside a Column widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  SizedBox ← Positioned ← Column ← Container ← SliverToBoxAdapter ← ShrinkWrappingViewport ← IgnorePointer-[GlobalKey#44b45] ← Semantics ← Listener ← _GestureSemantics ← ⋯
When the exception was thrown, this was the stack

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      key: _scaffoldKey,
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              child: CustomScrollView(
                shrinkWrap: true, 
                slivers: [
                
                SliverToBoxAdapter(
                  child: Container(
                    child: Column(
                      children: [
                        SizedBox(
                          child: ClipPath(
                              clipper: BackgroundWaveClipper(),
                              child: Container(
                                width: MediaQuery.of(context).size.width,
                                height:
                                    MediaQuery.of(context).size.height * 0.1,
                                
                              ),),
                        ),
                        //this is the search bar part
                        Positioned(
                          child: SizedBox(
                            child: TextFormField(
                              controller: textController,
                              decoration: InputDecoration(
                                hintText: 'Breed search...',
                              onChanged: (value) {
                                setState(() {
                                  filter = value;
                                });
                              },
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                SliverList(
                  delegate: SliverChildListDelegate([
                    Column(
                      children: [
                        Container(
                          margin: const EdgeInsets.only(top: 5, bottom: 5),
                          padding: const EdgeInsets.only(left: 20, right: 20),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Center(
                                child: Container(
                                  width: MediaQuery.of(context).size.width -
                                      (MediaQuery.of(context).size.width / 3.5),
                                  height: 0,
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(
                                          Dimensions.radius20),
                                      color: Colors.white),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Expanded(
                            child: FutureBuilder(
                                future: futureData,
                                builder: (context, snapshot) {
                                  if (snapshot.hasData) {
                                    return ListView.builder(
                                        itemCount: _filteredBreedList.isEmpty
                                            ? BreedList.length
                                            : _filteredBreedList.length,
                                        itemBuilder:
                                            (BuildContext context, int index) {
                                          return SingleChildScrollView(
                                              child:
                                                   BookPageBody(
                                                          breedlist: BreedList,
                                                          index: index,
                                                        )
                                                      );
                                        });
                                  } else if (snapshot.hasError) {
                                    return Text("${snapshot.error}");
                                  }
                                  return const Center(
                                    child: GFLoader(),
                                  );
                                })),
                      ],
                    ),
                  ]),
                )
              ]),
            ),
          ],
        ),
      ),

Tip: provide a minimal reproducible example or at least shrink your code to make easier to help. — Alex
– Alex, Commented Jul 27, 2022 at 7:54

Md. Yeasin Sheikh · Accepted Answer · 2022-07-27 09:09:37Z

Firstly, you don't need to use SingleChildScrollView and you can remove shrinkWrap: true, while it is expensive.

   return Scaffold(
      backgroundColor: Colors.white,
      body: CustomScrollView(
        // shrinkWrap: true,
        slivers: [

Don't use Positioned widget inside Column, you can use it inside stack.If you need to align, use Align widget in this case

//this is the search bar part
SizedBox(
  child: TextFormField(

Inside CustomScrollView you don't need other scrollable widget, else wrap with SizedBox, Also Don't use Expanded because scrollable widget have infinite height.

),
SliverList(
  delegate: SliverChildListDelegate(
    [
      Column(
        children: [
          //...
          FutureBuilder(
              future: Future.delayed(Duration.zero),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Column(
                    children: List.generate(
                        4, (index) => Text("item $index")),
                  )

And you are good to go. More about CustomScrollView

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body:
          // SingleChildScrollView(
          //   child: Container(
          // child:
          CustomScrollView(
        // shrinkWrap: true,
        slivers: [
          SliverToBoxAdapter(
            child: Container(
              child: Column(
                children: [
                  SizedBox(
                    child: ClipPath(
                      child: Container(
                        color: Colors.red,
                        width: MediaQuery.of(context).size.width,
                        height: MediaQuery.of(context).size.height * 0.1,
                      ),
                    ),
                  ),
                  //this is the search bar part
                  Align(
                      child: SizedBox(
                    child: TextFormField(
                      decoration: InputDecoration(
                        hintText: 'Breed search...',
                      ),
                    ),
                  ))
                ],
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Column(
                  children: [
                    //...
                    FutureBuilder(
                        future: Future.delayed(Duration.zero),
                        builder: (context, snapshot) {
                          if (snapshot.hasData) {
                            return Column(
                              children: List.generate(
                                  4, (index) => Text("item $index")),
                            );
                          } else if (snapshot.hasError) {
                            return Text("${snapshot.error}");
                          }
                          return Center(
                            child: Container(),
                          );
                        })
                  ],
                ),
              ],
            ),
          )
        ],
      ),
      //   ),
      // ),
    );
  }

Collectives™ on Stack Overflow

SliverList is not showing in FLutter

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related