Multiple Row buttons gets selected in flutter

Question

Hi I am a beginner in flutter. Here I have created two rows inside one column where some of the buttons are in first row and some are in the second row. I want to change the color of the button I press it but when I press the button all the buttons in that particular row changes the color. Here is my code.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Color color, color2;
  Color changeColor() {
    if (color == null) {
      return Colors.red;
    }
    return color;
  }

  Color changeColor2() {
    if (color2 == null) {
      return Colors.blue;
    }
    return color2;
  }

  Widget buttons(String s1, String s2) {
    return Column(
      children: [
        FlatButton(
          minWidth: 30.0,
          color: changeColor(),
          child: Text(s1),
          onPressed: () {
            setState(() {
              color = Colors.green;
            });
          },
        ),
        FlatButton(
          minWidth: 30.0,
          color: changeColor2(),
          child: Text(s2),
          onPressed: () {
            setState(() {
              color2 = Colors.yellow;
            });
          },
        )
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: [
          buttons('a', 'b'),
          buttons('c', 'd'),
          buttons('e', 'f'),
          buttons('g', 'h'),
          buttons('i', 'j'),
          buttons('k', 'l'),
        ],
      ),
    );
  }
}

What should I do to only change the color of the button I press also any code sample would be good

Answer 1

Create a class ButtonColor which will manage the text and color of a specific button eg:

class ButtonColor {
  Color color;
  String text;

  ButtonColor(this.color, this.text);
}

Then, create a list of buttons and passed them to the column.

Complete Example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class ButtonColor {
  Color color;
  String text;

  ButtonColor(this.color, this.text);
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  Widget buttons(ButtonColor s1, ButtonColor s2) {
    return Column(
      children: [
        FlatButton(
          key: ValueKey(s1),
          minWidth: 30.0,
          color: s1.color,
          child: Text(s1.text),
          onPressed: () {
            setState(() {
              s1.color = Colors.green;
            });
          },
        ),
        FlatButton(
          key: ValueKey(s2),
          minWidth: 30.0,
          color: s2.color,
          child: Text(s2.text),
          onPressed: () {
            setState(() {
              s2.color = Colors.yellow;
            });
          },
        )
      ],
    );
  }

  List<ButtonColor> _buttonList = [
    ButtonColor(Colors.red, 'a'),
    ButtonColor(Colors.blue, 'b'),
    ButtonColor(Colors.red, 'c'),
    ButtonColor(Colors.blue, 'd'),
    ButtonColor(Colors.red, 'e'),
    ButtonColor(Colors.blue, 'f'),
    ButtonColor(Colors.red, 'g'),
    ButtonColor(Colors.blue, 'h'),
    ButtonColor(Colors.red, 'i'),
    ButtonColor(Colors.blue, 'j'),
    ButtonColor(Colors.red, 'k'),
    ButtonColor(Colors.blue, 'l'),
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Row(
        children: [
          buttons(_buttonList[0], _buttonList[1]),
          buttons(_buttonList[2], _buttonList[3]),
          buttons(_buttonList[4], _buttonList[5]),
          buttons(_buttonList[6], _buttonList[7]),
          buttons(_buttonList[8], _buttonList[9]),
          buttons(_buttonList[10], _buttonList[11]),
        ],
      ),
    );
  }
}