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

Flutter – Why divider is never displayed in this context

I try to create a custom tab widget into Flutter app

I would like to have each specific square which contain 1 divider colored and Text layouted into Column widget.

My text display correctly but all tried code never displayed my color blue divider.

I also try trick that wrapped Row or Column by Container or IntrinsicHeight like explain here : Trick to display Divider into Row

I also changed background color but nothing change.

Why flutter refuse to display me my Divider widget in this context :

class _TabAppState extends State<TabApp>
{
  @override
  Widget build(BuildContext context)
  {
    return Container(
      width: 250,
      height: 200,
      color: const Color(0xFF000000),
      child: IntrinsicHeight(
          child: Row(
            children: <Widget>[
              Divider(color: Colors.blue),
              Container(height: 100, child: Column(children: [Divider(color: Colors.blue, height: 25, thickness: 2, indent: 5, endIndent: 5), Text('Tab 1', style: Theme.of(context).textTheme.labelLarge)])),
              SizedBox(height: 100, child: Column(children: [Divider(color: Colors.blue, height: 25, thickness: 2, indent: 5, endIndent: 5)])),
              Column(children: [VerticalDivider(color: Colors.blue, width: 30), Text('Tab 2', style: Theme.of(context).textTheme.labelLarge)]),
              Container(child: Column(children: [SizedBox(height: 10, width: 50), Text('Tab 3', style: Theme.of(context).textTheme.labelLarge)])),
              Container(child: Column(children: [Divider(color: Colors.blue, height: 25, thickness: 2, indent: 5, endIndent: 5)])),
            ],
        ),
      ),
    );
  }
}

Thank you for give me help or way to resolve this…

Tags:

2

Answers


  1. 0

    The main issue is here how constraints is passing down to the Divider widget. You can use VerticalDivider in Row, and the contains are not getting the proper constraints(width) for Divider widget. you can use several approach like fixed width, Expanded or IntrinsicWidth. Here is the demo

    Container(
  width: 250,
  height: 200,
  color: const Color(0xFF000000),
  child: IntrinsicHeight(
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        VerticalDivider(
          color: Colors.blue,
          thickness: 2,
        ),
        IntrinsicWidth(
          // or any constraints widget
          child: Container(
            height: 100,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Divider(
                  color: Colors.blue,
                  indent: 5,
                  endIndent: 5,
                  thickness: 2,
                ),
                Text('Tab 1',
                    style: TextStyle(
                      color: Colors.white,
                    )),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
),
)
    Login or Signup to reply.
  2. 0

    The issue you’re facing is related to the way you are trying to display Divider widgets within a Row. By default, Divider widgets take up very little space, and they might not display as expected when used within a Row without enough space. Here’s a modified version of your code that should display the blue dividers as intended:

    class _TabAppState extends State<TabApp> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 250,
      height: 200,
      color: const Color(0xFF000000),
      child: IntrinsicHeight(
        child: Row(
          children: <Widget>[
            // Use Container to give some width to the Divider
            Container(
              width: 2, // Adjust the width as needed
              color: Colors.blue,
            ),
            Container(
              height: 100,
              child: Column(
                children: [
                  Divider(color: Colors.blue),
                  Text('Tab 1', style: Theme.of(context).textTheme.headline6),
                ],
              ),
            ),
            SizedBox(
              height: 100,
              child: Column(
                children: [
                  Divider(color: Colors.blue),
                ],
              ),
            ),
            Column(
              children: [
                // Use VerticalDivider to create a vertical divider
                VerticalDivider(
                  color: Colors.blue,
                  width: 2, // Adjust the width as needed
                ),
                Text('Tab 2', style: Theme.of(context).textTheme.headline6),
              ],
            ),
            Container(
              child: Column(
                children: [
                  SizedBox(height: 10, width: 50),
                  Text('Tab 3', style: Theme.of(context).textTheme.headline6),
                ],
              ),
            ),
            Container(
              child: Column(
                children: [
                  Divider(color: Colors.blue),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    In this code:

    I’ve wrapped the Divider widgets with Container to give them some width (in the case of horizontal dividers) and height (in the case of vertical dividers) so that they are visible within the Row.

    I’ve adjusted the width and height of the Divider widgets and the VerticalDivider widget as needed for your layout.

    This should ensure that your blue dividers are displayed correctly within your custom tab widget. Adjust the width and height values as necessary to achieve the desired visual appearance.

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

Back To Top
Search