In my app I generate a random number between 1-10 and i try to guess. I use container and text and gesture detector for it. I want containers to change color if i click on the right number which i generated randomly. But I don't know why i does not work i tried to solve but i could not. I used initstate or late variable but did not work. help me?

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key})
      : super(
          key: key,
        );

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Random random = Random();
  late int guessNumber = random.nextInt(9)   1;
  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("My App"),
          centerTitle: true,
        ),
        body: Column(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(child: Numb(1)),
                  Expanded(child: Numb(2)),
                  Expanded(child: Numb(3)),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(child: Numb(4)),
                  Expanded(child: Numb(5)),
                  Expanded(child: Numb(6)),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Expanded(child: Numb(7)),
                  Expanded(child: Numb(8)),
                  Expanded(child: Numb(9)),
                ],
              ),
            ),
          ],
        ));
  }

  Widget Numb(int numb) {
    Color? color = Colors.lightGreen;
    return GestureDetector(
      onTap: () {
        setState(() {
          if (guessNumber == numb) {
            color = Colors.pink;
          }
        });
      },
      child: Container(
        margin: const EdgeInsets.all(24),
        decoration: BoxDecoration(
          color: color,
        ),
        child: Center(
          child: Text(
            numb.toString(),
            style: const TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

The issue is color is inside the build method(while Numb(int numb) is inside build method) and keep getting Colors.lightGreen; on every setState. Put it outside the build method. like on

class _HomeScreenState extends State<HomeScreen> {
  Random random = Random();
  late int guessNumber = random.nextInt(9)   1;
  Color? color = Colors.lightGreen;