title: How can I have an AppBar icon trigger a rendering?
body: <p>I think I have the design of my app wrong. I am new to flutter/dart and am finding myself confused by previous experience with other languages (specifically C# and JavaScript).</p>
  
  <p>I have an app that currently consists of a 3 x 3 GridView of 9 colored circular tiles, named Tiled_Surface. Each tile is assigned the following onTap handler:</p>
  
  <pre><code>  void on_tile_tapped(int index) {
      setState(() {
        tile_tapped = index;
      });
    } // on_tile_tapped
  </code></pre>
  
  <p>where index has an arbitrary value in the range [0..8). Whenever a tile is tapped, the color of the tile changes to a lighter value (actually the "accent color" of the tile's color). All of that works file.</p>
  
  <p>The AppBar contains a title ("Tiled Surface Demo") and two actions that consist of two IconButtons (Icons.swap_horiz and Icons.replay). It is intended that when the swap icon is tapped that the tile colors are shuffled into a new random order. And when the replay icon is tapped the tile colors are restored to their original order. When the two AppBar icons are tapped there is no apparent change to the display until a tile is tapped. Then, the changes made by the AppBar taps are displayed.</p>
  
  <p>This is not the desired effect. My problem is how to render Tiled_Surface when the AppBar icons are tapped.</p>
  
  <p>The code for the app follows. Thanks for your thoughts.</p>
  
  <pre><code>// ignore_for_file: camel_case_types
  // ignore_for_file: constant_identifier_names
  // ignore_for_file: non_constant_identifier_names
  
  import 'package:flutter/material.dart';
  import 'dart:math';
  
  const int NUMBER_TILES = 9;
  final int cross_axis_count = (sqrt (NUMBER_TILES)).toInt();
  
  final double cross_axis_spacing = 4.0;
  final double main_axis_spacing = cross_axis_spacing;
  
  List&lt;int&gt; indices = [ 0, 1, 2, 3, 4, 5, 6, 7, 8 ];
  
  List normal_colors = [
    Colors.red,
    Colors.orange,
    Colors.yellow,
    Colors.green,
    Colors.blue,
    Colors.purple,
    Colors.amber,
    Colors.cyan,
    Colors.indigo,
  ]; // normal_colors
  
  List bright_colors = [
    Colors.pinkAccent,
    Colors.orangeAccent,
    Colors.yellowAccent,
    Colors.lightGreenAccent,
    Colors.blue.shade200,
    Colors.purpleAccent,
    Colors.amberAccent,
    Colors.cyanAccent,
    Colors.indigoAccent,
  ]; // bright_colors
  
  void reinitialize_tiles() {
    indices.clear();
    for (int i = 0; (i &lt; NUMBER_TILES); i++) {
      indices.add(i);
    }
  } // reinitialize_tiles
  
  void randomize_tiles() {
    var random = new Random();
  
    indices.clear();
    for (int i = 0; (i &lt; NUMBER_TILES); i++) {
      var varient = random.nextInt(9);
  
      if (indices.length &gt; 0) {
        while (indices.contains(varient)) {
          varient = random.nextInt(9);
        }
      }
      indices.add(varient);
    }
  } // randomize_tiles
  
  void main() =&gt; runApp(new MyApp());
  
  class Tiled_Surface extends StatefulWidget {
    Tiled_Surface({Key key}) : super(key: key);
  
    @override // Tiled_Surface
    Tiled_Surface_State createState() =&gt; Tiled_Surface_State();
  }
  
  class Tiled_Surface_State extends State&lt;Tiled_Surface&gt; {
    List&lt;GridTile&gt; grid_tiles = &lt;GridTile&gt;[];
    int tile_tapped = -1;
  
    void on_tile_tapped(int index) {
      setState(() {
        tile_tapped = index;
      });
    } // on_tile_tapped
  
    GridTile new_surface_tile(Color tile_color, int index) {
      GridTile tile = GridTile(
        child: GestureDetector(
          onTap: () =&gt; on_tile_tapped(index),
          child: Container(
            decoration: BoxDecoration(
              color: tile_color,
              shape: BoxShape.circle,
            ),
          ),
        )
      );
    return (tile);
    } // new_surface_tile
  
    List&lt;GridTile&gt; create_surface_tiles() {
      grid_tiles = new List&lt;GridTile&gt;();
  
      for (int i = 0; (i &lt; NUMBER_TILES); i++) {
        Color tile_color = ( tile_tapped == i ) ?
                             bright_colors[indices[i]] :
                             normal_colors[indices[i]];
  
        grid_tiles.add(new_surface_tile(tile_color, i));
      }
      return (grid_tiles);
    } // create_surface_tiles
  
    @override // Tiled_Surface_State
    Widget build(BuildContext context) {
      return GridView.count(
        shrinkWrap: true,
        crossAxisCount: cross_axis_count,
        childAspectRatio: 1.0,
        padding: const EdgeInsets.all(4.0),
        mainAxisSpacing: main_axis_spacing,
        crossAxisSpacing: cross_axis_spacing,
        children: create_surface_tiles(),
      );
    }
  } // class Tiled_Surface_State
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Tiled Surface Demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Tiled Surface Demo'),
            actions: &lt;Widget&gt;[
              IconButton(
                icon: Icon(Icons.swap_horiz),
                onPressed: () {
                  randomize_tiles();
                },
              ),
              IconButton(
                icon: Icon(Icons.replay),
                onPressed: () {
                  reinitialize_tiles();
                },
              )
            ]
          ),
          body: Column(
            children: [
              Tiled_Surface(),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>