Navigate to a specific tabview from another page

Question

I am working on a GoHenry clone and I want to navigate TO a specific tabview (child's account) located on another page FROM the home page based on the child's account tile that is selected (see screenshots for reference). Right now, if I click on "Owen", it goes to "Owen's" tab but if click on "Eloise", it goes to "Owen's" tab. I'd like it to go to the corresponding child's tab. How would one do that? Here is the code:

Home Page snippet -- navigating to "MoneyPage()"

    Expanded(
                  child: ListView.builder(
                    scrollDirection: Axis.vertical,
                    itemCount: value.childTiles.length,
                    itemBuilder: (context, index) {
                      ChildTile individualChildTile = value.childTiles[index];
                      return Padding(
                        padding: const EdgeInsets.only(bottom: 10),
                        child: ChildTiles(
                          childTiles: individualChildTile,
                          onTap: () {
                            Navigator.of(context).push(
                              MaterialPageRoute(
                                builder: (context) => const MoneyPage(),
                              ),
                            );

MoneyPage -- MoneyTabBar() is imported

    import 'package:flutter/material.dart';
    import '../components/widgets/money_tab_bar.dart';

    class MoneyPage extends StatefulWidget {
      const MoneyPage({super.key});

      @override
      State<MoneyPage> createState() => _CardsPageState();
    }

    class _CardsPageState extends State<MoneyPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            iconTheme: const IconThemeData(color: Colors.black),
            actions: const [
              Padding(
                padding: EdgeInsets.only(right: 20.0),
                child: Icon(Icons.pie_chart_outline, color: Colors.black),
              ),
            ],
            backgroundColor: Colors.white,
            elevation: 0,
            title: const Text(
              'Money',
              style: TextStyle(color: Colors.black, fontSize: 16),
            ),
          ),
          body: MoneyTabBar(),
        );
      }
    }

MoneyTabBar -- consists of 3 tabs. I want to navigate to corresponding tab based on "child " that is selected

    import 'package:flutter/material.dart';
    import '../../pages/eloise_tab.dart';
    import '../../pages/henry_tab.dart';
    import '../../pages/owen_tab.dart';

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

      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          length: 3, // 3 tabs
          child: Scaffold(
            // TabBar Background Color
            backgroundColor: Colors.white,

            body: Column(
              children: const [
                TabBar(
                  padding: EdgeInsets.only(left: 80, right: 80),
                  indicatorColor: Colors.red,
                  indicatorSize: TabBarIndicatorSize.label,
                  labelColor: Colors.black,
                  unselectedLabelColor: Colors.grey,
                  labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
                  tabs: [
                    // "Owen" Tab
                    Tab(
                      text: 'Owen',
                    ),

                    // "Eloise" Tab
                    Tab(
                      text: 'Eloise',
                    ),

                    // "Henry" Tab
                    Tab(
                      text: 'Henry',
                    ),
                  ],
                ),
                SizedBox(height: 25),
                Expanded(
                  child: TabBarView(
                    children: [
                      // "Owen" Tab Content
                      OwenTab(),

                      // "Eloise" Tab Content
                      EloiseTab(),

                      // "Henry" Tab Content
                      HenryTab(),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }

OwenTab code (just in case)

    import 'package:flutter/material.dart';

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

      @override
      Widget build(BuildContext context) {
        return Column(
          children: [
            const Text(
              '\$20.00',
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 10.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Text(
                  'Available to spend',
                  style: TextStyle(fontSize: 15),
                ),
                Icon(Icons.keyboard_arrow_down_rounded, size: 30),
              ],
            ),
          ],
        );
      }
    }

Screenshots:

Answer 1

You can use index from which tile you have click on it

import 'package:flutter/material.dart';
import '../../pages/eloise_tab.dart';
import '../../pages/henry_tab.dart';
import '../../pages/owen_tab.dart';

class MoneyTabBar extends StatelessWidget {
  const MoneyTabBar({
    super.key, required this.tabIndex, //add this code
  });

  final int tabIndex;  //add this code

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: tabIndex,  //add this code
      length: 3, // 3 tabs
      child: Scaffold(
        // TabBar Background Color
        backgroundColor: Colors.white,

        body: Column(
          children: const [
            TabBar(
              padding: EdgeInsets.only(left: 80, right: 80),
              indicatorColor: Colors.red,
              indicatorSize: TabBarIndicatorSize.label,
              labelColor: Colors.black,
              unselectedLabelColor: Colors.grey,
              labelStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
              tabs: [
                // "Owen" Tab
                Tab(
                  text: 'Owen',
                ),

                // "Eloise" Tab
                Tab(
                  text: 'Eloise',
                ),

                // "Henry" Tab
                Tab(
                  text: 'Henry',
                ),
              ],
            ),
            SizedBox(height: 25),
            Expanded(
              child: TabBarView(
                children: [
                  // "Owen" Tab Content
                  OwenTab(),

                  // "Eloise" Tab Content
                  EloiseTab(),

                  // "Henry" Tab Content
                  HenryTab(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Expanded(
          child: ListView.builder(
            scrollDirection: Axis.vertical,
            itemCount: value.childTiles.length,
            itemBuilder: (context, index) {
              ChildTile individualChildTile = value.childTiles[index];
              return Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: ChildTiles(
                  childTiles: individualChildTile,
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => const MoneyPage(
                        tabIndex: index,), //Add this code
                      ),
                    );

import 'package:flutter/material.dart';
import '../components/widgets/money_tab_bar.dart';

class MoneyPage extends StatefulWidget {
  const MoneyPage({super.key, required this.tabIndex}); //add this
  
  final int tabIndex;
  @override
  State<MoneyPage> createState() => _CardsPageState();
}

class _CardsPageState extends State<MoneyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: const IconThemeData(color: Colors.black),
        actions: const [
          Padding(
            padding: EdgeInsets.only(right: 20.0),
            child: Icon(Icons.pie_chart_outline, color: Colors.black),
          ),
        ],
        backgroundColor: Colors.white,
        elevation: 0,
        title: const Text(
          'Money',
          style: TextStyle(color: Colors.black, fontSize: 16),
        ),
      ),
      body: MoneyTabBar(tabIndex: widget.tabIndex), //add this
    );
  }
}