Skip to content

Instantly share code, notes, and snippets.

@SuperPenguin
Created June 30, 2022 10:54
Show Gist options
  • Save SuperPenguin/1109a7c5b4b67e37bcc24af52b63b54a to your computer and use it in GitHub Desktop.
Save SuperPenguin/1109a7c5b4b67e37bcc24af52b63b54a to your computer and use it in GitHub Desktop.
Clip your TabBarView
import 'package:flutter/material.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const App());
}
class App extends StatelessWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 0,
length: 3,
child: Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(
height: 200,
child: ColoredBox(
color: Colors.orange,
child: Material(
color: Colors.red,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24.0),
),
),
),
),
const SizedBox(
height: 50,
child: ColoredBox(
color: Colors.red,
child: Material(
color: Colors.orange,
borderRadius: BorderRadius.only(
topRight: Radius.circular(24.0),
),
child: TabBar(
tabs: [
Tab(
child: Text('Tab 0'),
),
Tab(
child: Text('Tab 1'),
),
Tab(
child: Text('Tab 2'),
),
],
),
),
),
),
Expanded(
child: ColoredBox(
color: Colors.orange,
child: ClipRRect(
borderRadius: const BorderRadius.only(
topRight: Radius.circular(24.0),
),
child: Material(
color: Colors.white,
child: TabBarView(
children: [
ListView.separated(
separatorBuilder: (context, index) => const SizedBox(
height: 10.0,
),
padding: EdgeInsets.zero,
itemCount: 100,
itemBuilder: (context, index) => Material(
color: Colors.grey,
child: ListTile(
title: Text('Tab0-$index'),
onTap: () {},
),
),
),
ListView.separated(
separatorBuilder: (context, index) => const SizedBox(
height: 10.0,
),
padding: EdgeInsets.zero,
itemCount: 100,
itemBuilder: (context, index) => Material(
color: Colors.amber,
child: ListTile(
title: Text('Tab0-$index'),
onTap: () {},
),
),
),
ListView.separated(
separatorBuilder: (context, index) => const SizedBox(
height: 10.0,
),
padding: EdgeInsets.zero,
itemCount: 100,
itemBuilder: (context, index) => Material(
color: Colors.cyan,
child: ListTile(
title: Text('Tab0-$index'),
onTap: () {},
),
),
),
],
),
),
),
),
),
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment