FLUTTER - Dynamic string in tab name based on content length in tab body

Question

Hi all I am trying to update Tab name with the number of items in lists stored in tab content. The list is fetched in tab content component. How can I pass list length variable to tab title ?

// PARENT WIDGET

    class EventsScreen extends StatefulWidget {
  const EventsScreen({Key? key}) : super(key: key);

  @override
  State<EventsScreen> createState() => _EventsScreenState();
}

class _EventsScreenState extends State<EventsScreen> {
  
  @override
  Widget build(BuildContext context) {
    return Parent(
      child: TabbedHeader(
        tabTitles: [
          'Žiadosti (HERE I WANT TO ADD LENGTH OF REQUESTS LIST)'
        ],
        title: 'Udalosti',
        tabContents: [
          EventRequestTab() // CHILD COMPONENT WITH LIST OF REQUESTS
        ],
      ),
    );
  }
}

// CHILD WIDGET WITH REQUESTS LIST

class EventRequestTab extends StatefulWidget {
  const EventRequestTab({Key? key, this.requests}) : super(key: key);

  @override
  State<EventRequestTab> createState() => _EventRequestState();
}

class _EventRequestState extends State<EventRequestTab> {
  late EventService _eventService;
  late List<EventRequest>? requests;

  @override
  void initState() {
    super.initState();
    _eventService = EventService();
    requests = // FETCHING LIST OF REQUESTS

  }
} ... build method etc ....

In child widget in initState I am fetching list of requests which is later displayed in ListView. But I dont know how to pass length of fetched list to tabTitles property of TabbedHeader. TabbedHeader is my custom wrapper for TabBar widget.

Answer 1

You can pass the list fetched in the initState of your EventRequestTab's state class by passing a callback into the EventRequestTab widget. This callback will return the list fetched as its parameter and in the EventsScreen, the tab name is updated with the length of the list

Here's an update to your code:

// PARENT WIDGET

class EventsScreen extends StatefulWidget {
  const EventsScreen({Key? key}) : super(key: key);

  @override
  State<EventsScreen> createState() => _EventsScreenState();
}

class _EventsScreenState extends State<EventsScreen> {
  int? lengthOfRequestList; 


  void updateTabName(List<EventRequest> listOfRequests) {
    setState(() {
      lengthOfRequestList = listOfRequests.length;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Parent(
      child: TabbedHeader(
        tabTitles: ['Žiadosti (${int == null ? '...' : int})'],
        title: 'Udalosti',
        tabContents: [
          EventRequestTab(
            onListFetched: updateTabName,
          ) // CHILD COMPONENT WITH LIST OF REQUESTS
        ],
      ),
    );
  }
}

// CHILD WIDGET WITH REQUESTS LIST

class EventRequestTab extends StatefulWidget {
  final Function(List<EventRequest> fetchedList) onListFetched; 
  const EventRequestTab({Key? key, required this.onListFetched}) : super(key: key); 

  @override
  State<EventRequestTab> createState() => _EventRequestState();
}

class _EventRequestState extends State<EventRequestTab> {
  late EventService _eventService;
  late List<EventRequest>? requests;

  @override
  void initState() {
    super.initState();
    _eventService = EventService();
    requests = // FETCHING LIST OF REQUESTS
        widget.onListFetched(requests); 
  }
}