Escolha a sua bandeira

Olá! Baseado na sugestao do exercício eu resolvi fazer um "criador de bandeira". Como poderá ver tem algumas linhas a mais que ainda não vimos, e tive que pesquisar e quebrar um pouco a cabeça. Confesso que ainda não entendo 100%, mas espero que até o fim da minha jornada no curso esse código a seguir fará mais sentido.

import 'package:flutter/material.dart';


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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Choose your flag'),
        ),
        body: ListView(
          children: [
            Ex2Flag(),
          ],
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {}),
      ),
    );
  }
}

class Ex2Flag extends StatefulWidget {
  @override
  State<Ex2Flag> createState() => _Ex2FlagState();
}

class _Ex2FlagState extends State<Ex2Flag> {
  List<List<Color>> _allColors = [
    [
      const Color.fromARGB(255, 0, 59, 108),
      const Color.fromARGB(255, 231, 15, 0),
      const Color.fromARGB(255, 0, 83, 3),
      const Color.fromARGB(255, 255, 255, 255),
      const Color.fromARGB(255, 0, 0, 0),
      Color.fromARGB(255, 18, 0, 214),
      Color.fromARGB(255, 213, 99, 0),
      Color.fromARGB(255, 249, 221, 4),
    ],
    [
      const Color.fromARGB(255, 0, 59, 108),
      const Color.fromARGB(255, 231, 15, 0),
      const Color.fromARGB(255, 0, 83, 3),
      const Color.fromARGB(255, 255, 255, 255),
      const Color.fromARGB(255, 0, 0, 0),
      Color.fromARGB(255, 18, 0, 214),
      Color.fromARGB(255, 213, 99, 0),
      Color.fromARGB(255, 249, 221, 4),
    ],
    [
      const Color.fromARGB(255, 0, 59, 108),
      const Color.fromARGB(255, 231, 15, 0),
      const Color.fromARGB(255, 0, 83, 3),
      const Color.fromARGB(255, 255, 255, 255),
      const Color.fromARGB(255, 0, 0, 0),
      Color.fromARGB(255, 18, 0, 214),
      Color.fromARGB(255, 213, 99, 0),
      Color.fromARGB(255, 249, 221, 4),
    ],
  ];
  List<int> _currentIndices = [0, 0, 0]; // Track individual color indices

  void _changeColor(int containerIndex) {
    setState(() {
      _currentIndices[containerIndex] = (_currentIndices[containerIndex] + 1) %
          _allColors[containerIndex].length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 350,
      color: Colors.grey,
      child: Padding(
        padding: const EdgeInsets.all(25.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            for (int i = 0; i < _allColors.length; i++)
              InkWell(
                onTap: () => _changeColor(i),
                child: Container(
                  color: _allColors[i]
                      [_currentIndices[i]], // Use color from individual list
                  width: 100,
                  height: 150,
                ),
              ),
          ],
        ),
      ),
    );
  }
}