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,
),
);
},
),
),
),
],
);
}
}
CodePudding user response:
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.
CodePudding user response:
CustomScrollView requires you to input a list of slivers, not simple widgets. Try wrapping your ’TestWidget’ in a SliverToBoxAdapter instead :)