如何在 flutter 中制作此标签栏

Question

How to make adjust the size of tabba rto 40 in flutter,how to make 2 tabbar in one screen in flutter please any one colud help with this

Answer 1

Here is the code it might help you.

import 'package:flutter/material.dart';

class StackOverFlowUI extends StatefulWidget {
  @override
  State<StackOverFlowUI> createState() => _StackOverFlowUIState();
}

class _StackOverFlowUIState extends State<StackOverFlowUI>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 200,
        backgroundColor: Colors.transparent,
        elevation: 0,
        centerTitle: true,
        flexibleSpace: Container(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
          height: 300,
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.topLeft,
              colors: [
                Color(0xFFd1539d),
                Color(0xFF36a4e2),
              ],
            ),
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(50),
              bottomRight: Radius.circular(50),
            ),
          ),
          child: Column(
            children: [
              Expanded(
                  child: Center(
                child: RichText(
                  text: const TextSpan(
                    children: [
                      WidgetSpan(
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 2.0),
                          child: Icon(
                            Icons.bookmark_border,
                            color: Colors.white,
                            size: 25,
                          ),
                        ),
                      ),
                      TextSpan(
                        text: " Tik Save+",
                        style: TextStyle(
                          fontSize: 23,
                        ),
                      ),
                    ],
                  ),
                ),
              )),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: const [
                  Icon(
                    Icons.settings,
                    color: Colors.white,
                  ),
                  Icon(
                    Icons.tiktok,
                    color: Colors.white,
                  ),
                ],
              )
            ],
          ),
        ),
      ),
      body: DefaultTabController(
        length: 3,
        child: Scaffold(
          bottomNavigationBar: bottomMenu(),
          body: TabBarView(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: [
                    Container(
                      height: 45,
                      decoration: BoxDecoration(
                        color: Colors.grey[300],
                        borderRadius: BorderRadius.circular(
                          10.0,
                        ),
                      ),
                      child: TabBar(
                        controller: _tabController,
                        indicator: BoxDecoration(
                          borderRadius: BorderRadius.circular(
                            10.0,
                          ),
                          color: Colors.grey[800],
                        ),
                        labelColor: Colors.white,
                        unselectedLabelColor: Colors.black,
                        tabs: const [
                          Tab(
                            text: 'Videos',
                          ),
                          Tab(
                            text: 'Collections',
                          ),
                          Tab(
                            text: 'Users',
                          ),
                        ],
                      ),
                    ),
                    Expanded(
                      child: TabBarView(
                        controller: _tabController,
                        children: const [
                          Center(
                            child: Text(
                              'Videos',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                          Center(
                            child: Text(
                              'Collections',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                          Center(
                            child: Text(
                              'Users',
                              style: TextStyle(
                                fontSize: 25,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              const Icon(Icons.directions_transit),
              const Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }

  Widget bottomMenu() {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.topLeft,
          colors: [
            Color(0xFFd1539d),
            Color(0xFF36a4e2),
          ],
        ),
      ),
      child: const TabBar(
        labelColor: Colors.white,
        unselectedLabelColor: Colors.white70,
        indicatorSize: TabBarIndicatorSize.tab,
        indicatorPadding: EdgeInsets.all(5.0),
        indicatorColor: Colors.black,
        tabs: [
          Tab(
            text: "Home",
            icon: Icon(Icons.home_outlined),
          ),
          Tab(
            text: "Pro",
            icon: Icon(Icons.workspace_premium),
          ),
          Tab(
            text: "More",
            icon: Icon(Icons.more_rounded),
          ),
        ],
      ),
    );
  }
}