my_custom_tab_bar.dart

///
/// This DartPad is a custom tab bar made using Flutter.
///
/// Author: Yazeed AlKhalaf
/// Twitter: @YazeedAlKhalaf | https://twitter.com/YazeedAlKhalaf
///
/// ** Please credit the author if you use this code or some of it! 🙈🚀 **
/// ** DON'T REMOVE THOSE COMMENTS! **
///


import 'package:flutter/material.dart';

void main() {
  runApp(const MyCoolApp());
}

class MyCoolApp extends StatelessWidget {
  const MyCoolApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyCoolPage(),
    );
  }
}

class MyCoolPage extends StatefulWidget {
  @override
  State<MyCoolPage> createState() => _MyCoolPageState();
}

class _MyCoolPageState extends State<MyCoolPage>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 300,
              height: 50,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(25),
              ),
              child: TabBar(
                controller: _tabController,
                tabs: const [
                  Text(
                    "نبذة عني",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                  Text(
                    "المواعيد المتاحة",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                ],
                indicator: BoxDecoration(
                  color: Color(0xff1F7789),
                  borderRadius: BorderRadius.circular(25),
                ),
                labelColor: Colors.white,
                unselectedLabelColor: Colors.black,
                onTap: (int newValue) {
                  debugPrint("My new value: $newValue");
                },
              ),
            ),
            // =================================================================
            // this is extra in case you want to use the tab bar to change the
            // view under it.
            // =================================================================
            // Expanded(
            //   child: TabBarView(
            //     controller: _tabController,
            //     children: const [
            //       Center(
            //         child: Text(
            //           "One",
            //         ),
            //       ),
            //       Center(
            //         child: Text(
            //           "Two",
            //         ),
            //       ),
            //     ],
            //   ),
            // ),
          ],
        ),
      ),
    );
  }
}