Divider is not visible in horizontal list view flutter

Question

  Widget build(BuildContext context) {
    return ListView.builder(
        scrollDirection: Axis.horizontal,
        shrinkWrap: false,
        physics: const BouncingScrollPhysics(),
        itemBuilder: (context, int i) {
          return Center(
            child: Card(
              child: GestureDetector(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: const [
                    SizedBox(
                      height: 15,
                      width: 100,
                      child: ClipRRect(
                          //borderRadius: BorderRadius.only(topRight: 10,topLeft: 10),
                          child: Text("admistraction")),
                    ),
                    Divider(
                      thickness: 2,
                      color: Colors.lightBlue,
                    ),
                    Padding(
                        padding: EdgeInsets.only(left: 15.0, right: 5),
                        child: Text(
                          "Start Learning",
                        )),
                  ],
                ),
              ),
            ),
          );
        },
        itemCount: 5);
  }

Divider horizontal line is not visible in list view. I tried to wrap a divider in row or column I also wrap it in Container but its not working its working fine with vertical but in horizontal its not visisbale

Nams · Answer 1 · 2023-03-01T06:55:15.293

1

Wrap your divider with SizedBox and give height and width

          SizedBox(
                  height: 15,
                  width: 100,
                  child: Divider(
                    thickness: 2,
                    color: Colors.lightBlue,
                  ),
                ),

edited Mar 01 '23 at 06:55

answered Mar 01 '23 at 05:36

Nams

282
9

not working in horizontal list view – prashant kumar Mar 01 '23 at 06:31
Please add your current and expected output image – Nams Mar 01 '23 at 06:49
It's working, I have added output image, please check – Nams Mar 01 '23 at 06:57
is not working in listview.builder – prashant kumar Mar 09 '23 at 11:31

Harsh Sureja · Answer 2 · 2023-03-01T06:18:31.727

If you are using Column then you should wrap with IntrinsicHeight and for Row required IntrinsicWidth to show divider.

In your case you are using Column you should use IntrinsicHeight.

Try this code:

                IntrinsicHeight( <---------------- just add this widget
                child:Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: const [
                    SizedBox(
                      height: 15,
                      width: 100,
                      child: ClipRRect(
                          //borderRadius: BorderRadius.only(topRight: 10,topLeft: 10),
                          child: Text("admistraction")),
                    ),
                    SizedBox(
                     height: 50,
                     width:50
                    child: Divider(
                      thickness: 2,
                      color: Colors.lightBlue,
                    )),
                    Padding(
                        padding: EdgeInsets.only(left: 15.0, right: 5),
                        child: Text(
                          "Start Learning",
                        )),
                  ],
                )),

Add `sizedBox` to abover `DIvider`. see I have edited changes in answer. — Harsh Sureja, Mar 01 '23 at 06:20
after wrapping with sizedBox it create space but divider line is not visible — prashant kumar, Mar 01 '23 at 06:33

score 0 · Answer 3 · answered Mar 01 '23 at 05:28

Try to Add Height to Divider it will work. Just adding a small sample for reference.

The usage will be:

HorizontalOrLine(height: 10,label: "OR")

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class HorizontalOrLine extends StatelessWidget {
  const HorizontalOrLine({
    this.label,
    this.height,
  });

  final String label;
  final double height;

  @override
  Widget build(BuildContext context) {

    return Row(children: <Widget>[
      Expanded(
        child: new Container(
            margin: const EdgeInsets.only(left: 10.0, right: 15.0),
            child: Divider(
              color: Colors.black,
              height: height,
            )),
      ),

      Text(label),

      Expanded(
        child: new Container(
            margin: const EdgeInsets.only(left: 15.0, right: 10.0),
            child: Divider(
              color: Colors.black,
              height: height,
            )),
      ),
    ]);
  }
}

Anirudh Pai · Answer 4 · 2023-03-01T07:02:06.477

0

    SizedBox(
            width: 100,
            child: Divider(
            thickness: 2,
            color: Colors.lightBlue,
            ),
          ),

Try adding width to your divider like this

edited Mar 01 '23 at 07:02

answered Mar 01 '23 at 06:55

Anirudh Pai

99
4

Divider is not visible in horizontal list view flutter

4 Answers4