I am trying to build the bottomNavigationBar with Toptabbar. bottomNavigationBar is working fine but trying to diploy Toptabbar but getting an error of The method 'TopTapBar' isn't defined for the type '_MyHomePageState'. How can I define method from One statefull widget to another stateful widget?

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Navigation Bar',
      theme: ThemeData(
        primaryColor: Color(0xFFC41A3B),
        primaryColorLight: Color(0xFFFBE0E6),
      ),
      home: MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  String title = 'Tapbar/BottomNav';
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('title'),
        centerTitle: true,
        elevation: 0.0,
      ),
      body: Center(
        child: TabBarView(
          controller: _tabController,
          physics: NeverScrollableScrollPhysics(), 
          children: const <Widget>[
            TopTapBar(),
            Center(
              child: Text(
                'Home',
                style: TextStyle(fontSize: 32.0),
              ),
            ),
            Center(
              child: Text(
                'Category',
                style: TextStyle(fontSize: 32.0),
              ),
            ),
            Center(
              child: Text(
                'Search',
                style: TextStyle(fontSize: 32.0),
              ),
            ),
            Center(
              child: Text(
                'Cart',
                style: TextStyle(fontSize: 32.0),
              ),
            ),
            Center(
              child: Text(
                'Profile',
                style: TextStyle(fontSize: 32.0),
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Container(
        color: Color(0xFFC41A3B),
        child: TabBar(
          controller: _tabController,
          unselectedLabelColor: Colors.black12,
          indicator: UnderlineTabIndicator(),
          labelColor: Colors.white,
          labelStyle: TextStyle(fontSize: 12.0),
          tabs: const [
            Tab(
              icon: Icon(Icons.home),
              text: 'Home',
            ),
            Tab(
              icon: Icon(Icons.category),
              text: 'Category',
            ),
            Tab(
              icon: Icon(Icons.search),
              text: 'Search',
            ),
            Tab(
              icon: Icon(Icons.shopping_cart),
              text: 'Cart',
            ),
            Tab(
              icon: Icon(Icons.person),
              text: 'Person',
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<TopTapBAR> createState() => _TopTapBARState();
}

class _TopTapBARState extends State<TopTapBAR>
    with SingleTickerProviderStateMixin {
  late TabController _taBcontroller;

  @override
  void initState() {
    super.initState();
    _taBcontroller = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _taBcontroller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(kToolbarHeight),
        child: Container(
          color: Color(0xFFC41A3B),
          child: TabBar(
            controller: _taBcontroller,
            indicator: UnderlineTabIndicator(),
            labelColor: Colors.white,
            labelStyle: TextStyle(fontSize: 12.0),
            indicatorWeight: 5.0,
            tabs: const [
              Tab(
                text: 'Paid', 
              ),
              Tab(
                text: 'Unpaid',
              ),
              Tab(
                text: 'Level',
              ),
            ],
          ),
        ),
      ),
      body: TabBarView(
        controller: _taBcontroller,
        physics: NeverScrollableScrollPhysics(),  
        children:const[
        Center(child: Text('Paid',style: TextStyle(fontSize: 32.0),)),
        Center(child: Text('Unpaid',style: TextStyle(fontSize: 32.0),)),
        Center(child: Text('Level',style: TextStyle(fontSize: 32.0),)),
       ],
      ),
    );
  }
}

CodePudding user response：

This is type issue as @kasia described on comment.

Change it like

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

  @override
  State<TopTapBar> createState() => _TopTapBarState();
}

class _TopTapBarState extends State<TopTapBar>
    with SingleTickerProviderStateMixin {