How do I assign colors to containers from a list of colors?

Question

How do I assign colors to my row from a list of colors Here is the code.

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Rows and Columns Matrix'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Color> manyColors = [
      Colors.red,
      Colors.green,
      Colors.blue,
      Colors.yellow,
      Colors.brown,
      Colors.purple,
      Colors.orange,
      Colors.pink
    ];


    List<Widget> myRowChildren = [];
    List<List<int>> numbers = [];
    List<int> columnNumbers = [];
    int z = 1;
    int numberOfTubes = 18;
    Color concol = Colors.red;

    for (int i = 0; i < numberOfTubes; i++) {
      int fibersPerTube = 24;
      for (int y = 0; y < fibersPerTube; y++) {
        int currentNumber = z + y;
        columnNumbers.add(currentNumber);
      }
      z += fibersPerTube;

      numbers.add(columnNumbers);
      columnNumbers = [];
    }

    myRowChildren = numbers
        .map(
          (columns) => Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: columns.map((nr) {


              return Container(
                padding: EdgeInsets.all(2),
                decoration: BoxDecoration(
                    color: manyColors[0],
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    )),
                child: Text(
                  nr.toString(),
                ),
              );
            }).toList(),
          ),
        )
        .toList();

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: myRowChildren,
        ),
      ),
    );
  }
}

I want to assign first row, the first color from the list, second row second color from list and so on. I want to achieve this chart's functionality in my app This is basically a chart for color coding of optical fiber color coding. I will add a row at the top of my matrix which will have column names for each and every column of the chart.

Answer 1

You can use the index of the list to choose the color from the color's list. In .map() method you don't get access to the index so instead use .asMap(). like this:

    numbers
        .asMap().forEach(
          (index, columns) => myRowChildren.add(Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: columns.map((nr) {
              return Container(
                padding: EdgeInsets.all(2),
                decoration: BoxDecoration(
                    color: manyColors[index],
                    border: Border.all(
                      color: Colors.black,