Repository: flutter
Issue: TabBar Ripple flows outside of tabs
Labels: framework,f: material design,a: quality,has reproducible steps,found in release: 3.3,found in release: 3.7,team-design,triaged-design


<img src="https://user-images.githubusercontent.com/22423754/74045476-d4d71480-49f2-11ea-840a-45fd539d4812.jpg" width="300" height="600" />



On tab press splash color show outside tab. It should be not show outside `ClipRRect`.

```dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:ui';

import 'Widgets/CustomDrawer.dart';

void main() {
  runApp(MainApp());
}

const Color primary = Color(0xffe93735);
const Color secondry = Color(0xffF7B6B5);

class MainApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
          primaryColor: Color(0xffe93735),
          primaryColorDark: Color(0xffe93735),
          primarySwatch: Colors.yellow,
          accentColor: Color(0xffe93735),
          iconTheme: IconThemeData(
            color: Color(0xffe93735),
          ),
          backgroundColor: Color(0xffeeeeee),
          buttonTheme: ButtonThemeData(
              buttonColor: Color(0xffe93735),
              textTheme: ButtonTextTheme.accent),
          floatingActionButtonTheme: FloatingActionButtonThemeData(
            backgroundColor: Color(0xffe93735),
            foregroundColor: Colors.white,
          ),
          textTheme: TextTheme(
              button: TextStyle(
                  color: Colors.green, // This is not working.
                  fontSize: 30.0))),
      home: LandingPage(),
    );
  }
}

class LandingPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return LandingPageState();
  }
}

class LandingPageState extends State<LandingPage>
    with SingleTickerProviderStateMixin {
  String activeView = "MESSAGE";
  TabController tabController;
  
  changeActiveView(String active) {
    setState(() {
      activeView = active;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    tabController = TabController(length: 3, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.black,
        drawer: Drawer(child: CustomDrawer(
          onTap: (String value) {
            changeActiveView(value);
            Navigator.pop(context);
          },
        )),
        appBar: AppBar(
          title: Text("વાતો..."),
        ),
        body: Stack(
          children: <Widget>[
            TabBarView(
              controller: tabController,
              children: <Widget>[
                Container(
                  child: Text("Message"),
                ),
                Container(
                  child: Text("Images"),
                ),
                Container(
                  child: Text("Video"),
                )
              ],
            ),
            Positioned(
              bottom: 20,
                left: (size.width - (size.width/1.2)),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(30),
                  child: Container(
                    height: 50,
                    width: MediaQuery.of(context).size.width/1.5,
                    color: Colors.white,
                    child: CustomTabView(controller: tabController,),
                  ),
                ),
              ),
          ],
        )
    );
  }
}

class CustomTabView extends StatelessWidget{
  TabController controller;
  CustomTabView({this.controller});

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ClipRRect(
      borderRadius: BorderRadius.circular(30),
      child: TabBar(
        indicatorColor: Colors.transparent,
        unselectedLabelColor: primary,
        indicator: BoxDecoration(
            color: primary,
            borderRadius: BorderRadius.circular(30)
        ),
        controller: controller,
        tabs: <Widget>[
          Tab(
            child: Icon(Icons.chat),
          ),
          Tab(
            child: Icon(Icons.photo_library),
          ),
          Tab(
            child: Icon(Icons.video_library),
          )
        ],
      ),
    );
  }
}

```