How to change scaffold colour randomly on clicking separate file's gesturdetector button

Question

I have made two files... one is main.dart and other is homescreen.dart. Homescreen is for scaffold body which is created separately. Now there is a button in home screen for changing colour of scaffold. How to do this?

The main purpose is to know access scaffold from other stateful widget class file...

main.dart

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(child: Scaffold(body: HomeScreen(),)),
    );
  }
}

homescreen.dart

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        //My query is to PLACE CODE HERE TO CHANGE SCAFFOLD COLOR ON CLICKING
      },
      child: Center(
        child: Container(
          color: Colors.red,
          height: 60,
          width: 200,

          child: Center(child: Text('Change Color',)),

        ),
      ),

    );
  }
}

Answer 1

Try this:

main.dart

import 'package:flutter/material.dart';

import 'home.dart';
import 'dart:math' as math;


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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Color _color = Colors.white;

  void changeColor(){
    setState(() {
      _color = Color((math.Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(child: Scaffold(
        backgroundColor: _color,
        body: HomeScreen(changeColor: changeColor,),)),
    );
  }
}

home.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  VoidCallback? changeColor;
  HomeScreen({Key? key, this.changeColor}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: changeColor,
      child: Center(
        child: Container(
          color: Colors.red,
          height: 60,
          width: 200,
          child: const Center(
            child: Text(
              'Change Color',
            ),
          ),
        ),
      ),
    );
  }
}