use only one page with DefaultTabController of 3 TabBars

Question

I am using DefaultTabController for 3 TabBars. But i need to use only one page to be shown fetching the data from database all three TabBars are the same, But only the fetched data is different according to the index of its tap. How could i do so without create 3 copies of the same object WidgetOfTape?

the code is:

  DefaultTabController(
      length: 3,
      child: Scaffold(
        body: const TabBarView(
          children: [
            WidgetOfTape(),
            WidgetOfTape(),
            WidgetOfTape(),
          ],
        ),

WidgetOfTape code is:

class WidgetOfTape extends HookWidget {
  const WidgetOfTape ();
  @override
  Widget build(BuildContext context) {
    return BlocSelector<ScheduledPossibleDayCubit, ScheduledPossibleDayState,
        int>(selector: (state) {
      return state.indexOfTap;
    }, builder: (context, state) {
      return BlocProvider<DisplayNoteInsidePagesCubit>(
          lazy: false,
          create: (context) => getIt<DisplayNoteInsidePagesCubit>()
            ..countDoneNoteOutOfAllNotes()
            ..retrieveData(indexOfTap: state),
          child: Column(children: [
            Expanded(child: BlocBuilder<DisplayNoteInsidePagesCubit,
                DisplayNoteInsidePagesState>(
              builder: (context, state) {
                return ListView.builder(
                    shrinkWrap: true,
                    itemCount: state.notes.length,
                    itemBuilder: (BuildContext context, int index) {
                      return Row(
                        children: [
                          Expanded(
                            child: Text(
                              state.notes[index]['content'],
                              textAlign: TextAlign.justify,
                              style: Theme.of(context).textTheme.bodyText2,
                            ),
                          ),
                        ],
                      );
                    });
              },
            ))
          ]));
    });
  }
}

Pls Show us the method or function used for fetching the data. I just want to see the the content of WidgetOfTape(), — THEODORE, Oct 18 '21 at 19:37

score 0 · Answer 1 · answered Oct 18 '21 at 23:21

Yes, you can do that, by sending a new parameter to your WidgetOfTape( ). The new variable you send as a parameter is defined by you. It could be based on the fetched data for example:

DefaultTabController(
      length: 3,
      child: Scaffold(
        body: const TabBarView(
          children: [
            WidgetOfTape(newParameter1), //*** This line changed ***
            WidgetOfTape(newParameter2), //*** This line changed ***
            WidgetOfTape(newParameter3), //*** This line changed ***
          ],
        ),

Dont forget to add that parameter to your actual class WidgetOfTape( ).

If you dont know how to pass parameters, check here: In Flutter, how do I pass data into a Stateless Widget?

the value is sent using bloc inside `WidgetOfTape(),`, i asked if i can send only one TabBarView inside the children to avoid repeat. @Canada2000 — Mariam Albarghouti, Oct 19 '21 at 03:55

use only one page with DefaultTabController of 3 TabBars

1 Answers1