Search code examples
flutteroverflowappbar

Flutter ToggleButtons overflowing in AppBar actions


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