feat: add bouncy sliding glass-glider animation to contribute tabs
Replicate the web app's glass-radio-group animation on the Flutter contribute screen. Key changes: - Sliding white glider pill behind active tab using AnimatedPositioned - Bouncy spring physics: Cubic(0.37, 1.95, 0.66, 0.56) matching the web CSS cubic-bezier that overshoots and settles - Glassmorphic container: semi-transparent white bg with white border - AnimatedDefaultTextStyle for smooth color transitions (blue active, white 0.7 opacity inactive) - AnimatedSize for icon appear/disappear on active tab - LayoutBuilder for responsive tab width calculation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -230,65 +230,130 @@ class _ContributeScreenState extends State<ContributeScreen> with SingleTickerPr
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// Bouncy spring curve matching web CSS: cubic-bezier(0.37, 1.95, 0.66, 0.56)
|
||||||
|
static const Curve _bouncyCurve = Cubic(0.37, 1.95, 0.66, 0.56);
|
||||||
|
|
||||||
|
/// Tab icons for each tab
|
||||||
|
static const List<IconData> _tabIcons = [
|
||||||
|
Icons.edit_outlined,
|
||||||
|
Icons.emoji_events_outlined,
|
||||||
|
Icons.workspace_premium_outlined,
|
||||||
|
];
|
||||||
|
|
||||||
Widget _buildSegmentedTabs(BuildContext context) {
|
Widget _buildSegmentedTabs(BuildContext context) {
|
||||||
final tabs = ['Contribute', 'Leaderboard', 'Achievements'];
|
final tabs = ['Contribute', 'Leaderboard', 'Achievements'];
|
||||||
|
|
||||||
return Padding(
|
return Padding(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
|
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 10),
|
||||||
child: Container(
|
child: LayoutBuilder(
|
||||||
padding: const EdgeInsets.all(8),
|
builder: (context, constraints) {
|
||||||
decoration: BoxDecoration(
|
final containerWidth = constraints.maxWidth;
|
||||||
color: Colors.white.withOpacity(0.06),
|
// 6px padding on each side of the container
|
||||||
borderRadius: BorderRadius.circular(_cornerRadius + 6),
|
const double containerPadding = 6.0;
|
||||||
border: Border.all(color: Colors.white.withOpacity(0.10)),
|
final innerWidth = containerWidth - (containerPadding * 2);
|
||||||
boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.04), blurRadius: 8, offset: const Offset(0, 6))],
|
final tabWidth = innerWidth / tabs.length;
|
||||||
),
|
|
||||||
child: Row(
|
return ClipRRect(
|
||||||
children: List.generate(tabs.length, (i) {
|
borderRadius: BorderRadius.circular(16),
|
||||||
final active = i == _activeTab;
|
child: Container(
|
||||||
return Expanded(
|
height: 57,
|
||||||
child: GestureDetector(
|
decoration: BoxDecoration(
|
||||||
onTap: () => setState(() => _activeTab = i),
|
color: Colors.white.withOpacity(0.15),
|
||||||
child: AnimatedContainer(
|
borderRadius: BorderRadius.circular(16),
|
||||||
duration: const Duration(milliseconds: 220),
|
border: Border.all(color: Colors.white.withOpacity(0.2)),
|
||||||
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 10),
|
),
|
||||||
margin: EdgeInsets.only(right: i == tabs.length - 1 ? 0 : 8),
|
child: Stack(
|
||||||
decoration: BoxDecoration(
|
children: [
|
||||||
color: active ? Colors.white : Colors.transparent,
|
// ── Sliding glider ──
|
||||||
borderRadius: BorderRadius.circular(_cornerRadius - 4),
|
AnimatedPositioned(
|
||||||
boxShadow: active ? [BoxShadow(color: Colors.black.withOpacity(0.06), blurRadius: 8, offset: const Offset(0, 4))] : null,
|
duration: const Duration(milliseconds: 500),
|
||||||
|
curve: _bouncyCurve,
|
||||||
|
left: containerPadding + (_activeTab * tabWidth),
|
||||||
|
top: containerPadding,
|
||||||
|
width: tabWidth,
|
||||||
|
height: 57 - (containerPadding * 2),
|
||||||
|
child: AnimatedContainer(
|
||||||
|
duration: const Duration(milliseconds: 400),
|
||||||
|
curve: Curves.easeInOut,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white.withOpacity(0.95),
|
||||||
|
borderRadius: BorderRadius.circular(12),
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: Colors.black.withOpacity(0.10),
|
||||||
|
blurRadius: 15,
|
||||||
|
offset: const Offset(0, 4),
|
||||||
|
),
|
||||||
|
BoxShadow(
|
||||||
|
color: Colors.black.withOpacity(0.08),
|
||||||
|
blurRadius: 3,
|
||||||
|
offset: const Offset(0, 1),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
// ── Tab labels ──
|
||||||
children: [
|
Padding(
|
||||||
// show a small icon only for active tab
|
padding: const EdgeInsets.all(containerPadding),
|
||||||
if (active) ...[
|
child: Row(
|
||||||
Icon(Icons.edit, size: 14, color: _primary),
|
children: List.generate(tabs.length, (i) {
|
||||||
const SizedBox(width: 8),
|
final active = i == _activeTab;
|
||||||
],
|
return Expanded(
|
||||||
// FittedBox ensures the whole word is visible (scales down if necessary)
|
child: GestureDetector(
|
||||||
Flexible(
|
onTap: () => setState(() => _activeTab = i),
|
||||||
child: FittedBox(
|
behavior: HitTestBehavior.opaque,
|
||||||
fit: BoxFit.scaleDown,
|
child: SizedBox(
|
||||||
alignment: Alignment.center,
|
height: double.infinity,
|
||||||
child: Text(
|
child: Row(
|
||||||
tabs[i],
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
textAlign: TextAlign.center,
|
children: [
|
||||||
style: TextStyle(
|
// Animated icon: only shows for active tab
|
||||||
color: active ? _primary : Colors.white.withOpacity(0.95),
|
AnimatedSize(
|
||||||
fontWeight: active ? FontWeight.w800 : FontWeight.w600,
|
duration: const Duration(milliseconds: 300),
|
||||||
fontSize: 16, // preferred size; FittedBox will shrink if needed
|
curve: Curves.easeInOut,
|
||||||
|
child: active
|
||||||
|
? Padding(
|
||||||
|
padding: const EdgeInsets.only(right: 6),
|
||||||
|
child: Icon(
|
||||||
|
_tabIcons[i],
|
||||||
|
size: 15,
|
||||||
|
color: _primary,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
: const SizedBox.shrink(),
|
||||||
|
),
|
||||||
|
Flexible(
|
||||||
|
child: AnimatedDefaultTextStyle(
|
||||||
|
duration: const Duration(milliseconds: 300),
|
||||||
|
curve: Curves.easeInOut,
|
||||||
|
style: TextStyle(
|
||||||
|
color: active ? _primary : Colors.white.withOpacity(0.7),
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: Theme.of(context).textTheme.bodyMedium?.fontFamily,
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
tabs[i],
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
overflow: TextOverflow.ellipsis,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
);
|
||||||
),
|
}),
|
||||||
],
|
),
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
),
|
),
|
||||||
);
|
),
|
||||||
}),
|
);
|
||||||
),
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user