Flutter how give a gap between containers in SliverChildBuilderDelegate

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),
      ),
    );
  }
}