flutter change background on click - flutter

Question

I need to change the background color by clicking on the screen to random, I can't figure out how to do it.
import 'package:flutter/widgets.dart';
import 'dart:math';
main() => runApp(
Directionality(
textDirection: TextDirection.ltr,
child: Container(
color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
child: MyApp(),
),
),
);
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: GestureDetector( // используется как обычный виджет
onTap: () { // одно из свойств GestureDetector
// Этот метод будет вызван, когда дочерний элемент будет нажат
print('You pressed me');
},
),
);
}
}

Answer 1

1. You need to make a StateFulWidget because you want to change the background when tapped.
2. You need to make a list of colors that can be set as the background color.
3. You need to add a variable which holds the current background color's index in the list of colors.
4. You need to change this variable when tapped to set a new background color.
Note: If you want to have random colors you can check the random_color package which is easy to use.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(title: "Title"),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
List<Color> _colors = [Colors.blue, Colors.red, Colors.green, Colors.yellow];
var _index = 0;
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: _colors[_index % _colors.length],
body: GestureDetector(
onTap: () {
setState(() {
_index++;
});
},
child: Stack(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
color: Colors.transparent,
),
],
)
)
);
}

Answer 2

To do this you want to store the color as part of the state of the widget that you want. Then, when you detect a press, you can change the color and call setState to trigger a rebuild to show the new color. This involves modifying your code to use a StatefulWidget as I have done below.
The following code uses the exact same widgets as your original, with just modifications to make the necessary parts stateful.
import 'package:flutter/widgets.dart';
import 'dart:math';
main() => runApp(
Directionality(
textDirection: TextDirection.ltr,
child: MyApp(),
),
);
class MyApp extends StatefulWidget {//Changed to a `StatefulWidget`
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
//Store the color as a part of your `State`
Color color = Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
#override
Widget build(BuildContext context) {
return Container(
color: color,
child: Container(
child: GestureDetector(
onTap: () {
print('You pressed me');
//`setState` rebuilds your widget to show the new color
//It's not possible to use a `StatelessWidget` here
setState(() {
color = Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
});
},
),
),
);
}
}

Answer 3

Try this
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
Color color;
#override
void initState() {
color = Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
super.initState();
}
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
color = Color((Random().nextDouble() * 0xFFFFFF).toInt())
.withOpacity(1.0);
});
},
child: Scaffold(
backgroundColor: color,
),
);
}
}