flutterbuttonenumerateiconbuttonflutter-button

How can I repeatedly enumerate a buttons text in flutter?


I want to numerate buttons automatically. In the picture there´s these icon buttons and their numerals showed like this '###'. I don't know how to numerate automatically those buttons (1, 2, 3, etc.) in a way that I don't have to do it each one manually. Here's my code:

Widget _lockerRow(){
    return const Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RotatedBox(
          quarterTurns: 1,
          child: Text('###',
            style: TextStyle(fontSize: 25),)),
        RotatedBox(
          quarterTurns: 1,
          child: IconButton(
            onPressed: null,
            iconSize: 100, 
            icon: Icon(Icons.sensor_door)
            ),
        ),
        RotatedBox(
          quarterTurns: 3,
          child: IconButton(
            onPressed: null,
            iconSize: 100, 
            icon: Icon(Icons.sensor_door)
            ),
        ),
        RotatedBox(
          quarterTurns: 3,
          child: Text('###',
            style: TextStyle(fontSize: 25),)),
        SizedBox(
          width: 100,
        ),
        RotatedBox(
          quarterTurns: 1,
          child: Text('###',
            style: TextStyle(fontSize: 25),)),
        RotatedBox(
          quarterTurns: 1,
          child: IconButton(
            onPressed: null,
            iconSize: 100,
            icon: Icon(Icons.sensor_door)
            ),
        ),
        RotatedBox(
          quarterTurns: 3,
          child: IconButton(
            onPressed: null,
            iconSize: 100, 
            icon: Icon(Icons.sensor_door)
            ),
        ),
        RotatedBox(
          quarterTurns: 3,
          child: Text('###',
            style: TextStyle(fontSize: 25),)),
      ],
    );
  }

And here's how it's showed in the app:

Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        return _onWillPopScope();
      },
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Menú Principal'),
            backgroundColor: Colors.orange,
          ),
          body: SingleChildScrollView(
            child: Center(
              child: Column(
                children: [
                  const Text('Módulo Control Lockers',
                    style: TextStyle(fontSize: 20),
                    ),
                  _lockerRow(),
                ],
              ),
            ),
          )

enter image description here

Help me with this issue, please.


Solution

  • IIUC, just use List.generate which gives you an index.

    For example:

    List.generate(10, (index) {
          return Container(
            child: Text('Hello World $index'),
          );
        });
    

    Or, if you desired a loop:

    List<Widget> _buildEnumeratedLayout() {
        List<Widget> widgets = [];
        for (int i = 0; i < 10; i++) {
          widgets.add(Text("Hellow World $i"));
        }
        return widgets;
      }
    

    enter image description here

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Material App',
          home: Scaffold(
            appBar: AppBar(
              title: Text('Material App Bar'),
            ),
            body: Column(
              children: _buildEnumeratedLayout(),
            ),
          ),
        );
      }
    
      List<Widget> _buildEnumeratedLayout() {
        return List.generate(10, (index) {
          return Container(
            child: Text('Hello World $index'),
          );
        });
      }
    }