I want something like this.

Im able to implement something similar with SwitchTab,but not able to use gradient color for selected tab.

Please help

SwitchTab(
text: const [ "Personal",                                             
        "Group",
        ],
        selectedTextColor: Colors.black,
        unselectedTextColor:Colors.white,
        shape: SwitchTabShape.rounded,
        thumbColor: Colors.white,
        backgroundColour:                                               
        Color.fromARGB(255, 31, 89, 169),
        onValueChanged: (index) {
         setState(() {
           selected = index;
         });
         },
        ),

CodePudding user response：

You can use a combination of a normal TabBar, BoxDecoration and LinearGradient for this:

Code Example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stack Overflow Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Container(
              height: 45,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(
                  25.0,
                ),
              ),
              child: TabBar(
                controller: _tabController,
                indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(
                    25.0,
                  ),
                  color: Colors.green,
                  gradient: LinearGradient(
                    begin: Alignment.topRight,
                    end: Alignment.bottomLeft,
                    colors: [
                      Colors.pink,
                      Colors.deepPurple,
                    ],
                  ),
                ),
                labelColor: Colors.white,
                unselectedLabelColor: Colors.black,
                tabs: [                  
                  const Tab(text: 'Personal'),
                  const Tab(text: 'Group'),
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [
                  Center(child: Text('Personal Content')),
                  Center(child: Text('Group Content')),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}