MrBlake/MrbWebLibre
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

change search tabbar to pill toggle

Browse Source
This commit is contained in:
Fabian Freund
2026-03-12 15:42:09 +01:00
parent 5486ae835a
commit df69498fbe
1 changed files with 87 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/lib/features/geckoview/features/search/presentation/widgets/smart_bang_selector.dart
+86 -10
View File
@@ -164,22 +164,98 @@ class _TabbedBangSelector extends HookConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final tabController = useTabController(initialLength: 2);
final tabIndex = useState(0);
useEffect(
() {
void listener() => tabIndex.value = tabController.index;
tabController.addListener(listener);
return () => tabController.removeListener(listener);
},
[tabController],
);
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final disableAnimations = MediaQuery.disableAnimationsOf(context);
return Column(
mainAxisSize: MainAxisSize.min,
children: [
// Tab bar - full width
SizedBox(
height: 32,
width: double.infinity,
child: TabBar(
controller: tabController,
dividerColor: Colors.transparent,
tabs: const [
Tab(text: 'Search On This Site'),
Tab(text: 'All Providers'),
// Animated sliding pill toggle
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Container(
height: 36,
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(18),
),
child: Stack(
children: [
AnimatedAlign(
alignment: tabIndex.value == 1
? Alignment.centerRight
: Alignment.centerLeft,
duration: disableAnimations
? Duration.zero
: const Duration(milliseconds: 250),
curve: Curves.easeOutCubic,
child: FractionallySizedBox(
widthFactor: 0.5,
child: Container(
decoration: BoxDecoration(
color: colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(18),
),
),
),
),
Row(
children: [
Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => tabController.animateTo(0),
child: Center(
child: Text(
'Search On This Site',
style: theme.textTheme.labelMedium?.copyWith(
color: tabIndex.value == 0
? colorScheme.onPrimaryContainer
: colorScheme.onSurfaceVariant,
fontWeight: tabIndex.value == 0
? FontWeight.w600
: FontWeight.normal,
),
),
),
),
),
Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => tabController.animateTo(1),
child: Center(
child: Text(
'All Providers',
style: theme.textTheme.labelMedium?.copyWith(
color: tabIndex.value == 1
? colorScheme.onPrimaryContainer
: colorScheme.onSurfaceVariant,
fontWeight: tabIndex.value == 1
? FontWeight.w600
: FontWeight.normal,
),
),
),
),
),
],
),
],
),
),
),
// Tab content
SizedBox(