Question 76022 in Flutter Question posted in
The official Flutter documentation can be found here.

Divider is not visible in horizontal list view flutter

  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

Tags:

4

Answers


  1. 0

    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",
                        )),
                  ],
                )),
    Login or Signup to reply.
  2. 0

    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,
            )),
      ),
    ]);
  }
}
    Login or Signup to reply.
  3. 0

    Wrap your divider with SizedBox and give height and width

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

    enter image description here

    Login or Signup to reply.
  4. 0 
        SizedBox(
            width: 100,
            child: Divider(
            thickness: 2,
            color: Colors.lightBlue,
            ),
          ),

    Try adding width to your divider like this

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search