Need help in customising tab bar in flutter

Question

I am trying to create a customised tab bar with border line for tab bar (as mentioned below) in the body of flutter app and need your help in completion of the tab bar.

I am looking to achieve similar design as mentioned below:

Below is the image and code i have achieved so far:

My code so far:

TabBar(
                unselectedLabelColor: Colors.white,
                indicatorColor: Colors.white,
                labelColor: Colors.white,
                indicator: const BoxDecoration(
                  border: Border(
                    top: BorderSide(width: 1.0, color: Colors.white),
                    left: BorderSide(width: 1.0, color: Colors.white),
                    right: BorderSide(width: 1.0, color: Colors.white),
                    bottom:
                        BorderSide(width: 1.0, color: Colors.transparent),
                  ),
                ),
                tabs: const [
                  Tab(
                    child: Text("LOGIN"),
                  ),
                  Tab(
                    child: Text("SIGN UP"),
                  ),
                ],
                controller: _tabController,
              )

Unable to achieve the borders for tabs and line at bottom of tabs. Please help.

user_11452511 · Answer

Check this out:

class Lal extends StatefulWidget {
  const Lal({Key? key}) : super(key: key);

  @override
  State createState() => _LalState();
}

class _LalState extends State with SingleTickerProviderStateMixin {
  late final TabController _controller;
  @override
  void initState() {
    _controller = TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      padding: const EdgeInsets.all(40),
      child: Scaffold(
        backgroundColor: Colors.black,
        body: Stack(
          clipBehavior: Clip.none,
          children: [
            const SizedBox(
              height: 40,
              width: double.maxFinite,
            ),
            Positioned.fill(
              top: 47.2,
              child: Container(
                height: 2,
                color: Colors.white,
                width: double.maxFinite,
              ),
            ),
            TabBar(
              unselectedLabelColor: Colors.white,
              indicatorColor: Colors.white,
              labelColor: Colors.white,
              indicator: const BoxDecoration(
                border: Border(
                  top: BorderSide(width: 1.0, color: Colors.white),
                  left: BorderSide(width: 1.0, color: Colors.white),
                  right: BorderSide(width: 1.0, color: Colors.white),
                  bottom: BorderSide(width: 1.0, color: Colors.black),
                ),
              ),
              tabs: const [
                Tab(
                  child: Text("LOGIN"),
                ),
                Tab(
                  child: Text("SIGN UP"),
                ),
              ],
              controller: _controller,
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Need help in customising tab bar in flutter

1 Answers