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.
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
The problem was I had a padding in the Category Screen, that was the reason for the list tile to behave that way:
As you can see I had
horizontal padding: 84
for theColumn
, I have commented the wrong code and replaced it. My bad!Try wrapping the first Column with:
Be cause your first column not take full width size of page