how to put a void function into a separate page on a separate dart file-CodePudding

I'm using a switch case void function to populate a part of my app with widgets dependant on what the user has input at the start.

here is a small section of my void function:

var DisplayLeft = Container();

void Display(String selected) {
  switch (selected) {
    case 'option 1':
      tacOpDisplayLeft = Container(
        child: Column(
          children: [
            Button3(
              onTap: (val) {
                setState(() {
                  selected = val;
                });
              },
            ),
            Button5(
              onTap: (val) {
                setState(() {
                  selected = val;
                });
              },
            ),
          ],
        ),
      );
      break;
    case 'option 2':
      tacOpDisplayLeft = Container(
        child: Column(
          children: [
            Button1(
              onTap: (val) {
                setState(() {
                  selected = val;
                });
              },
            ),
            Button3(
              onTap: (val) {
                setState(() {
                  selected = val;
                });
              },
            ),
            Button7(
              onTap: (val) {
                setState(() {
                  selected = val;
                });
              },
            ),
          ],
        ),
      );
      break;

default:
      DisplayLeft = Container();
      break;
  }
}

When the void function is in my main stateful widget, it works fine. the problem is the void function is very long and I was hoping to move it to its own class I can then call on. i tried putting it in it's own class class Display{} but then the SetState is throwing up and error because it isn't in a stateful widget. Is it possible to pass an onTap out of the class like I have done for stateless widgets that make up the Buttons?

Thanks so much and any help is greatly appreciated.

CodePudding user response：

Here's how you can do it, something like this:

As I commented, create a separate StatefulWidget that accepts a Function:


class Display extends StatefulWidget {
  final String selected;
  final Function onSelected;
  const Display({Key? key, required this.selected, required this.onSelected})
      : super(key: key);

  @override
  State<Display> createState() => _DisplayState();
}

class _DisplayState extends State<Display> {
  // --> Using `late` since we're initializing it later on - in initState.
  late Widget tacOpDisplayLeft;

  void display(String selected) {
    switch (selected) {
      case 'option 1':
        tacOpDisplayLeft = Container(
          child: Column(
            children: [
              Button3(
                onTap: (val) {
                  widget.onSelected(val);
                },
              ),
              Button5(
                onTap: (val) {
                  widget.onSelected(val);
                },
              ),
            ],
          ),
        );
        break;

      default:
        tacOpDisplayLeft = Container();
        break;
    }
  }

  @override
  void initState() {
    tacOpDisplayLeft = Container();
    super.initState();
  }

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

And now you can call it from within a separate class:


class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _tacOpSelected = 'option 1';
  @override
  Widget build(BuildContext context) {
    return Display(
      selected: 'option 1',
      onSelected: (val) {
        setState(() {
          _tacOpSelected = val;
        });
      },
    );
  }
}