I have created two pages for Transactions and Category, in Category page there is a Custom Tab Bar (Income and Expense). As usual when the value changes the list change along with it.

The problem I am facing is the list of Income or Expense takes the same widget size as the Tab Bar
Image
`

class NewCustomTabBar extends StatefulWidget {
  const NewCustomTabBar({super.key});

  @override
  _NewCustomTabBarState createState() => _NewCustomTabBarState();
}

class _NewCustomTabBarState extends State<NewCustomTabBar>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  String _selectedSegment = 'income';

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _tabController.addListener(() {
      setState(() {
        _selectedSegment = _tabController.index == 0 ? 'income' : 'expense';
      });
    });
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void _onSegmentChanged(String value) {
    setState(() {
      _selectedSegment = value;
      _tabController.index = value == 'income' ? 0 : 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CustomSlidingSegmentedControl<String>(
          height: 50,
          initialValue: _selectedSegment,
          children: const {
            'income': Text(
              'Income',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                  fontWeight: FontWeight.w500),
            ),
            'expense': Text(
              'Expense',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                  fontWeight: FontWeight.w500),
            ),
          },
          onValueChanged: _onSegmentChanged,
          decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 8,
              ),
            ],
          ),
          thumbDecoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(6),
          ),
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInToLinear,
        ),
       `Expanded(
          child: TabBarView(controller: _tabController, children: const [
            IncomeCategoryList(),
            ExpenseCategoryList(),
          ])`
        )
      ]
    );
  }
}`

Then I have tried the fixed width widget in the Custom Tab Bar Widget
fixedWidth: 110
But the fixed Width widget only changes the width of the Tab Bar