Flutter ToggleButtons overflowing in AppBar actions

Question

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,   
        ),
      ),
    ),
  );
}
}

Solution

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,
                ),
              ),
            ),
          ],
        ),
    /// ........

Comments

[Krish Bhanushali]

can you wrap SingleChildScrollView of appbar with container and give it a width.

[sigjak]

Thank you very much! That was quite informative. I do appreciate your help. All the best.