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

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? 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 quiry 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',)),

        ),
      ),

    );
  }
}

CodePudding user response：

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',
            ),
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

You can do it like this :

/// EDIT :

I edit it to get the Color random

import 'dart:math' as math;

class _MyAppState extends State<MyApp> {
  Color _newColor = Colors.white; // variable with the color you want to change

  final rnd = math.Random(); // random
  Color getRandomColor() =>
      Color(rnd.nextInt(0xffffffff)); // little function to get the color random

  void _changeNewColor() { // function that you are going to send to yout HomeScreen
    setState(() {
      _newColor = getRandomColor();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: HomeScreen(change: _changeNewColor), // function
      backgroundColor: _newColor, // here the variable
    );
  }
}

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

  final Function()? change; // instance and get the funct

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