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(),
    );
    
  }
}

score 3 · Accepted Answer · answered Apr 01 '21 at 12:23

3

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

answered Apr 01 '21 at 12:23

CopsOnRoad

237,138
77
654
440

thank you for your quick response. By the way why in your screenshot background image doesn't cover tabs in your `TabBar` widget? – RuslanBek Apr 01 '21 at 13:18
That's because I'm not using the `FlexibleSpaceBar` widget which has `background` and `title` property and both of them accepts a `Widget`. If you use that, it will start covering the `TabBar`'s background. – CopsOnRoad Apr 01 '21 at 14:37

score 1 · Answer 2 · answered Apr 01 '21 at 12:00

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

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

2 Answers2