Flutter how give a gap between containers in SliverChildBuilderDelegate - flutter

Question

I am using SliverAppBar in my app which is working fine but problem is in list of container its not increasing gap between list
[
My code
import 'package:flutter/material.dart';
class ClaimsScreen extends StatefulWidget {
#override
_ClaimsScreenState createState() => _ClaimsScreenState();
}
class _ClaimsScreenState extends State<ClaimsScreen> {
final List _claims = [
{
'av': '27,000',
'cv': '25,000',
'cqno': '3442121',
'status': 'CLAIM PAYMENT PRCESSED',
'cno': '00651211',
},
{
'av': '29,000',
'cv': '25,000',
'cqno': '3442121',
'status': 'CLAIM PAYMENT PRCESSED',
'cno': '00651211',
},
];
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
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(
'Claims',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20,
color: Color(0xff00AEF0),
fontWeight: FontWeight.bold),
),
),
),
new SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 20.0),
sliver: new SliverFixedExtentList(
itemExtent: 150.0,
delegate: new SliverChildBuilderDelegate(
(builder, index) => BenefitList(index),
childCount: _claims.length),
)),
],
),
),
);
}
Widget BenefitList(int index) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Container(
child: Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 30,
child: Container(
child: Padding(
padding: const EdgeInsets.only(right: 10, left: 10, top: 10),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Approved Value : ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
Text(
_claims[index]['av'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
),
],
),
SizedBox(height: height* 0.005,),
Row(
children: <Widget>[
Text(
'Claim Value : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cv'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
),
],
),
SizedBox(height: height* 0.005,),
Row(
children: <Widget>[
Text(
'Claim No : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cno'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
),
],
),
Row(
children: <Widget>[
Text(
'Cheque Number : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cqno'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
),
],
),
SizedBox(height: height* 0.005,),
Row(
children: <Widget>[
Text(
'Status : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['status'],
style: TextStyle(
fontWeight: FontWeight.bold, color: Color(0xff00AEF0)),
)
],
)
],
),
),
),
),
);
}
}
I try to increase the number if itemExtent but it's just increasing the height of card not increasing the gap. I just need to add some gap between each card so when they increase it will automatically show some gap between them. Also, I try to add margin in Container but its also not working

Answer 1

By default SliverFixedExtentList has no gaps between its items. Consider using SliverList instead. Also FYI the new keyword is optional and does not need to be used.

Answer 2

You can copy paste run full code below
You can use Padding and EdgeInsets.only(top: 30)
return Padding(
padding: EdgeInsets.only(top: 30),
child: Container(
child: Card(
working demo
full code
import 'package:flutter/material.dart';
class ClaimsScreen extends StatefulWidget {
#override
_ClaimsScreenState createState() => _ClaimsScreenState();
}
class _ClaimsScreenState extends State<ClaimsScreen> {
final List _claims = [
{
'av': '27,000',
'cv': '25,000',
'cqno': '3442121',
'status': 'CLAIM PAYMENT PRCESSED',
'cno': '00651211',
},
{
'av': '29,000',
'cv': '25,000',
'cqno': '3442121',
'status': 'CLAIM PAYMENT PRCESSED',
'cno': '00651211',
},
];
#override
Widget build(BuildContext context) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
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(
'Claims',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 20,
color: Color(0xff00AEF0),
fontWeight: FontWeight.bold),
),
),
),
new SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 20.0),
sliver: new SliverFixedExtentList(
itemExtent: 150.0,
delegate: new SliverChildBuilderDelegate(
(builder, index) => BenefitList(index),
childCount: _claims.length),
)),
],
),
),
);
}
Widget BenefitList(int index) {
double statusBarHeight = MediaQuery.of(context).padding.top;
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;
return Padding(
padding: EdgeInsets.only(top: 30),
child: Container(
child: Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
elevation: 30,
child: Container(
child: Padding(
padding: const EdgeInsets.only(right: 10, left: 10, top: 10),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Text(
'Approved Value : ',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
Text(
_claims[index]['av'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
),
],
),
SizedBox(
height: height * 0.005,
),
Row(
children: <Widget>[
Text(
'Claim Value : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cv'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
),
],
),
SizedBox(
height: height * 0.005,
),
Row(
children: <Widget>[
Text(
'Claim No : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cno'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
),
],
),
Row(
children: <Widget>[
Text(
'Cheque Number : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['cqno'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
),
],
),
SizedBox(
height: height * 0.005,
),
Row(
children: <Widget>[
Text(
'Status : ',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_claims[index]['status'],
style: TextStyle(
fontWeight: FontWeight.bold,
color: Color(0xff00AEF0)),
)
],
)
],
),
),
),
),
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ClaimsScreen(),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}