CODEWITHSUNDEEP
androidiosflutterdart
ashkan_arz
ashkan_arz

Reputation: 35

How to select JUST one button from 9 buttons? Flutter/Dart

as you can see my code here, i have 9 buttons (from 1 to 9) and if i click on one of them, they're color will change to blue, but in my code it has ability that all of them turn to blue BUT i want to have some changes that just one of them change. for example if you click on number 2, number 2 will be blue and than click on number 3, number 3 will be blue and number 2 it will be white(default). any helps?

class MyButtonModal {
  final String buttonText;
  bool changeButtonColor;

  MyButtonModal({this.buttonText, this.changeButtonColor = false});
}


GridView.count(
                      shrinkWrap: true,
                      physics: ClampingScrollPhysics(),
                      mainAxisSpacing: 10,
                      crossAxisSpacing: 10,
                      childAspectRatio: 80 / 95,
                      crossAxisCount: 12,
                      children: _a.map((MyButtonModal f) {
                        return InkWell(
                          child: Container(
                              decoration: BoxDecoration(
                                  color: f.changeButtonColor
                                      ? Colors.blue
                                      : Colors.white,
                                  borderRadius: BorderRadius.circular(5),
                                  border: Border.all(color: Color(0xffaaaaaa))),
                              child: Center(
                                child: Text(f.buttonText),
                              )),
                          onTap: () {
                            setState(() {
                              f.changeButtonColor = !f.changeButtonColor;
                            });
                          },
                        );
                      }).toList()),

Upvotes: 1

Views: 1570

Answers (1)

Dhritiman Roy
Dhritiman Roy

Reputation: 974

You can add an index field in the MyButtonModal class which will act as a unique key for each button.

Initialize an index variable in the StatefulWidget and whenever you click a button update the index variable to the index of the button.

Now for changing the color check if f.index == index if true then change color to blue else white.

import 'package:flutter/material.dart';

class MyButtonModal {
  final String buttonText;
  // New field to uniquely identify a button
  final int index;

  MyButtonModal({this.buttonText, this.index});
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  // This will create nine [MyButtonModel] with index from 0 to 8
  List<MyButtonModal> _a = List.generate(9,
      (index) => MyButtonModal(buttonText: "Button ${index + 1}", index: index));

  // Initialize index variable and set it to any value other than 0 to 8
  int index = 999;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: GridView.count(
          shrinkWrap: true,
          physics: ClampingScrollPhysics(),
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          childAspectRatio: 80 / 95,
          crossAxisCount: 12,
          children: _a.map((MyButtonModal f) {
            return InkWell(
              child: Container(
                  decoration: BoxDecoration(
                      // Check if f.index == index
                      color: f.index == index ? Colors.blue : Colors.white,
                      borderRadius: BorderRadius.circular(5),
                      border: Border.all(color: Color(0xffaaaaaa))),
                  child: Center(
                    child: Text(f.buttonText),
                  )),
              onTap: () {
                // When button is tapped update index to the index of the button
                setState(() {
                  index = f.index;
                });
              },
            );
          }).toList(),
        ),
      ),
    );
  }
}

If you have any doubt comment it.

Upvotes: 2

Related Questions