I have this exercise where I have a container above and four textbuttons below. when I press on one of the 4 textbuttons (each one having another color), the top container should change color. Now I know this has to happen with a custom function that should either take the color of the text button or take the original color of the top container. Can I do this through assigning a number to each color as a variable and inputing that as a parameter into the colorwidget above?

I'm a bit stuck with it.

thx.

CodePudding user response：

check this example

import 'package:flutter/material.dart';

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: InkWell(
                        onTap: () {
                          setState(() {
                            color = Colors.amber;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.amber,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    ),
                    Center(
                      child: InkWell(
                        onTap: () {
                          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: InkWell(
                        onTap: () {
                          setState(() {
                            color = Colors.red;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.red,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    ),
                    Center(
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            color = Colors.green;
                          });
                        },
                        child: Container(
                          decoration: const BoxDecoration(
                              color: Colors.green,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(10))),
                          height: 100,
                          width: 100,
                        ),
                      ),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}