Flutter - 如何调用这个 function？

Question

I have something like that, I tried so many ways and can't call the function like I want.

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

  @override
  State<PageTest> createState() => PageTestState();
}

class PageTestState extends State<PageTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: topMyBar(),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [PageTestList()],
        ),
      ),
      floatingActionButton: floatingButton(),
    );
  }

  Widget floatingButton() {
    return FloatingActionButton.extended(
      onPressed: () {
        CALL pageTestListFunction() AND SETSTATE ON _PageTestListState;
      },
      backgroundColor: AppColors.status_ready,
      label: Text(
        'OK',
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
      ));
  }
}

-- END HERE --

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

  @override
  State<PageTestList> createState() => _PageTestListState();
}

class _PageTestListState extends State<PageTestList> {...
  Future<bool> pageTestListFunction() async {...}
}

Is there a way to call the function from PageTestList when onPressed on floatingActionButton is called and then setState on PageTestList?

Thank's!

Answer 1

Use a global key in your widget.

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

  @override
  State<PageTest> createState() => PageTestState();
}

class PageTestState extends State<PageTest> {
  final _globalkey = GlobalKey<_PageTestListState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: topMyBar(),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [PageTestList(key:_globalkey)],
        ),
      ),
      floatingActionButton: floatingButton(),
    );
  }

  Widget floatingButton() {
    return FloatingActionButton.extended(
        onPressed: () {
          //CALL pageTestListFunction() AND SETSTATE ON _PageTestListState;
          _globalkey.currentState?.pageTestListFunction();
        },
        backgroundColor: AppColors.status_ready,
        label: const Text(
          'OK',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ));
  }
}


class PageTestList extends StatefulWidget {
  const PageTestList({Key? key}) : super(key: key);
  @override
  State<PageTestList> createState() => _PageTestListState();
}

class _PageTestListState extends State<PageTestList> {
  var color = Colors.red;
  void pageTestListFunction() async {
    setState(() {
      color = Colors.green;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: color,
      width: 100,
      height: 100,
    );
  }
}