I am trying to change the color of a container onTap but for some reason it isnt working - flutter

Question

This is the code that I used. I am trying to implement a UI where a quiztaker can see highlighted the option that they selected.
I am new to this please tell me where I went wrong?
#override
Widget build(BuildContext context) {
int selectedOption = 0;
return Scaffold(
key: scaffoldKey,
body: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
color: Color(0xFFF5F5F5),
// onTap is here
child: InkWell(
onTap: () { setState(() {
selectedOption = 1;
}
);
},
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: selectedOption == 1 ? Colors.black: Colors.cyan,
),
child: Text(
'Hello World',
style: TextStyle(),
),
),
),
),
],
),
),
);
}
}

Answer 1

You need to move 'selectedOption' variable to outside of 'build' method
because when call 'setState', build is called and variable is reset.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int selectedOption = 0;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
color: Color(0xFFF5F5F5),
// onTap is here
child: InkWell(
onTap: () {
setState(() {
selectedOption = 1;
});
},
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: selectedOption == 1 ? Colors.black : Colors.cyan,
),
child: Text(
'Hello World',
style: TextStyle(),
),
),
),
),
],
),
),
);
}
Widget _buildBody() {
return Container();
}
}

Answer 2

With the current code Container color is updating only once. You need to change your code as follows to get the required output
return Scaffold(
key: scaffoldKey,
body: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
color: Color(0xFFF5F5F5),
// onTap is here
child: InkWell(
onTap: () {
setState(() {
_isSelected = !_isSelected;
});
},
child: Container(
width: 100,
height: 100,
decoration: BoxDecoration(
color: _isSelected ? Colors.black : Colors.cyan,
),
child: Text(
'Hello World',
style: TextStyle(),
),
),
),
),
],
),
),
);
Instead of using the int variable you should use a boolean and update its state when tapped.

Answer 3

Please move selectedOption to state class. then setstate() will work.