Skip to content

Instantly share code, notes, and snippets.

@akifarhan
Created July 20, 2022 03:43
Show Gist options
  • Save akifarhan/e18e15b0561dd09e5f334899012b7ddd to your computer and use it in GitHub Desktop.
Save akifarhan/e18e15b0561dd09e5f334899012b7ddd to your computer and use it in GitHub Desktop.
clip-inkwell
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MultipleTabButton(
width: 200,
tabs: [
TabButton(
label: 'First',
onTap: (index) {},
),
TabButton(
label: 'Second',
onTap: (index) {},
),
],
),
),
),
);
}
}
class MultipleTabButton extends StatefulWidget {
const MultipleTabButton({
Key? key,
required this.tabs,
this.initialIndex,
this.width,
}) : assert(tabs.length > 1, 'Tabs length must be more than 1'),
super(key: key);
final List<TabButton> tabs;
final int? initialIndex;
final double? width;
@override
State<MultipleTabButton> createState() => _MultipleTabButtonState();
}
class _MultipleTabButtonState extends State<MultipleTabButton> {
int _selectedIndex = 0;
@override
void initState() {
if (widget.initialIndex != null) {
_selectedIndex = widget.initialIndex!;
}
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
height: 33,
width: widget.width,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: Colors.blue,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: List.generate(
widget.tabs.length,
(index) {
TabButton tab = widget.tabs[index];
bool isSelected = index == _selectedIndex;
return Flexible(
child: Container(
decoration: BoxDecoration(
color: isSelected ? Colors.blue : Colors.transparent,
border: index <= 0
? null
: const Border(
left: BorderSide(
color: Colors.blue,
),
),
),
child: InkWell(
onTap: isSelected
? null
: () {
setState(() {
_selectedIndex = index;
});
tab.onTap(index);
},
child: Center(
child: Text(
tab.label,
style: TextStyle(
color: isSelected ? Colors.white : Colors.blue,
),
),
),
),
),
);
},
),
),
);
}
}
class TabButton {
final String label;
final void Function(int) onTap;
TabButton({
required this.label,
required this.onTap,
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment