GestureDetector fires all containers...how to fire just one? - flutter

Question

I have a gesture detector that fires all containers and I just want to fire one at a time. How would I go about doing that? Right now they are all turning green and I just want to turn one of them green.
Is it the fact that I'm calling it multiple times in the same way in my _HomePageState class?
I thought the new keyword would have taken care of that so I tried that.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new HomePage()
);
}
}
class HomePage extends StatefulWidget {
#override
State createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(20),
),
Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width * 0.95,
color: Theme.of(context).primaryColorLight,
),
Padding(
padding: EdgeInsets.all(5),
),
Container(
width: MediaQuery.of(context).size.width * .97,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
heroes(context),
heroes(context),
heroes(context),
heroes(context),
heroes(context),
heroes(context),
],
),
),
Container(
height: MediaQuery.of(context).size.height * 0.56,
width: MediaQuery.of(context).size.width * .97,
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
list(context),
list(context),
list(context),
list(context),
list(context),
list(context),
list(context),
],
),
),
]
),
)
);
}
Color _color = Colors.blue;
Widget heroes(BuildContext context) {
return new GestureDetector(
onTap: () {
setState( () {
_color = Colors.green;
});
},
child: new Container(
height: MediaQuery.of(context).size.height * 0.05,
width: MediaQuery.of(context).size.width * 0.12,
color: _color,
)
);
}
Widget list(BuildContext context) {
return Padding(
padding: EdgeInsets.all(5),
child: Container(
height: MediaQuery.of(context).size.height * 0.07,
width: MediaQuery.of(context).size.width * (0.12*8),
color: Theme.of(context).primaryColorDark
)
);
}
}

Answer 1

Read the comments to understand how it works. It is really simple.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new HomePage()
);
}
}
class HomePage extends StatefulWidget {
#override
State createState() => new _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(20),
),
Container(
height: MediaQuery.of(context).size.height * 0.3,
width: MediaQuery.of(context).size.width * 0.95,
color: Theme.of(context).primaryColorLight,
),
Padding(
padding: EdgeInsets.all(5),
),
Container(
width: MediaQuery.of(context).size.width * .97,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
// 1) Give each widget a number
heroes(context, 0),
heroes(context, 1),
heroes(context, 2),
heroes(context, 3),
heroes(context, 4),
heroes(context, 5),
],
),
),
Container(
height: MediaQuery.of(context).size.height * 0.56,
width: MediaQuery.of(context).size.width * .97,
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
list(context),
list(context),
list(context),
list(context),
list(context),
list(context),
list(context),
],
),
),
]
),
)
);
}
// 2) This is important. It saves the current index.
var selectedIndex;
// 3) Add `index` as a parameter
Widget heroes(BuildContext context, index) {
return new GestureDetector(
onTap: () {
setState( () {
// 4) After each tap the index of the widget is saved as `selectedIndex`
selectedIndex = index;
});
},
child: new Container(
height: MediaQuery.of(context).size.height * 0.05,
width: MediaQuery.of(context).size.width * 0.12,
// 5) It compares the current selectedIndex with the index of the widget. If both have the same number, the color will be green. Otherwise it will be blue.
color: selectedIndex == index? Colors.green : Colors.blue,
)
);
}
Widget list(BuildContext context) {
return Padding(
padding: EdgeInsets.all(5),
child: Container(
height: MediaQuery.of(context).size.height * 0.07,
width: MediaQuery.of(context).size.width * (0.12*8),
color: Theme.of(context).primaryColorDark
)
);
}
}