how to create TabBar with custom size like a pro in Flutter?

Question

recently i started to create login/register page. i wanted to make navigation between login/register using TabBar widget with TabBarWiew. i want to make pages with custom sized tabBar with indicators like below. third of screen height will be tabBars with background of image. how can i achieve that?

EDITED

with a help of @CopsOnRoad i have achieved something like this:

Full code:

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

Screenshot:

---

Code:

@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'),
          ],
        ),
      ),
    ),
  );
}

Answer 2

You can achieve the custom size by wrapping your widget with Expanded widget, this widget will expand to fill up all available space, and if you have multiple expanded widgets, you can use flex property to decide how much each widget expands you can read more about them here.

As for image background you can check this question