Separador/Divisor en SliverList flutter

Deseamos proponerte la mejor solución que hemos encontrado en todo internet. Nosotros esperamos que te resulte útil y si deseas comentarnos algo que nos pueda ayudar a perfeccionar nuestra información hazlo con total libertad.

Similar a ListView.separated

  import 'dart:math' as math;

  List values = List();
  for (int i = 1; i <= 50; i++) 
    values.add(i.toString());
  

  return CustomScrollView(
    semanticChildCount: values.length,
    slivers: [
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) 
            final int itemIndex = index ~/ 2;
            if (index.isEven) 
              return Padding(
                  child: Text(values[itemIndex]),
                  padding: EdgeInsets.all(16));
            
            return Divider(height: 0, color: Colors.grey);
          ,
          semanticIndexCallback: (Widget widget, int localIndex) 
            if (localIndex.isEven) 
              return localIndex ~/ 2;
            
            return null;
          ,
          childCount: math.max(0, values.length * 2 - 1),
        ),
      ),
    ],
  );

formas simples,

Utilizando SliverFillRemaining

devuelve CustomScrollView (fragmentos: [
      SliverFillRemaining(
        child: ListView.separated(
            itemCount:value.length,
            //shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            //padding: EdgeInsets.all(0),
            separatorBuilder: (BuildContext context, int index)
              return Divider();
            ,
            itemBuilder: (BuildContext context, int index) 
              //widget return
            )
      ),

Using SliverList

 SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) 
                return Column(
                  children: [
                    SizedBox(height: 5),
                    //your main widget is here
                    SizedBox(height: 5),
                    Divider(height: 1)
                  ], );  , childCount: modelo.longitud, ), )

Aunque esta pregunta es muy antigua, agregaré mi respuesta para futuros lectores. Simplemente envuelve tu widget con un Container y luego le das al contenedor un borde inferior. Aquí hay un ejemplo:

Container(
    decoration: BoxDecoration(
        border: Border(
            bottom: BorderSide(color: Colors.grey.shade300, width: 0.5))),
    child: YourWidget(),
  ),

Te invitamos a reafirmar nuestra tarea poniendo un comentario y dejando una valoración te lo agradecemos.

---

---

Utiliza Nuestro Buscador