add logo to login page

assets/logos/pg_logo_v2.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="120"
+   height="120"
+   viewBox="0 0 120 120"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       style="fill:#00b7fd;stroke-width:4.40315"
+       d="M 42.563242,0 H 92.5 A 27.5,27.5 45 0 1 120,27.5 27.5,27.5 135 0 1 92.5,55 h -50 A 2.5,2.5 45 0 1 40,52.5 v -10 A 2.5,2.5 135 0 1 42.5,40 h 50 A 12.5,12.5 135 0 0 105,27.5 12.5,12.5 45 0 0 92.5,15 l -50,0 A 27.5,27.5 135 0 0 15,42.5 v 50 A 2.5,2.5 135 0 1 12.5,95 H 2.5 A 2.5,2.5 45 0 1 0,92.5 V 42.563242 A 42.563242,42.563242 135 0 1 42.563242,0 Z"
+       id="path1"
+       transform="translate(0,12.5)" />
+    <path
+       style="fill:#999999;stroke-width:4.40315"
+       d="m 42.5,60 h 60 A 17.5,17.5 45 0 1 120,77.5 17.5,17.5 135 0 1 102.5,95 h -60 A 22.5,22.5 45 0 1 20,72.5 v -30 A 22.5,22.5 135 0 1 42.5,20 h 50 a 7.5,7.5 45 0 1 7.5,7.5 7.5,7.5 135 0 1 -7.5,7.5 h -50 A 7.5,7.5 135 0 0 35,42.5 v 30 a 7.5,7.5 45 0 0 7.5,7.5 h 60 A 2.5,2.5 135 0 0 105,77.5 2.5,2.5 45 0 0 102.5,75 h -60 A 2.5,2.5 45 0 1 40,72.5 v -10 A 2.5,2.5 135 0 1 42.5,60 Z"
+       id="path2"
+       transform="translate(0,12.5)" />
+  </g>
+</svg>

lib/components/login/login.dart

@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:go_router/go_router.dart';
 import 'package:mileograph_flutter/services/authservice.dart';
 import 'package:mileograph_flutter/components/pages/settings.dart';
