Like I want to assign same color to container after each interval. Like in this picture the first twelve colors will inherit their color from first element of the second column and the next twelve will inherit from the second one in the second column and so on:

How can I achieve this type of functionality in my flutter 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(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage(
      {Key? key,})
      : super(key: key);



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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Color> manyColors = [
      Colors.blue,
      Colors.red,
      Colors.yellow,
      Colors.amber,
      Colors.purple,
      Colors.pink,
      Colors.black,
      Colors.blueAccent,
      Colors.cyan,
      Colors.lightBlue,
      Colors.lime,
      Colors.orangeAccent,

    ];

    List<Widget> myRowChildren = [];
    var myTubeChildren;
    List<List<int>> numbers = [];
    List<int> columnNumbers = [];
    int z = 1;
    int numberOfTubes = 12;
    int fpt=12;

    List fiberList = new List<int>.generate(numberOfTubes*fpt, (i) => i   1);
    List tubeList = new List<int>.generate(numberOfTubes, (i) => i   1);

    myRowChildren = fiberList
        .map((index) => Container(
      width: 50,

      decoration: BoxDecoration(
          color:(index<=manyColors.length) ? manyColors[0%manyColors.length] : manyColors[1%manyColors.length],
          border: Border.all(
            color: Colors.black,
            width: 1,
          )),
      child: Text(
        '$index ',
        style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
      ),
    ))
        .toList();

    myTubeChildren = tubeList
        .map((index) => Container(
      width: 50,

      decoration: BoxDecoration(
          color: manyColors[(index - 1) % manyColors.length],
          border: Border.all(
            color: Colors.black,
            width: 1,
          )),
      child: Center(
        child: Text(
          'T$index',
          style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
        ),
      ),
    ))
        .toList();

    return Scaffold(
      appBar: AppBar(
        title: Text("Asterisk test"),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: myRowChildren,
            ),
            Column(
              children: myTubeChildren,
            ),

          ],
        ),
      ),
    );
  }
}

Right now I am using ternary operator inside the color attribute it does the same thing but it only checks for two values which are not dynamic unfortunately.

CodePudding user response：

Hey I was able to produce the wanted behaviour by using ListView.builder()

Here's 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(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({
    Key? key,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<Color> manyColors = [
      Colors.blue,
      Colors.red,
      Colors.yellow,
      Colors.amber,
      Colors.purple,
      Colors.pink,
      Colors.black,
      Colors.blueAccent,
      Colors.cyan,
      Colors.lightBlue,
      Colors.lime,
      Colors.orangeAccent,
    ];

    List<Widget> myRowChildren = [];
    var myTubeChildren;
    List<List<int>> numbers = [];
    List<int> columnNumbers = [];
    int z = 1;
    int numberOfTubes = 12;
    int fpt = 12;

    List fiberList = new List<int>.generate(numberOfTubes * fpt, (i) => i   1);
    List tubeList = new List<int>.generate(numberOfTubes, (i) => i   1);

    return Scaffold(
      appBar: AppBar(
        title: Text("Asterisk test"),
      ),
      body: ListView.builder(
        itemCount: fiberList.length,
        itemBuilder: (BuildContext context, int index) {
          return Row(
            children: [
              Container(
                width: 50,
                decoration: BoxDecoration(
                    color: manyColors[(index / 12).floor().toInt()],
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    )),
                child: Text(
                  '${index   1} ',
                  style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
                ),
              ),
              Container(
                width: 50,
                decoration: BoxDecoration(
                    color: manyColors[index % 12],
                    border: Border.all(
                      color: Colors.black,
                      width: 1,
                    )),
                child: Center(
                  child: Text(
                    'T${index   1}',
                    style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
                  ),
                ),
              )
            ],
          );
        },
      ),
    );
  }
}

If this answer helped you please mark it as correct.