¿Cómo asigno colores a los contenedores de una lista de colores?

¿Cómo asigno colores a mi fila a partir de una lista de colores?

Aquí está el código.

import 'dart:math'; import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Demo de Flutter', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Matriz de Filas y Columnas'), ); } } 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> muchosColores = [ Colors.red, Colors.green, Colors.blue, Colors.yellow, Colors.brown, Colors.purple, Colors.orange, Colors.pink ]; <pre><code>List<Widget> misHijosFila = []; List<List<int>> numeros = []; List<int> numerosColumna = []; int z = 1; int numeroTubos = 18; Color colorContenedor = Colors.red; for (int i = 0; i < numeroTubos; i++) { int fibrasPorTubo = 24; for (int y = 0; y < fibrasPorTubo; y++) { int numeroActual = z + y; numerosColumna.add(numeroActual); } z += fibrasPorTubo; numeros.add(numerosColumna); numerosColumna = []; } misHijosFila = numeros .map( (columnas) => Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: columnas.map((nr) { return Container( padding: EdgeInsets.all(2), decoration: BoxDecoration( color: muchosColores[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: misHijosFila, ), ), ); </code></pre> } }

Quiero asignar el primer color de la lista a la primera fila, el segundo color de la lista a la segunda fila y así sucesivamente.

Básicamente, esto es un gráfico para codificación de colores de fibra óptica. Agregaré una fila en la parte superior de mi matriz que tendrá nombres de columna para cada columna del gráfico.

davy.ai

June 17, 2023 at 8:32 pm

Para asignar colores a las filas a partir de una lista de colores, puedes modificar la lista myRowChildren dentro de la clase _MyHomePageState para que incluya un contador que se incrementa con cada fila, y usar ese contador como índice en la lista manyColors:

// Inicializa un contador de filas
int rowCounter = 0;

myRowChildren = numbers
    .map(
      (columns) => Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
            // Agrega una fila para los nombres de las columnas al principio
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: columns.map((nr) {
                return SizedBox(
                  width: 30,
                  child: Text(
                    'Columna $nr',
                    overflow: TextOverflow.ellipsis,
                  ),
                );
              }).toList(),
            ),
            // Agrega una fila para los colores asignados a las fibras
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: columns.map((nr) {
                return Container(
                  padding: EdgeInsets.all(2),
                  // Usa el contador de filas como índice en la lista manyColors
                  decoration: BoxDecoration(
                    color: manyColors[rowCounter % manyColors.length],
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                  ),
                  child: SizedBox(
                    width: 30,
                    child: Text(
                      '',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ),
                );
              }).toList(),
            ),
            // Agrega una fila de espacio entre los colores de las fibras y los números
            SizedBox(height: 10),
            // Agrega una fila para los números de las fibras
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: columns.map((nr) {
                return Container(
                  padding: EdgeInsets.all(2),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    ),
                  ),
                  child: SizedBox(
                    width: 30,
                    child: Text(
                      nr.toString(),
                    ),
                  ),
                );
              }).toList(),
            ),
        ],
      ),
    )
    .toList();

    // Incrementa el contador de filas después de que se agrega cada fila
    rowCounter++;

Este código agrega tres filas para cada conjunto de columnas de fibra: una fila para los nombres de las columnas, una fila para los colores de las fibras con colores asignados, y una fila para los números de las fibras. La variable rowCounter se usa como índice en la lista manyColors, y se incrementa después de agregar cada fila para asegurarse de que cada una reciba un color diferente de la lista.

Ten en cuenta que el código anterior asume que hay al menos tantos colores en manyColors como filas en el gráfico. Si manyColors tiene menos colores que el número de filas, el índice se volverá a iniciar y se repetirán colores desde el principio de la lista.

es.davy.ai

¿Tienes una pregunta?

¿Cómo asigno colores a los contenedores de una lista de colores?

Answer

davy.ai