How to use a method in a Stateful Widget from another Widget

Question

So i have this toggle() method in the Stateful SideBar class

class SideBar extends StatefulWidget {
  const SideBar({super.key});
  @override
  State<SideBar> createState() => _SideBarState();
}


class _SideBarState extends State<SideBar> with SingleTickerProviderStateMixin{
  void toggle() {
    if (_controller.isCompleted) {
      _controller.reverse();
    }
    else {_controller.forward();}
  }
}

and i want to use it in

class SideBarWidget extends StatelessWidget {
   SideBarWidget({Key? key}) : super(key: key);

  final SideBar sideBarWidget = SideBar(...);

  void toggle() {
    // here i want to use the toggle() method
  }

  @override
  Widget build(BuildContext context) {
    return sideBarWidget;
  }
}

I cannot use sideBarWidget.toggle() I also cannot pass it as a parameter becasue the _controller is in the SideBar() widget

score 1 · Answer 1 · edited Jan 27 '23 at 08:22

1

There are many ways, but the most common and simple is to create an instance of the SideBar class inside the SideBarWidget class, for example:

var side = SideBar();

And then you can access the toggle() method like this: side.toggle().

edited Jan 27 '23 at 08:22

Boolean_Type

1,146
3
13
40

answered Jan 24 '23 at 10:35

Fotis Psarris

80
9

I've tried that as you see in the `SideBarWidget` class but I cant access the toggle method.. – Pulina Hansana Jan 24 '23 at 10:42
I need more of your code and the error your IDE shows. – Fotis Psarris Jan 24 '23 at 10:52

score 0 · Answer 2 · answered Jan 24 '23 at 10:42

One way is to give the SideBar a GlobalKey and get the state from the key afterwards. An example:

class SideBar extends StatefulWidget {
  const SideBar({super.key});
  @override
  State<SideBar> createState() => SideBarState();
}

class SideBarState extends State<SideBar> with SingleTickerProviderStateMixin{
  @override
  Widget build(BuildContext context) {
    return Container();
  }

  void toggle() {
    print('toggle');
  }
}

class SideBarWidget extends StatelessWidget {
  SideBarWidget({Key? key}) : super(key: key);

  final GlobalKey<SideBarState> sideBarKey = GlobalKey();

  late final SideBar sideBarWidget = SideBar(key: sideBarKey);

  void toggle() {
    sideBarKey.currentState?.toggle();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextButton(onPressed: toggle, child: const Text('click')),
        sideBarWidget,
      ],
    );
  }
}

Hitarth Chhunchha · Accepted Answer · 2023-01-24T11:28:03.797

remove underscore from SideBarState

to use method of SideBarState in SideBarWidget use: SideBarState().toggle();

**screen1.dart**

    class ParentWidget extends StatefulWidget {
              const ParentWidget({Key? key}) : super(key: key);
            
         
    
     @override
          State<ParentWidget> createState() => ParentWidgetState();
        }
        
    class ParentWidgetState extends State<ParentWidget> {
      
      void printData() {
        print("parent");
      }
    
      @override
      Widget build(BuildContext context) {
        return const Placeholder();
      }
    }

**screen2.dart**

    import 'package:demo/screen_1.dart';
    import 'package:flutter/material.dart';
    
    class ChildWidget extends StatelessWidget {
      const ChildWidget({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        ParentWidgetState().printData();
        return const Placeholder();
      }
    }

How to use a method in a Stateful Widget from another Widget

3 Answers3