A rather wide ToggleButtons wrapped in SingleChildScrollView is overflowing in AppBar actions but not in body. Is there a way to fix this?
Any suggestion appreciated!!
class _ToggleState extends State<Toggle> {
List<bool> selectList = [
10 items here
];
List<String> catList = [
10 items here
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Title'),
actions: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ToggleButtons(
children: catList.map((item) => Text(item)).toList(),
isSelected: selectList,
),
),
],
),
body: Center(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ToggleButtons(
children: catList.map((item) => Text(item)).toList(),
isSelected: selectList,
),
),
),
);
}
}
According to source code documentation
final List? actions; This widget is stacked behind the toolbar and the tab bar. Its height will be the same as the app bar's overall height. Typically, these widgets are IconButton representing common operations. For less common operations, consider using a
PopupMenuButton
as the last action.
If you still wish to handle this case, we can use LayoutBuilder
or mediaQuery
to get size and handle the UI providing appBar elements width.
Code snippet
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) => Scaffold(
appBar: AppBar(
title: SizedBox(
width: constraints.maxWidth * .2,
child: Text('title'),
),
automaticallyImplyLeading: false,
actions: [
SizedBox(
width: constraints.maxWidth * .8,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: ToggleButtons(
onPressed: (v) {
print(v);
},
direction: Axis.horizontal,
children: catList.map((item) => Text(item)).toList(),
isSelected: selectList,
),
),
),
],
),
/// ........