Last active
December 21, 2018 21:43
-
-
Save efortuna/21deddbf8072eda12dc9ba34ce76b0f8 to your computer and use it in GitHub Desktop.
An illustration of why you need to put keys at the top of your widget tree in scenarios that require keys.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
void main() => runApp(new MaterialApp(home: PositionedTiles())); | |
class PositionedTiles extends StatefulWidget { | |
@override | |
State<StatefulWidget> createState() => PositionedTilesState(); | |
} | |
class PositionedTilesState extends State<PositionedTiles> { | |
// Stateful tiles now wrapped in padding (a stateless widget) to increase height | |
// of widget tree and show why keys are needed at the Padding level. | |
List<Widget> tiles = [ | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: StatefulColorfulTile(key: UniqueKey()), | |
), | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: StatefulColorfulTile(key: UniqueKey()), | |
), | |
]; | |
@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 StatefulColorfulTile extends StatefulWidget { | |
StatefulColorfulTile({Key key}) : super(key: key); | |
@override | |
ColorfulTileState createState() => ColorfulTileState(); | |
} | |
class ColorfulTileState extends State<ColorfulTile> { | |
Color myColor; | |
@override | |
void initState() { | |
super.initState(); | |
myColor = UniqueColorGenerator.getColor(); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return Container( | |
color: myColor, | |
child: Padding( | |
padding: EdgeInsets.all(70.0), | |
)); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment