skip to Main Content

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 is not taking the full width of the page.

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 fixedwidth widget in the Custom Tab Bar Widget
fixedWidth: 110
But the fixed Width widget only changes the width of the Tab Bar.

2

Answers


  1. Chosen as BEST ANSWER

    The problem was I had a padding in the Category Screen, that was the reason for the list tile to behave that way:

        class _CategoryScreenState extends State<CategoryScreen> {
      @override
      Widget build(BuildContext context) {
        // return Padding(
        //   padding: EdgeInsets.symmetric(horizontal: 84, vertical: 20),
        //   child: Column(
        //     children: [
        //       //CustomTabBar(),
        //     ],
        //   ),
        // );
        return const Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: NewCustomTabBar(),
        );
      }
    }
    

    As you can see I had horizontal padding: 84 for the Column, I have commented the wrong code and replaced it. My bad!


  2. Try wrapping the first Column with:

        SizedBox(
          width: double.infinite,
          ....
    
    )
    

    Be cause your first column not take full width size of page

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search