coloring containers by tabbing with flutter

Question

I have column with many ((Tabbed)) items, when I tab on one of them it should be colored and the others transparent, and here is my Tabbed classthis image for what I have now with my code

class Tabbed extends StatefulWidget {
  @override
  _TabbedState createState() => _TabbedState();
}

class _TabbedState extends State<Tabbed> {
  Color color = Colors.transparent;
  @override
  void initState() {
    color = Colors.transparent;
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        print("tab");
        if (color == Colors.transparent){
          setState(() {
            color = Colors.purple;
          });
        }
        else{
          setState(() {
            color = Colors.transparent;
          });
        }
      },
      child: Container(
        height: 100,
        width: 100,
        decoration: BoxDecoration(
          color: color,
          border: Border.all(color: Colors.red,width: 1),
        ),
      ),
    );
  }
}

check this answer https://stackoverflow.com/questions/57910554/flutter-togglebutton-class-flutter-1-9-1 — John Joe, Feb 15 '20 at 08:25

Mahesh Jamdade · Accepted Answer · 2020-02-16T17:15:20.110

0

you can simply try creating a model for your boxes and have a boolean property and store the status of each box in a list to know whether the box is tapped or not ,you can also pefer a list of boolean but I prefer creating a list of model as it will allow you to add more properties, I have modified your code a little bit you can see it working here on dartpad as well

class Tabbed extends StatefulWidget {
  @override
  _TabbedState createState() => _TabbedState();
}

class _TabbedState extends State<Tabbed> {
  Color color = Colors.green; 
  @override
  void initState() {
    for(int i=0;i<listLength;i++){
      list1.add(
      TabModel(isTapped: false)); // assigns initial value to false
    }
    for(int i=0;i<listLength;i++){
      list2.add(
      TabModel(isTapped: false)); // assigns initial value to false
    }
  }

  Widget column1(){
    return Column(
    children: List.generate(
          listLength,
          (index) =>GestureDetector(
          onTap: (){
            // this selects only one out of many and disables rest
            for(int i=0;i<list1.length;i++){
              if(i!=index){
                list1[i].isTapped=false;
              }
            };
            setState((){
              list1[index].isTapped = true;
            });
          },
          child:Container(
            margin:EdgeInsets.all(5),
            color: list1[index].isTapped? Colors.red:color,
          height:100,
          width:100
          ))
        ));
  }

  Widget column2(){
    return Column(
    children: List.generate(
          listLength,
          (index) =>GestureDetector(
          onTap: (){
            setState((){
              list2[index].isTapped = !list2[index].isTapped;
            });
          },
          child:Container(
            margin:EdgeInsets.all(5),
            color: list2[index].isTapped? Colors.red:color,
          height:100,
          width:100
          ))
        ));
  }

 List<TabModel> list1 =[]; 
 List<TabModel> list2 =[]; 

  int listLength=5;
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      column1(),
      column2()
    ],);
  }
}
class TabModel{
   bool isTapped = false;
  TabModel({this.isTapped});
}

if this is not what you want or if you face any issue understanding any part of the code feel free to drop a comment I would love to help out the bwlow output shows two independent columns in coumn1 you can select one out of many boxes and in other you can select multiple boxes

edited Feb 16 '20 at 17:15

answered Feb 15 '20 at 08:54

Mahesh Jamdade

17,235
8
110
131

I tried the code but it didn't work right, it still have the same problem, you can click many item in the same time, I have horizontal list view, every item is a list of container, 7 horizontal * 4 vertical Tabbed widget, the user should tab only one, when click another Item the first disabled automatically. – Husamuldeen Feb 16 '20 at 10:20
Can you post image of your layout – Mahesh Jamdade Feb 16 '20 at 10:26
Did you check this https://dartpad.dev/132db523c9369a265d2614f8908693bb – Mahesh Jamdade Feb 16 '20 at 11:44
I think my answer solves your issue its just that you have to design the boxes according to your requirement and if you use above code it will select the box the user clicks and rest will be unselected – Mahesh Jamdade Feb 16 '20 at 11:47
Error compiling to JavaScript in the dartPad, what should that mean? – Husamuldeen Feb 16 '20 at 11:52
I don't know whats the problem I can still run it,I will still modify the code and rebupload it – Mahesh Jamdade Feb 16 '20 at 12:02
I have updated the answer with two columns hope one of the column above solves your problem also dont foget to check the dartpad link – Mahesh Jamdade Feb 16 '20 at 17:16
that's work for one column, but I need it for Horizontal listview.builder, it should be 7*5 tow dimension array – Husamuldeen Feb 17 '20 at 18:12
you can either create separate array for a row/column or a 2d array will help you have to write the custom logic to see which one is selected among all,it should be pretty easy if you understand above example – Mahesh Jamdade Feb 18 '20 at 03:56
can you take a look on this question please? https://stackoverflow.com/questions/60277469/how-to-make-day-and-time-list-horizontal-view-from-api-with-two-button-to-scroll – Husamuldeen Feb 27 '20 at 13:06
@Husamuldeen noted it quite similar if you see the source code anyway I will answer it – Mahesh Jamdade Feb 27 '20 at 13:23
in this question it's only one column, in the other question it is a page view contain list view, I have many errors with this about one month, all the app stop on this issue, if you can help me with team viewer i'll be thankfull. – Husamuldeen Feb 29 '20 at 08:37

coloring containers by tabbing with flutter

1 Answers1