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.

CodePudding user response：

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,

CodePudding user response：

Currently, you are setting the color of the containers to the first color in the array.

color: manyColors[0],

You get a unique number for each container as the variable columns inside the map. All you had to do was map the unique number to the required index of the color array.

color: manyColors[(columns % manyColors.lenght)],