vendredi 15 juillet 2022

How to transmit different parameters

I have a widget in which I create random color

  Set<Color> getColorSet({int numberOfColor = 3}) {
  Set<Color> generatedColorSet = Set<Color>();
  while (generatedColorSet.length != numberOfColor) {
    generatedColorSet.add(
      Colors.primaries[Random().nextInt(Colors.primaries.length)],
    );
  }
  return generatedColorSet;
}

  Set<Color> colorSet = Set<Color>();

 @override
  void initState() {
    super.initState();
    colorSet = getColorSet();
  }

and random dimensions/coordinates for a button

     @override
      Widget build(BuildContext context) {
    
    double maxWidth = MediaQuery.of(context).size.width;
    double maxHeight = MediaQuery.of(context).size.height;

Random randomT = new Random();

    int minT = 3;
    int maxT = maxHeight.toInt() - 80;
    int randomTop = minT + randomT.nextInt(maxT - minT);

Random randomL = new Random();

    int minL = 3;
    int maxL = maxWidth.toInt() - 80;
    int randomLeft = minL + randomL.nextInt(maxL - minL);

Random randomH = new Random();

    int minH = 70;
    int maxH = maxHeight.toInt() - randomTop;
    int randomHeight = minH + randomH.nextInt(maxH - minH);

Random randomW = new Random();

    int minW = 70;
    int maxW = maxWidth.toInt() - randomLeft;
    int randomWidth = minW + randomW.nextInt(maxW - minW);

Random randomR = new Random();

    int minR = 1;
    int maxR = 75;
    int randomRadius = minR + randomR.nextInt(maxR - minR);

I pass these values to the button located inside the Stack

   Container(
        child: Positioned(
          height: randomHeight.toDouble(), 
          width: randomWidth.toDouble(),
          top: randomTop.toDouble(), 
          left: randomLeft.toDouble(), 
          child: SizedBox(
            child: ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(colorSet.elementAt(0)),
                overlayColor: MaterialStateProperty.all(colorSet.elementAt(1)),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(randomRadius.toDouble()),
                    side: BorderSide(color: colorSet.elementAt(2), width: 5),
                  ), 
                ),
                padding: MaterialStateProperty.all(EdgeInsets.all(10)),
                minimumSize: MaterialStateProperty.all(Size(70,70)), 
              ),
                  onPressed: () {
                setState(() {
                  colorSet = getColorSet();
                });
              },
              child: const Text(
                'PRESS',
                style: TextStyle(color: Colors.white), 
              ),
            ),
          ),
        ),
      ),

The problem is that if I want to add another button inside the Stack, it will get the same values as the other one and will overlap it and have the same colors. How do I pass my random values different for each button ?

Below is my widget entirely with two buttons that now have the same values

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

  @override
  State<ButtonWidget> createState() => _ButtonWidgetState();
}

class _ButtonWidgetState extends State<ButtonWidget> {
  
  Set<Color> getColorSet({int numberOfColor = 3}) {
  Set<Color> generatedColorSet = Set<Color>();
  while (generatedColorSet.length != numberOfColor) {
    generatedColorSet.add(
      Colors.primaries[Random().nextInt(Colors.primaries.length)],
    );
  }
  return generatedColorSet;
}

  Set<Color> colorSet = Set<Color>();

 @override
  void initState() {
    super.initState();
    colorSet = getColorSet();
  }

   @override
  Widget build(BuildContext context) {

double maxWidth = MediaQuery.of(context).size.width;
double maxHeight = MediaQuery.of(context).size.height;

    Random randomT = new Random();

        int minT = 3;
        int maxT = maxHeight.toInt() - 80;
        int randomTop = minT + randomT.nextInt(maxT - minT);

    Random randomL = new Random();

        int minL = 3;
        int maxL = maxWidth.toInt() - 80;
        int randomLeft = minL + randomL.nextInt(maxL - minL);

    Random randomH = new Random();
    
        int minH = 70;
        int maxH = maxHeight.toInt() - randomTop;
        int randomHeight = minH + randomH.nextInt(maxH - minH);

    Random randomW = new Random();

        int minW = 70;
        int maxW = maxWidth.toInt() - randomLeft;
        int randomWidth = minW + randomW.nextInt(maxW - minW);

    Random randomR = new Random();

        int minR = 1;
        int maxR = 75;
        int randomRadius = minR + randomR.nextInt(maxR - minR);

    return Stack(
      children: [ 
        Container(
        child: Positioned(
          height: randomHeight.toDouble(), 
          width: randomWidth.toDouble(),
          top: randomTop.toDouble(), 
          left: randomLeft.toDouble(), 
          child: SizedBox(
            child: ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(colorSet.elementAt(0)),
                overlayColor: MaterialStateProperty.all(colorSet.elementAt(1)),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(randomRadius.toDouble()),
                    side: BorderSide(color: colorSet.elementAt(2), width: 5),
                  ), 
                ),
                padding: MaterialStateProperty.all(EdgeInsets.all(10)),
                minimumSize: MaterialStateProperty.all(Size(70,70)), 
              ),
                  onPressed: () {
                setState(() {
                  colorSet = getColorSet();
                });
              },
              child: const Text(
                'PRESS',
                style: TextStyle(color: Colors.white), 
              ),
            ),
          ),
        ),
      ),
      Container(
        child: Positioned(
          height: randomHeight.toDouble(), 
          width: randomWidth.toDouble(),
          top: randomTop.toDouble(), 
          left: randomLeft.toDouble(), 
          child: SizedBox(   
            child: ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(colorSet.elementAt(0)),
                overlayColor: MaterialStateProperty.all(colorSet.elementAt(1)),
                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                  RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(randomRadius.toDouble()),
                    side: BorderSide(color: colorSet.elementAt(2), width: 5),
                  ), 
                ),
                padding: MaterialStateProperty.all(EdgeInsets.all(10)),
                minimumSize: MaterialStateProperty.all(Size(70,70)),
              ),
                  onPressed: () {
                setState(() {
                  colorSet = getColorSet();
                });
              },
              child: const Text(
                'PRESS',
                style: TextStyle(color: Colors.white), 
              ),
            ),
          ),
        ),   
      ), 
      ]
    );
  }
}



Aucun commentaire:

Enregistrer un commentaire