Why divider is never displayed in this context

I tried to create a custom tab widget in the Flutter app

I would like to have each specific square which contains 1 divider colored and Text layout into a column widget.

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

I also tried a trick that wrapped Row or Column by Container or IntrinsicHeight like explained here : Trick to display Divider into Row

I also changed the background color but nothing changed.

Why Flutter refuse to display 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 giving me help or a way to resolve this...

Solution

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,
                    )),
              ],
            ),
          ),
        ),
      ],
    ),
  ),
),
)