ShadTabs does not pass down correct size information

[nagylzs]

Steps to reproduce

If I use this code:

contentConstraints: const BoxConstraints(maxWidth: 1280,maxHeight: 1000) 

then ShadTab content receives the correct available height. However, if I do not specify contentConstraints , then infinite size is passed down even if there is finite space available. It makes adding scrollables (and other types of widgets that require finite size) to ShadTab widgets impossible.

For example, if I want to place a ListView inside a ShadTab, and I want that ListView to fill available space inside the tab content, then it is currently impossible. I think this is a bug, because the same thing works perfectly with material TabBarView , also with Cupertino and many other similar tab widgets; but it fails with ShadTab.

Expected results

If the ShadTabs has finite space contraints, then it should calculate the space that is available to its ShadTab widgets, and pass it down. (In flutter, constraints should go down and sizes go up; but with ShadTab, constraints do not go down correctly.) I understand, that contentConstraints was created so that one can override the constraints for the tabs. But specifying fixed height should not be mandatory, and it sould be possible to add a scrollable widget as ShadTab content (and other widgets that require finite size constraints).

Actual results

Unbounded viewport error, BoxConstraints forces an infinite height etc.

shadcn_ui version

0.45.2

Platform

MacOS, Linux

Code sample

Code sample

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ShadApp(
      home: Scaffold(
        body: SizedBox(
          // the ShadTabs has finite size
          width: 1000,
          height: 1000,
          child: ShadTabs<String>(
            value: 'test',
            tabs: [
              ShadTab(
                value: 'test',
                content: testContent(context),
                child: Text('Test'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget testContent(BuildContext context) {
    // the tab content receives infinite size
    // This prints testContent constraints: BoxConstraints(0.0<=w<=1000.0, 0.0<=h<=Infinity)
    // If you want to use a ListView as the content, and you want it to fill the available space,
    // the you simply cannot.
    // This works:
    // return DebugConstraints(label: "testContent", child: Text('Test content'));
    // This does not "BoxConstraints forces an infinite height"
    return DebugConstraints(
      label: "testContent",
      child: SizedBox.expand(child: Text('Test content')),
    );
  }
}

class DebugConstraints extends StatelessWidget {
  final String label;
  final Widget child;
  const DebugConstraints({super.key, required this.label, required this.child});
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        debugPrint('$label constraints: $constraints');
        return child;
      },
    );
  }
}

Flutter Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel , 3.38.1, on Manjaro Linux 6.18.8-1-MANJARO, locale hu_HU.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 36.1.0)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Connected device (2 available)
[✓] Network resources

[nank1ro]

Try ShadTab.expandContent = true

[nagylzs]

expandContent=true seems to be working, thank you. Why is it not the default behaviour? There must be a reason.

[nagylzs]

Hmm in the real project (not the example), I still have this error:

    return Scaffold(
      body: SizedBox.expand(
        child: DebugConstraints(
          label: 'ShadTabs root',
          child: ShadTabs<String>(
            value: s.selectedTab,
            onChanged: (value) => {s.setSelectedTab(value)},
            tabs: [
              ShadTab(
                expandContent: true,
                value: 'settings',
                content: DebugConstraints(
                  label: 'SettingsPage root',
                  child: SettingsPage(),
                ),
                child: const PadWrap(
                  children: [Icon(LucideIcons.settings), Text('Settings')],
                ),
              ),
            ],
          ),
        ),
      ),
    );

And I get this in the logs:

ShadTabs root constraints: BoxConstraints(w=1280.0, h=720.0)
SettingsPage root constraints: BoxConstraints(0.0<=w<=1280.0, 0.0<=h<=Infinity)

but I'm not sure why. I don't see any difference between this and the example project.

[nagylzs]

All right, I could recreate the exception in the example project. The key point is that you have to use at least two tabs.

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

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ShadApp(
      home: Scaffold(
        body: SizedBox.expand(
          child: DebugConstraints(
            label: "ShadTabs root",
            child: ShadTabs<String>(
              value: 'test1',
              tabs: [
                ShadTab(
                  expandContent: true,
                  value: 'test1',
                  content: testContent(context, 'testContent1'),
                  child: Text('Test1'),
                ),
                ShadTab(
                  expandContent: true,
                  value: 'test2',
                  content: testContent(context, 'testContent2'),
                  child: Text('Test2'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget testContent(BuildContext context, String label) {
    // the tab content receives infinite size
    // This prints testContent constraints: BoxConstraints(0.0<=w<=1000.0, 0.0<=h<=Infinity)
    // If you want to use a ListView as the content, and you want it to fill the available space,
    // the you simply cannot.
    // This works:
    // return DebugConstraints(label: "testContent", child: Text('Test content'));
    // This does not "BoxConstraints forces an infinite height"
    return DebugConstraints(
      label: label,
      child: SizedBox.expand(child: Text(label)),
    );
  }
}

class DebugConstraints extends StatelessWidget {
  final String label;
  final Widget child;
  const DebugConstraints({super.key, required this.label, required this.child});
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        debugPrint('$label constraints: $constraints');
        return child;
      },
    );
  }
}

This results in:

ShadTabs root constraints: BoxConstraints(w=1280.0, h=720.0)
testContent2 constraints: BoxConstraints(0.0<=w<=1280.0, 0.0<=h<=Infinity)

It seems that for tabs that are not visible, Infinity is passed as height; even though there is (or will be) finite space when the tab is (or will be) selected.

I think this is a bug; for two reasons.

1. it differs from many other tab components. For example, material TabBarView has no such problem.
2. It makes it impossible to use a SizedBox.expand as a ShadTab content.