perf: fix scroll lag on profile/contribute, unpin calendar gradient
profile_screen: SingleChildScrollView + Column eagerly built every event card (all images, shadows, tiles) at once even when off-screen. Replaced with CustomScrollView + SliverList so only visible tiles are built per frame. Also switches to BouncingScrollPhysics for natural momentum. contribute_screen: Each _formCard wrapped in RepaintBoundary so form cards are isolated render layers — one card's repaint doesn't invalidate its siblings. Added BouncingScrollPhysics to the form SingleChildScrollView. calendar_screen: Blue gradient banner was Positioned(top:0) making it sticky even as the user scrolled. Removed the fixed Positioned layer and moved the gradient inside the CustomScrollView as the first sliver in a Stack alongside the calendar card (which keeps its y=110 visual overlap). Now the entire page — gradient, calendar, events — scrolls as one unit.
This commit is contained in:
@@ -569,28 +569,11 @@ class _CalendarScreenState extends State<CalendarScreen> {
|
||||
}
|
||||
|
||||
// MOBILE layout
|
||||
// Stack: extended gradient panel (below appbar) that visually extends behind the calendar.
|
||||
return Scaffold(
|
||||
backgroundColor: theme.scaffoldBackgroundColor,
|
||||
body: Stack(
|
||||
children: [
|
||||
// Extended blue gradient panel behind calendar (matches reference)
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: Container(
|
||||
height: 260, // controls how much gradient shows behind calendar
|
||||
decoration: AppDecoration.blueGradient.copyWith(
|
||||
borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30)),
|
||||
boxShadow: [const BoxShadow(color: Colors.black12, blurRadius: 12, offset: Offset(0, 6))],
|
||||
),
|
||||
// leave child empty — title and bell are placed above
|
||||
child: const SizedBox.shrink(),
|
||||
),
|
||||
),
|
||||
|
||||
// TOP APP BAR (title centered + notification at top-right) - unchanged placement
|
||||
// TOP APP BAR stays fixed (title + bell icon)
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
@@ -637,15 +620,34 @@ class _CalendarScreenState extends State<CalendarScreen> {
|
||||
),
|
||||
),
|
||||
|
||||
// CONTENT: whole page scrolls as one — calendar + summary + events
|
||||
// CONTENT: gradient + calendar card scroll together as one unit
|
||||
CustomScrollView(
|
||||
physics: const BouncingScrollPhysics(),
|
||||
slivers: [
|
||||
// Space for app bar + gradient top
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 110)),
|
||||
|
||||
// Calendar card
|
||||
SliverToBoxAdapter(child: _calendarCard(context)),
|
||||
// Gradient + calendar card in one scrollable Stack
|
||||
// Gradient scrolls away with content; app bar remains fixed above
|
||||
SliverToBoxAdapter(
|
||||
child: Stack(
|
||||
children: [
|
||||
// Blue gradient banner — scrolls with content
|
||||
Container(
|
||||
height: 260,
|
||||
decoration: AppDecoration.blueGradient.copyWith(
|
||||
borderRadius: const BorderRadius.only(
|
||||
bottomLeft: Radius.circular(30),
|
||||
bottomRight: Radius.circular(30),
|
||||
),
|
||||
boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 12, offset: Offset(0, 6))],
|
||||
),
|
||||
),
|
||||
// Calendar card starts at y=110 (after app bar), overlapping gradient
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 110),
|
||||
child: _calendarCard(context),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Selected date summary
|
||||
SliverToBoxAdapter(child: _selectedDateSummary(context)),
|
||||
|
||||
Reference in New Issue
Block a user