如何创建具有自定义大小的TabBar，就像Flatter中的pro一样？

Question

编辑

在@CopsOnRoad的帮助下，我取得了如下成就：

完整代码：

import 'package:flutter/material.dart';

class CustomTabWidget extends StatefulWidget {
  @override
  _CustomTabWidget State createState() => _CustomTabWidget State();
}

class _CustomTabWidget State extends State<CustomTabWidget >
    with SingleTickerProviderStateMixin {
  TabController tabController;
  bool showTab = true;

  @override
  void initState() {
    tabController = TabController(
      length: 2,
      initialIndex: 0,
      vsync: this,
    );
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return DefaultTabController(
      length: 2,
      child: showTab
          ? Scaffold(
              appBar: AppBar(
                elevation: 3,
                leading: Container(),
                toolbarHeight: 300,
                flexibleSpace: Image.asset(
                  'assets/images/products/yogurt2.png',
                  fit: BoxFit.cover,
                ),
                bottom: TabBar(
                  controller: tabController,
                  isScrollable: true,
                  indicatorColor: Colors.green,
                  indicatorWeight: 2,
                  labelPadding: EdgeInsets.symmetric(horizontal: width / 6),
                  tabs: [
                    Tab(text: 'Login'),
                    Tab(text: 'Register'),
                  ],
                ),
              ),
              body: TabBarView(controller: tabController, children: [
                Container(
                  child: Center(
                    child: Text('Page1'),
                  ),
                ),
                Container(
                  child: Center(
                    child: Text('Page2'),
                  ),
                ),
              ]),
            )
          : Container(),
    );
    
  }
}

Answer 1

您可以通过使用扩展的小部件包装小部件来实现自定义大小，该小部件将扩展以填满所有可用空间，如果您有多个扩展的小部件，您可以使用flex属性来决定每个小部件的扩展程度，您可以在此处阅读更多关于它们的信息。

至于图像背景，你可以检查这个问题

Answer 2

截图：

代码：

@override
Widget build(BuildContext context) {
  return DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        toolbarHeight: 200,
        flexibleSpace: Image.asset(
          'chocolate_image',
          fit: BoxFit.cover,
        ),
        bottom: TabBar(
          tabs: [
            Tab(text: 'A'),
            Tab(text: 'B'),
          ],
        ),
      ),
    ),
  );
}