Stateless Tile swapping demonstration

main.dart

void main() => runApp(new MaterialApp(home: PositionedTiles()));

class PositionedTiles extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => PositionedTilesState();
}

class PositionedTilesState extends State<PositionedTiles> {
 List<Widget> tiles = [
   StatelessColorfulTile(),
   StatelessColorfulTile(),
 ];

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Row(children: tiles),
     floatingActionButton: FloatingActionButton(
         child: Icon(Icons.sentiment_very_satisfied), onPressed: swapTiles),
   );
 }

 swapTiles() {
   setState(() {
     tiles.insert(1, tiles.removeAt(0));
   });
 }
}

class StatelessColorfulTile extends StatelessWidget {
 Color myColor = UniqueColorGenerator.getColor();
 @override
 Widget build(BuildContext context) {
   return Container(
       color: myColor, child: Padding(padding: EdgeInsets.all(70.0)));
 }
}

Where does UniqueColorGenerator come from?

It's just a Dart class that generates a unique color when you call getColor. I didn't include it here because it wasn't relevant to what I was trying to explain (stateful/stateless info and keys)

@efortuna Thanks for your quick feedback! - If I understood you correctly, it is NOT a native dart class, but one that you wrote?

Personally, I find tutorials always more successful for a student, if all the code is reproducable - even though missing code forces to build a solution for oneself (which is probably the even better learn effect).

However: Any chance I could motivate you to share complete code examples in future? Would be great, since code that is coming from core / Google devs always means high quality! :-)

Thanks!

In truth it varies -- I usually put up whole samples, but then in this article I just had the gists since I thought the code in general wasn't interesting! :-P clearly I was wrong! :-) The code for UniqueColorGenerator is thus:

class UniqueColorGenerator {
  static List colorOptions = [
    Colors.blue,
    Colors.red,
    Colors.green,
    Colors.yellow,
    Colors.purple,
    Colors.orange,
    Colors.indigo,
    Colors.amber,
    Colors.black,
  ];
  static Random random = new Random();
  static Color getColor() {
    if (colorOptions.length > 0) {
      return colorOptions.removeAt(random.nextInt(colorOptions.length));
    } else {
      return Color.fromARGB(random.nextInt(256), random.nextInt(256),
          random.nextInt(256), random.nextInt(256));
    }
  }
}

As you can see it's not particularly smart code, but ... ¯_(ツ)_/¯

I'll see if I can make a separate sample repo for the entire codebase and then update the article

@efortuna - wow, you are quick! Again, thanks a mil! To me - a highly addicted newbie in the Futter world - this is incredibly valuable! One more perspective gained!

But I didn't want to impose work on you, though! All I wanted is to plant this idea in your head that there are people who appreciate it, when good devs share all their code, even though it might not be directly related to the very topic in question!

Big thanks again for your effort! Looking forward to your next tutorial!

This doesn't work any more. I tried on DartPad the swapping color action works well, see https://dartpad.dev/185f46cc2fc9dfb04b288c5e559ccd9a. I tried on iphone simulator and it works well on flutter 1.12.5-pre.19 and iphone XR 12.4.

Extra thought this key is used to bind to view, actually based on View/Model concept, it should use pure data as model, like color list here, the StatelessColorfulTile is used to display the colors. So the key is not necessary in this example. Or we can say this example is not a practical example.

@efortuna does tiles.remove(0) return a widget at 0 ? if it is not returning The swapping won't be done?

This doesn't work any more. I tried on DartPad the swapping color action works well, see https://dartpad.dev/185f46cc2fc9dfb04b288c5e559ccd9a. I tried on iphone simulator and it works well on flutter 1.12.5-pre.19 and iphone XR 12.4.

Extra thought this key is used to bind to view, actually based on View/Model concept, it should use pure data as model, like color list here, the StatelessColorfulTile is used to display the colors. So the key is not necessary in this example. Or we can say this example is not a practical example.

Just cast that line to type color like so:

static Color getColor() {
    if (colorOptions.length > 0) {
      return colorOptions.removeAt(random.nextInt(colorOptions.length)) as Color; // Do type cast here
    } else {
      return Color.fromARGB(random.nextInt(256), random.nextInt(256),
          random.nextInt(256), random.nextInt(256));
    }
 }