Please tell me. You need to make a TabBar under the title. I have the AppBar itself at the top, below it immediately goes the Favorites heading, and under the heading I need the TabBar itself. How can it be implemented?

Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    return Container(
      height: size.height,
      width: size.width,
      decoration: const BoxDecoration(
          image: DecorationImage(
        image: AssetImage('assets/images/background/main_background.png'),
        fit: BoxFit.cover,
      )),
      child: _child(size),
    );
  }

  Widget _child(Size size) => Padding(
        padding: const EdgeInsets.only(left: 24, right: 24),
        child: Column(children: const [
          SizedBox(height: 178),
          BackStepWidget(text: 'Favorites'),
          SizedBox(height: 30),
        ]),
      );
}

CodePudding user response：

put a TabBar() in a column()

class TabBarDemo extends StatefulWidget {
  @override
  _TabBarDemoState createState() => _TabBarDemoState();
}

class _TabBarDemoState extends State<TabBarDemo>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Container(
          decoration: BoxDecoration(
            boxShadow: [
              BoxShadow(
                color: AppColors.iconLight.withOpacity(0.3),
                spreadRadius: 8,
                blurRadius: 24,
              ),
            ],
          ),
          child: Text('Workout Library'),
        ),
        centerTitle: false,
        leadingWidth: 54,
        leading: Align(
          alignment: Alignment.centerRight,
          child: HomeSpeedDialButton(),
        ),
        actions: [
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: GestureDetector(
                  onTap: () => {
                    // setState(() {
                    //   hasBeenPressed = !hasBeenPressed;
                    // }),
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      boxShadow: [
                        // BoxShadow(
                        //   color: hasBeenPressed
                        //       ? AppColors.accent.withOpacity(0.3)
                        //       : AppColors.iconLight,
                        //   spreadRadius: 8,
                        //   blurRadius: 24,
                        // ),
                      ],
                    ),
                    // child: Text(
                    //   'LVL UP',
                    //   style: TextStyle(
                    //     fontWeight: FontWeight.w900,
                    //     color: hasBeenPressed
                    //         ? AppColors.accent
                    //         : AppColors.iconLight,
                    //   ),
                    // ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(right: 24.0),
                child: Hero(
                  tag: 'hero-profile-picture',
                  child: Avatar.small(
                    url: null,
                    onTap: () {
                      Navigator.of(context).push(ProfileScreen.route);
                    },
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TabBar(
              indicatorColor: AppColors.textFaded,
              unselectedLabelColor: Colors.white,
              labelColor: Colors.red,
              tabs: [
                Tab(
                  text: 'Chest',
                ),
                Tab(
                  text: 'Back',
                ),
                Tab(
                  text: 'Legs',
                ),
              ],
              controller: _tabController,
              indicatorSize: TabBarIndicatorSize.tab,
            ),
            TabBarLibrary(tabController: _tabController),
          ],
        ),
      ),
    );
  }
}

The TabBarLibray() Holds what you want to display under each tab, in my case each one returns a listview

class TabBarLibrary extends StatefulWidget {
  const TabBarLibrary({
    Key? key,
    required TabController tabController,
  })  : _tabController = tabController,
        super(key: key);

  final TabController _tabController;

  @override
  State<TabBarLibrary> createState() => _TabBarLibraryState();
}

class _TabBarLibraryState extends State<TabBarLibrary> {
  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: TabBarView(
        children: [
          Container(
            child: ListView.builder(
                itemCount: chestTitles.length,
                itemBuilder: (BuildContext context, int position) {
                  return getRowChest(position);
                }),
          ),
          Container(
            child: ListView.builder(
                itemCount: backTitles.length,
                itemBuilder: (BuildContext context, int position) {
                  return getRowBack(position);
                }),
          ),
          Container(
            child: ListView.builder(
                itemCount: legsTitles.length,
                itemBuilder: (BuildContext context, int position) {
                  return getRowLegs(position);
                }),
          ),
        ],
        controller: widget._tabController,
      ),
    );
  }