Flutter: How to include switch button in appbar widget?

user_3161139 0
Viewed 4284

So I have an appbar widget which work fine:

typedef void BoolCallback(bool val);

class MyAppBar extends PreferredSize {
  final int opacity;
  final String title;

  MyAppBar(this.opacity, [this.title]);
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: Text(title != null ? title : ''),
      backgroundColor: Colors.white,
      centerTitle: true,
      leading: Container(
          color: Color(0x00ffffff), child: IconButton(
        icon: Icon(Icons.lightbulb_outline), 
        iconSize: 120,
        onPressed: () {},
      )),
actions: [
        Switch(value: true, onChanged: (val){
      callback(val);}),

      ],

      flexibleSpace: Container(
          decoration: myBoxDecoration(opacity)
      ),
    );
  }
}

which is called from:

bool _isOn = true;
(...)
Scaffold(
                    appBar: MyAppBar((val) => _isOn = val, 0xff, 'dummy title'),
                    body: _isOn ? Widget1 : Widget2
(...)

However due to recent development I would like to include a switch button on the far right of the appbar with a callback in order for the body to change based on the value of switch. How can I simply do this? Do I need to get rid off appbar and go for a custom container? Any help strongly appreciated!

Edit: following some help in the comment section (disappeared?) I used action to add the button and use a callback. However the main problem is that the switch button is stateful and I don't know how I can combine a stateful widget and PreferredSize...

dart flutter callback
1 Answers

What you can do is use a callback that is placed above the 'Scaffold'. This is where the state of the bool will be changed.

bool _isOn = true;

  void toggle() {
    setState(() => _isOn = !_isOn);
  }
Scaffold(
        appBar: MyAppBar(toggle: toggle, isOn: _isOn), 
        body: _isOn ? Widget1() : Widget2()
    );

Then where the appBar is actually located:

class MyAppBar extends PreferredSize {
  final Function toggle;
  final bool isOn;

   MyAppBar({this.toggle, this.isOn});

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(centerTitle: true, title: Text("TITLE"), actions: [
     Switch(
      value: isOn,
      onChanged: (val) {
        toggle();
      }),
    ]);
  }
}

Option 2

It is pretty much the same thing, I just want you to know that you can extend it to a StatefulWidget if you'd like to. In this example, I am not passing the boolean as an argument.

 bool _isOn = true;

  void toggle() {
    setState(() => _isOn = !_isOn);
  }
Scaffold(
        appBar: MyAppBar(toggle: toggle), 
         body: _isOn ? Widget1() : Widget2()
    );

Then where the appBar is actually located:

class MyAppBar extends StatefulWidget implements PreferredSizeWidget {
  final Function toggle;

  MyAppBar({this.toggle});

  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight);

  @override
  _MyAppBar createState() => _MyAppBar();
}

class _MyAppBar extends State<MyAppBar> {
  bool isOn = true;

  @override
  Widget build(BuildContext context) {
    return AppBar(centerTitle: true, title: Text("TITLE"), actions: [
      Switch(
          value: isOn,
          onChanged: (val) {
            
            widget.toggle();
            
            setState(() {
              isOn = val;
            });
          }),
    ]);
  }
}
user_115213010
Related