petegregoryy/mileograph_flutter
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 55 Wiki Activity

add logo to login page

Browse Source
This commit is contained in:
petegregoryy
2026-01-23 18:04:40 +00:00
parent f3fcf07b05
commit a527ecdb17
4 changed files with 208 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
lib/components/login/login.dart
View File

@@ -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,71 +43,99 @@ class _LoginScreenState extends State<LoginScreen> {
resizeToAvoidBottomInset: true,
body: Container(
color: Theme.of(context).scaffoldBackgroundColor,
child: Center(
child: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text.rich(
TextSpan(
children: [
TextSpan(
text: "Mile",
style: TextStyle(
color: Theme.of(context).textTheme.bodyLarge?.color,
Expanded(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
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,
),
),
const TextSpan(
text: "O",
style: TextStyle(color: Colors.red),
),
TextSpan(
text: "graph",
style: TextStyle(
color: Theme.of(
context,
).textTheme.bodyLarge?.color,
),
),
],
style: const TextStyle(
decoration: TextDecoration.none,
color: Colors.white,
fontFamily: "Tomatoes",
fontSize: 50,
),
),
softWrap: false,
overflow: TextOverflow.visible,
),
),
);
},
),
),
const TextSpan(
text: "O",
style: TextStyle(color: Colors.red),
),
TextSpan(
text: "graph",
style: TextStyle(
color: Theme.of(context).textTheme.bodyLarge?.color,
const SizedBox(height: 50),
const LoginPanel(),
const SizedBox(height: 16),
IconButton(
icon: const Icon(Icons.settings, color: Colors.grey),
tooltip: 'Settings',
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
fullscreenDialog: true,
builder: (_) => const SettingsPage(),
),
);
},
),
),
],
style: const TextStyle(
decoration: TextDecoration.none,
color: Colors.white,
fontFamily: "Tomatoes",
fontSize: 50,
if (_checkingSession) ...[
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 24,
width: 24,
child: CircularProgressIndicator(strokeWidth: 2),
),
const SizedBox(width: 8),
Text(
'Trying to log in',
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
],
],
),
),
),
const SizedBox(height: 50),
const LoginPanel(),
const SizedBox(height: 16),
IconButton(
icon: const Icon(Icons.settings, color: Colors.grey),
tooltip: 'Settings',
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
fullscreenDialog: true,
builder: (_) => const SettingsPage(),
),
);
},
const Padding(
padding: EdgeInsets.only(bottom: 12),
child: _LoginLogo(),
),
if (_checkingSession) ...[
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 24,
width: 24,
child: CircularProgressIndicator(strokeWidth: 2),
),
const SizedBox(width: 8),
Text(
'Trying to log in',
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
],
],
),
),
@@ -114,6 +144,57 @@ class _LoginScreenState extends State<LoginScreen> {
}
}
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});