How can I make separate color and button stateless and stateful classes for this code in flutter?

Question

I would like to make an extra file 'extra.dart' where I would like to add my top container and the four TextButtonWidgets. 1 ColorWidget, 4 TextButtonWidgets with each one having colorwidget as their child.

I would name the top container widget ColorWidget, and reuse that widget in the text button widgets as their child.

!! I need to set color as a required named parameter in ColorWidget(), but there it always goes wrong for me.

So in extra.dart should be all widgets, and in main.dart just the basic layout where I call all widgets from extra.dart.

Don't worry about the switchlisttiles. If you'd like to add them, they mean create border, and make container bigger in size, all applied to top container.

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'extra.dart';

// ONLY USE STATEFUL WIDGETS IF CONTENT ON SCREEN HAS TO CHANGE DYNAMICALLY!!
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final String title = 'Test';
  final String name = 'John Doe';

  @override
  //
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Home(),
      ),
    );
  }
}

// var colorChange = true;

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

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Color color = Colors.amber;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Container color")),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Container(
              decoration: BoxDecoration(
                  color: color,
                  borderRadius: const BorderRadius.all(Radius.circular(10))),
              height: 100,
              width: 100,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Center(
                      child: TextButton(
                        onPressed: () {
                          setState(() {
                            color = Colors.amber;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.amber,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    ),
                    Center(
                      child: TextButton(
                        onPressed: () {
                          setState(() {
                            color = Colors.blue;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.blue,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Center(
                      child: TextButton(
                        onPressed: () {
                          setState(() {
                            color = Colors.red;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.red,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    ),
                    Center(
                      child: TextButton(
                        onPressed: () {
                          setState(() {
                            color = Colors.green;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.green,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}