tentatively shrink trip overview, nicer onboarding

frontend/lib/pages/base_page.dart

@@ -1,3 +1,4 @@
+import 'package:anyway/main.dart';
 import 'package:anyway/modules/help_dialog.dart';
 import 'package:anyway/pages/current_trip.dart';
 import 'package:anyway/pages/settings.dart';
@@ -38,7 +39,8 @@ class _BasePageState extends State<BasePage> {
 
   @override
   Widget build(BuildContext context) {
-    Future<List<Trip>> trips = loadTrips();
+    savedTrips.loadTrips();
+
 
     return Scaffold(
       appBar: AppBar(
@@ -98,11 +100,11 @@ class _BasePageState extends State<BasePage> {
             // through the options in the drawer if there isn't enough vertical
             // space to fit everything.
             Expanded(
-              child: TripsOverview(trips: trips),
+              child: TripsOverview(trips: savedTrips),
             ),
             ElevatedButton(
               onPressed: () async {
-                removeAllTripsFromPrefs();
+                savedTrips.clearTrips();
               },
               child: const Text('Clear trips'),
             ),

frontend/lib/pages/onboarding.dart

@@ -1,3 +1,6 @@
+import 'dart:ui';
+
+import 'package:anyway/constants.dart';
 import 'package:anyway/modules/onboarding_card.dart';
 import 'package:anyway/pages/new_trip_location.dart';
 import 'package:flutter/material.dart';
@@ -33,32 +36,51 @@ class OnboardingPage extends StatefulWidget {
 }
 
 class _OnboardingPageState extends State<OnboardingPage> {
+  final PageController _controller = PageController();
+
   @override
   Widget build(BuildContext context) {
-    final PageController _controller = PageController();
-
     return Scaffold(
       body: Stack(
         children: [
-          Container(
-            decoration: BoxDecoration(
-              gradient: LinearGradient(
-                colors: [Colors.red, Colors.blue],
-                begin: Alignment.topLeft,
-                end: Alignment.bottomRight,
-              ),
-            ),
-            child: PageView(
-              controller: _controller,
-              children: List.generate(
-                onboardingCards.length,
-                (index) {
-                  return Container(
-                    alignment: Alignment.center,
-                    child: onboardingCards[index],
-                  );
-                }
-              ),
+          AnimatedBuilder(
+            animation: _controller,
+            builder: (context, child) {
+              return Stack(
+                children: [
+                  Container(
+                    decoration: BoxDecoration(
+                      gradient: LinearGradient(
+                        begin: Alignment.topLeft,
+                        end: Alignment.bottomRight,
+                        colors: APP_GRADIENT.colors,
+                        stops: [
+                          (_controller.hasClients ? _controller.page ?? _controller.initialPage : _controller.initialPage) / onboardingCards.length,
+                          (_controller.hasClients ? _controller.page ?? _controller.initialPage + 1 : _controller.initialPage + 1) / onboardingCards.length,
+                        ],
+                      ),
+                    ),
+                  ),
+                  BackdropFilter(
+                    filter: ImageFilter.blur(sigmaX: 100, sigmaY: 100),
+                    child: Container(
+                      color: Colors.black.withOpacity(0),
+                    ),
+                  ),
+                ],
+              );
+            },
+          ),
+          PageView(
+            controller: _controller,
+            children: List.generate(
+              onboardingCards.length,
+              (index) {
+                return Container(
+                  alignment: Alignment.center,
+                  child: onboardingCards[index],
+                );
+              }
             ),
           ),
         ],
@@ -75,10 +97,10 @@ class _OnboardingPageState extends State<OnboardingPage> {
             _controller.nextPage(duration: Duration(milliseconds: 500), curve: Curves.ease);
           }
         },
-        label: ListenableBuilder(
-          listenable: _controller,
+        label: AnimatedBuilder(
+          animation: _controller,
           builder: (context, child) {
-            if (_controller.page == onboardingCards.length - 1) {
+            if ((_controller.page ?? _controller.initialPage) == onboardingCards.length - 1) {
               return Row(
                 children: [
                   const Text("Start planning!"),