How to assign increment indexes to different widgets

I currently have a problem and don't know how to solve it. Basically, I have several cards on my screen, each of which represents its own “table”. I would like to label each of these with its own index. In other words, each table should have “Table” with an attached index as its title. E.g. “Table 1, Table 2” etc. I have created a separate file for the basic appearance of the card widget:

tisch_credentials.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fabene_bestellungen/provider/tisch_provider.dart';

class TischCredentials extends ConsumerStatefulWidget {
  const TischCredentials({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() {
    return _TischCredentialsState();
  }
}

class _TischCredentialsState extends ConsumerState<TischCredentials> {
  @override
  Widget build(BuildContext context) {
    //final tischIndex = ref.watch(tischProvider.notifier).state;
    //tischIndexErhoehen(tischIndex);
    return Card(
      child: Column(
        children: [
          Row(
            children: [
              //Text("Tisch " + tischIndex.toString()),
              IconButton(
                icon: Icon(Icons.delete),
                onPressed: () {},
              ),
              IconButton(onPressed: () {}, icon: Icon(Icons.check))
            ],
          ),
          SizedBox(
            height: 8,
          ),
          Container(
            height: 50,
            width: 50,
          ),
        ],
      ),
    );
  }
}

I wanted to implement this in this file, but it didn't work as desired. So I moved it to the main screen with the same result. My last attempt is this one:

bestellungen_main_screen.dart

import 'package:fabene_bestellungen/widgets/tisch_credentials.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fabene_bestellungen/provider/tisch_provider.dart';

class BestellungenMainSreen extends ConsumerWidget {
  BestellungenMainSreen({super.key, required this.tischIndex});

  int tischIndex = 0;
  String tischIndexErhoehen(int i) {
    i = ++i;
    return i.toString();
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    String aktuellerIndex = tischIndexErhoehen(tischIndex);
    return Scaffold(
      appBar: AppBar(
        title: Text('Bestellungen'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text('Tisch ' + aktuellerIndex),
              TischCredentials(),
              /* Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),*/
              Text('Tisch ' + tischIndexErhoehen(tischIndex)),
              TischCredentials(),
              /* Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),*/
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
          Column(
            children: [
              Container(
                width: 100,
                height: 800,
                color: Colors.blue,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                //color: Colors.red,
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.red),
              )
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Unfortunately I can't say how to solve this. Would Riverpod be an option? I.e. saving the index in a provider, increasing it and assigning it to the individual widgets? Or to solve the whole thing via a future? Or to make a list and then display it in the cards?

Try this:

import 'package:fabene_bestellungen/widgets/tisch_credentials.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:fabene_bestellungen/provider/tisch_provider.dart';

class BestellungenMainSreen extends ConsumerWidget {
  BestellungenMainSreen({super.key, required this.tischIndex});

  int tischIndex = 0;
  String tischIndexErhoehen() {
    tischIndex++;
    return tischIndex.toString();
  }


  @override
  Widget build(BuildContext context, WidgetRef ref) {
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Bestellungen'),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text('Tisch ' + tischIndexErhoehen()),
              TischCredentials(),
              /* Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),*/
              Text('Tisch ' + tischIndexErhoehen()),
              TischCredentials(),
              /* Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),*/
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
          Column(
            children: [
              Container(
                width: 100,
                height: 800,
                color: Colors.blue,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                //color: Colors.red,
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: Colors.red),
              )
            ],
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 200,
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.grey)),
              ),
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                alignment: Alignment(10, 10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
              Container(
                margin: EdgeInsets.all(10),
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

The tischIndex variable will store the current index, so there is no need to pass any value to the tischIndexErhoehen method.

Hope this help!