@@ -41,17 +43,29 @@ class _LoginScreenState extends State<LoginScreen> {
       resizeToAvoidBottomInset: true,
       body: Container(
         color: Theme.of(context).scaffoldBackgroundColor,
+        child: SafeArea(
+          child: Column(
+            children: [
+              Expanded(
                 child: Center(
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
-              Text.rich(
+                      LayoutBuilder(
+                        builder: (context, constraints) {
+                          return SizedBox(
+                            width: constraints.maxWidth,
+                            child: FittedBox(
+                              fit: BoxFit.scaleDown,
+                              child: Text.rich(
                                 TextSpan(
                                   children: [
                                     TextSpan(
                                       text: "Mile",
                                       style: TextStyle(
-                        color: Theme.of(context).textTheme.bodyLarge?.color,
+                                        color: Theme.of(
+                                          context,
+                                        ).textTheme.bodyLarge?.color,
                                       ),
                                     ),
                                     const TextSpan(
@@ -61,7 +75,9 @@ class _LoginScreenState extends State<LoginScreen> {
                                     TextSpan(
                                       text: "graph",
                                       style: TextStyle(
-                        color: Theme.of(context).textTheme.bodyLarge?.color,
+                                        color: Theme.of(
+                                          context,
+                                        ).textTheme.bodyLarge?.color,
                                       ),
                                     ),
                                   ],
@@ -72,6 +88,12 @@ class _LoginScreenState extends State<LoginScreen> {
                                     fontSize: 50,
                                   ),
                                 ),
+                                softWrap: false,
+                                overflow: TextOverflow.visible,
+                              ),
+                            ),
+                          );
+                        },
                       ),
                       const SizedBox(height: 50),
                       const LoginPanel(),
@@ -110,10 +132,69 @@ class _LoginScreenState extends State<LoginScreen> {
                   ),
                 ),
               ),
+              const Padding(
+                padding: EdgeInsets.only(bottom: 12),
+                child: _LoginLogo(),
+              ),
+            ],
+          ),
+        ),
+      ),
     );
   }
 }
 
+class _LoginLogo extends StatefulWidget {
+  const _LoginLogo();
+
+  @override
+  State<_LoginLogo> createState() => _LoginLogoState();
+}
+
+class _LoginLogoState extends State<_LoginLogo> {
+  late final Future<String> _svgFuture;
+
+  @override
+  void initState() {
+    super.initState();
+    _svgFuture = rootBundle.loadString('assets/logos/pg_logo_v2.svg');
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final accent = Theme.of(context).colorScheme.primary;
+    final grey = const Color(0xFF999999);
+    return SizedBox(
+      height: 42,
+      child: Opacity(
+        opacity: 0.75,
+        child: FutureBuilder<String>(
+          future: _svgFuture,
+          builder: (context, snapshot) {
+            final svg = snapshot.data;
+            if (svg == null) {
+              return const SizedBox.shrink();
+            }
+            final tinted = svg
+                .replaceAll('#00b7fd', _colorToHex(accent))
+                .replaceAll('#999999', _colorToHex(grey));
+            return SvgPicture.string(
+              tinted,
+              fit: BoxFit.contain,
+              semanticsLabel: 'Mileograph logo',
+            );
+          },
+        ),
+      ),
+    );
+  }
+
+  String _colorToHex(Color color) {
+    final hex = color.value.toRadixString(16).padLeft(8, '0');
+    return '#${hex.substring(2)}';
+  }
+}
+
 class LoginPanel extends StatefulWidget {
   const LoginPanel({super.key});
 

pubspec.lock

@@ -262,6 +262,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.1.0"
+  flutter_svg:
+    dependency: "direct main"
+    description:
+      name: flutter_svg
+      sha256: "87fbd7c534435b6c5d9d98b01e1fd527812b82e68ddd8bd35fc45ed0fa8f0a95"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.3"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -400,6 +408,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.1"
+  path_parsing:
+    dependency: transitive
+    description:
+      name: path_parsing
+      sha256: "883402936929eac138ee0a45da5b0f2c80f89913e6dc3bf77eb65b84b409c6ca"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   path_provider:
     dependency: transitive
     description:
@@ -605,6 +621,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  vector_graphics:
+    dependency: transitive
+    description:
+      name: vector_graphics
+      sha256: a4f059dc26fc8295b5921376600a194c4ec7d55e72f2fe4c7d2831e103d461e6
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.19"
+  vector_graphics_codec:
+    dependency: transitive
+    description:
+      name: vector_graphics_codec
+      sha256: "99fd9fbd34d9f9a32efd7b6a6aae14125d8237b10403b422a6a6dfeac2806146"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.13"
+  vector_graphics_compiler:
+    dependency: transitive
+    description:
+      name: vector_graphics_compiler
+      sha256: d354a7ec6931e6047785f4db12a1f61ec3d43b207fc0790f863818543f8ff0dc
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.19"
   vector_math:
     dependency: transitive
     description:

pubspec.yaml

@@ -42,6 +42,7 @@ dependencies:
   file_selector_macos: ^0.9.4
   file_selector_windows: ^0.9.3
   file_selector_web: ^0.9.4
+  flutter_svg: ^2.0.10
 
   # The following adds the Cupertino Icons font to your application.
   # Use with the CupertinoIcons class for iOS style icons.
@@ -73,6 +74,8 @@ flutter:
     - family: Tomatoes
       fonts:
         - asset: lib/assets/fonts/Tomatoes-O8L8.ttf
+  assets:
+    - assets/logos/pg_logo_v2.svg
   # To add assets to your application, add an assets section, like this:
   # assets:
   #   - images/a_dot_burr.jpeg