I need to randomly change the order of the button in the stack when clicking on it, how can I do this?

Here is the code for an example, 4 buttons in the stack one after the other, when you click on any, I would like them to randomly change the order in the stack.

Could you tell me how I can do this?

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    


    return Scaffold(
      body: Stack(
      children: [
        Positioned(
        height: 700,
        width: 700,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
              });
            }, child: Text('1'), 
          ),
         ),
      ),
        Positioned(
        height: 600,
        width: 600,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
              });
            }, child: Text('2'), 
          ),
         ),
      ),

        Positioned(
        height: 500,
        width: 500,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
              });
            }, child: Text('3'), 
          ),
         ),
      ),

        Positioned(
        height: 400,
        width: 400,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: () {
              setState(() {
              });
            }, child: Text('4'), 
          ),
         ),
      ),
      ]
    )
  );
  }
}

CodePudding user response：

Put all buttons in a list and assign them as children to the Stack and when any button is pressed shuffle this list and rebuild the widget.

class _TestPageState extends State<TestPage> {
  late List<Widget> children;

  @override
  void initState() {
    super.initState();

    children = [
      Positioned(
        height: 700,
        width: 700,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: onPressed,
            child: Text('1'),
          ),
        ),
      ),
      Positioned(
        height: 600,
        width: 600,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: onPressed,
            child: Text('2'),
          ),
        ),
      ),
      Positioned(
        height: 500,
        width: 500,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: onPressed,
            child: Text('3'),
          ),
        ),
      ),
      Positioned(
        height: 400,
        width: 400,
        child: SizedBox(
          child: ElevatedButton(
            onPressed: onPressed,
            child: Text('4'),
          ),
        ),
      ),
    ];
  }

  void onPressed() {
    setState(() {
      children.shuffle();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: children,
      ),
    );
  }
}