CODEWITHSUNDEEP
flutter
byhuang1998
byhuang1998

Reputation: 417

flutter: How to modify the color of a Container in a large number of Containers

sorry for not being able to explain what I really want to mean in the title, but you will understand in the picture below and the code is what I have done. click then color change

import 'package:flutter/material.dart';
class ChangeColor extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ChangeColorState();
  }
}
class _ChangeColorState extends State<ChangeColor> {
  List<Color> colorList = List(3);
  int selectedId = 0;
  void selectById(int id) {
    setState(() {
      selectedId = id;
    });
  }
  void renderColor(int selectedId) {
    for (int i = 0; i < 3; ++i) {
      if (i == selectedId) {
        colorList[i] = Colors.teal;
      } else {
        colorList[i] = Colors.red;
      }
    }
  }
  @override
  Widget build(BuildContext context) {
    Widget myContainer(int id, Color color) {
      return InkWell(
        child: Container(
          width: 100, height: 100,
          color: color,
        ),
        onTap: () {
          selectById(id);
        },
      );
    }
    renderColor(selectedId);
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Row(
            children: <Widget>[
              myContainer(0, colorList[0]),
              myContainer(1, colorList[1]),
              myContainer(2, colorList[2]),
            ],
          )
        ),
      ),
    );
  }
}

So my question is if I have a large number of Containers and even don't know the exact number, I can't give every Container an id and maybe can't use List, so how to solve the problem. Actually this happens sometimes, for example in Calendar app. Thanks for any suggestion or criticism.

Upvotes: 0

Views: 208

Answers (1)

KuKu
KuKu

Reputation: 7492

How about this way?

Widget myContainer(int id) {
      return InkWell(
        child: Container(
          width: 100, height: 100,
          color: selectedId == id ? Colors.teal : Colors.red,
        ),
        onTap: () {
          selectById(id);
        },
      );
    }

It is a full code I fixed from your code.
And I recommend to move a 'myContainer' to outside of build().


class _ChangeColorState extends State<ChangeColor> {
  List<Color> colorList = List(3);
  int selectedId = 0;
  void selectById(int id) {
    setState(() {
      selectedId = id;
    });
  }

  Widget myContainer(int id) {
    return InkWell(
      child: Container(
        width: 100,
        color: selectedId == id ? Colors.teal : Colors.red,
      ),
      onTap: () {
        selectById(id);
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            height: 100,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (context, index) {
                return myContainer(index);
              },
            ),
          ),
        ),
      ),
    );
  }
}

Upvotes: 2

Related Questions