Flutter - changing a Stack Order

Make a variable in your widget that keeps track of the children:

List<Widget> stackChildren = <Widget>[
          new Icon(Icons.monetization_on, key: GlobalKey(), size: 60.0, color: const 
Color.fromRGBO(200, 100, 180, 1.0)),
          new Positioned(
            left: 20.0,
            child: new Icon(Icons.monetization_on, key: GlobalKey(), size: 60.0, color: const 
Color.fromRGBO(000, 10, 130, 1.0)),
          ),
          new Positioned(
            left:40.0,
            child: new Icon(Icons.monetization_on, key: GlobalKey(), size: 60.0, color: const Color.fromRGBO(218, 165, 32, 1.0)),
          )

        ];

Then in whatever function you have to trigger the order switch, you can just call the following function:

void swapStackChildren() {
    final temp = stackChildren[0];
    setState(() {
          stackChildren[0] = stackChildren[2];
          stackChildren[2] = temp;
        });
  }

Edit: As suggested by the comments, it's a better idea just to assign a new value to stackChildren instead of modifying it. So you should instead do something like this:

void swapStackChildren() {
  setState(() {
    stackChildren = [
      new Positioned(
          left: 40.0,
          child: new Icon(Icons.monetization_on,
              key: GlobalKey(),
              size: 60.0,
              color: const Color.fromRGBO(218, 165, 32, 1.0))),
      new Icon(Icons.monetization_on,
          key: GlobalKey(),
          size: 60.0,
          color: const Color.fromRGBO(200, 100, 180, 1.0)),
      new Positioned(
        left: 20.0,
        child: new Icon(Icons.monetization_on,
            key: GlobalKey(),
            size: 60.0,
            color: const Color.fromRGBO(000, 10, 130, 1.0)),
      ),
    ];
  });
}

Edit:

Here is with the full sample code:
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

AnimationController timerController;

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  AnimationController timerController;
  List<Widget> stackChildren = <Widget>[
      new Icon(Icons.monetization_on,
          key: GlobalKey(),
          size: 60.0,
          color: const Color.fromRGBO(50, 50, 50, 1.0)),
      new Positioned(
        left: 20.0,
        child: new Icon(Icons.monetization_on,
            key: GlobalKey(),
            size: 60.0,
            color: const Color.fromRGBO(50, 100, 150, 1.0)),
      ),
    ];

  void swapStackChildren() {
      setState(() {
        print("swapStackChildren");
        stackChildren = [
          new Positioned(
              left: 40.0,
              child: new Icon(Icons.monetization_on,
                  key: GlobalKey(),
                  size: 60.0,
                  color: const Color.fromRGBO(150, 00, 200, 1.0))),
          new Icon(Icons.monetization_on,
              key: GlobalKey(),
              size: 100.0,
              color: const Color.fromRGBO(200, 200, 100, 1.0)),
        ];
      });
    }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Stack(children: stackChildren),
            new RaisedButton(
              child: const Text('Swop'),
              color: Theme.of(context).accentColor,
              elevation: 4.0,
              splashColor: Colors.blueGrey,
              onPressed: () {
                swapStackChildren();
              },
            ),
          ],
        ),
      ),
    );
  }
}

Tags:

Stack

Flutter