feat(login): � Refote visuelle du login - Fond paper2 et image river_logo_desktop positionnée à 1/4 de la largeur restante - ✨ Séparation desktop/mobile
This commit is contained in:
Julien Martin
parent
9519fafe3a
commit
f4c211e0dd
@ -1,155 +1,139 @@
|
|||||||
|
import 'dart:async';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:go_router/go_router.dart';
|
import 'package:google_fonts/google_fonts.dart';
|
||||||
import '../../services/auth_service.dart';
|
import 'package:flutter/foundation.dart' show kIsWeb;
|
||||||
import '../../theme/theme_provider.dart';
|
|
||||||
import '../../theme/app_theme.dart';
|
|
||||||
import 'package:provider/provider.dart';
|
|
||||||
|
|
||||||
class LoginScreen extends StatefulWidget {
|
class LoginPage extends StatelessWidget {
|
||||||
const LoginScreen({super.key});
|
const LoginPage({super.key});
|
||||||
|
|
||||||
@override
|
|
||||||
State<LoginScreen> createState() => _LoginScreenState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class _LoginScreenState extends State<LoginScreen> {
|
|
||||||
final _formKey = GlobalKey<FormState>();
|
|
||||||
final _emailController = TextEditingController();
|
|
||||||
final _passwordController = TextEditingController();
|
|
||||||
bool _isLoading = false;
|
|
||||||
|
|
||||||
String _getThemeName(ThemeType type) {
|
|
||||||
switch (type) {
|
|
||||||
case ThemeType.defaultTheme:
|
|
||||||
return "P'titsPas";
|
|
||||||
case ThemeType.pastelTheme:
|
|
||||||
return "Pastel";
|
|
||||||
case ThemeType.darkTheme:
|
|
||||||
return "Sombre";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
void dispose() {
|
|
||||||
_emailController.dispose();
|
|
||||||
_passwordController.dispose();
|
|
||||||
super.dispose();
|
|
||||||
}
|
|
||||||
|
|
||||||
Future<void> _login() async {
|
|
||||||
if (_formKey.currentState!.validate()) {
|
|
||||||
setState(() => _isLoading = true);
|
|
||||||
try {
|
|
||||||
await AuthService.login(
|
|
||||||
_emailController.text,
|
|
||||||
_passwordController.text,
|
|
||||||
);
|
|
||||||
|
|
||||||
if (mounted) {
|
|
||||||
context.go('/home');
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
if (mounted) {
|
|
||||||
ScaffoldMessenger.of(context).showSnackBar(
|
|
||||||
SnackBar(
|
|
||||||
content: Text('Erreur lors de la connexion: $e'),
|
|
||||||
backgroundColor: Colors.red,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
if (mounted) {
|
|
||||||
setState(() => _isLoading = false);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
appBar: AppBar(
|
backgroundColor: Colors.transparent,
|
||||||
title: const Text('Connexion'),
|
body: LayoutBuilder(
|
||||||
actions: [
|
builder: (context, constraints) {
|
||||||
Consumer<ThemeProvider>(
|
// Version desktop (web)
|
||||||
builder: (context, themeProvider, child) {
|
if (kIsWeb) {
|
||||||
return Padding(
|
final w = constraints.maxWidth;
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
final h = constraints.maxHeight;
|
||||||
child: DropdownButton<ThemeType>(
|
|
||||||
value: themeProvider.currentTheme,
|
return FutureBuilder(
|
||||||
items: ThemeType.values.map((ThemeType type) {
|
future: _getImageDimensions(),
|
||||||
return DropdownMenuItem<ThemeType>(
|
builder: (context, snapshot) {
|
||||||
value: type,
|
if (!snapshot.hasData) {
|
||||||
child: Text(_getThemeName(type)),
|
return const Center(child: CircularProgressIndicator());
|
||||||
);
|
}
|
||||||
}).toList(),
|
|
||||||
onChanged: (ThemeType? newValue) {
|
final imageDimensions = snapshot.data!;
|
||||||
if (newValue != null) {
|
final imageHeight = h;
|
||||||
themeProvider.setTheme(newValue);
|
final imageWidth = imageHeight * (imageDimensions.width / imageDimensions.height);
|
||||||
}
|
final remainingWidth = w - imageWidth;
|
||||||
},
|
final leftMargin = remainingWidth / 4;
|
||||||
),
|
|
||||||
);
|
return Stack(
|
||||||
},
|
children: [
|
||||||
),
|
// Fond en papier
|
||||||
],
|
Positioned.fill(
|
||||||
|
child: Image.asset(
|
||||||
|
'assets/images/paper2.png',
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
repeat: ImageRepeat.repeat,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// Image principale
|
||||||
|
Positioned(
|
||||||
|
left: leftMargin,
|
||||||
|
top: 0,
|
||||||
|
height: imageHeight,
|
||||||
|
width: imageWidth,
|
||||||
|
child: Image.asset(
|
||||||
|
'assets/images/river_logo_desktop.png',
|
||||||
|
fit: BoxFit.contain,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// Contenu
|
||||||
|
const Center(
|
||||||
|
child: Text('Formulaire de connexion à implémenter'),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Version mobile (à implémenter)
|
||||||
|
return const Center(
|
||||||
|
child: Text('Version mobile à implémenter'),
|
||||||
|
);
|
||||||
|
},
|
||||||
),
|
),
|
||||||
body: Center(
|
);
|
||||||
child: SingleChildScrollView(
|
}
|
||||||
padding: const EdgeInsets.all(16.0),
|
|
||||||
child: Form(
|
Future<ImageDimensions> _getImageDimensions() async {
|
||||||
key: _formKey,
|
final image = Image.asset('assets/images/river_logo_desktop.png');
|
||||||
child: Column(
|
final completer = Completer<ImageDimensions>();
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
image.image.resolve(const ImageConfiguration()).addListener(
|
||||||
children: [
|
ImageStreamListener((info, _) {
|
||||||
TextFormField(
|
completer.complete(ImageDimensions(
|
||||||
controller: _emailController,
|
width: info.image.width.toDouble(),
|
||||||
decoration: const InputDecoration(
|
height: info.image.height.toDouble(),
|
||||||
labelText: 'Email',
|
));
|
||||||
border: OutlineInputBorder(),
|
}),
|
||||||
),
|
);
|
||||||
keyboardType: TextInputType.emailAddress,
|
return completer.future;
|
||||||
validator: (value) {
|
}
|
||||||
if (value == null || value.isEmpty) {
|
}
|
||||||
return 'Veuillez entrer votre email';
|
|
||||||
}
|
class ImageDimensions {
|
||||||
if (!value.contains('@')) {
|
final double width;
|
||||||
return 'Veuillez entrer un email valide';
|
final double height;
|
||||||
}
|
|
||||||
return null;
|
ImageDimensions({required this.width, required this.height});
|
||||||
},
|
}
|
||||||
),
|
|
||||||
const SizedBox(height: 16),
|
// ───────────────────────────────────────────────────────────────
|
||||||
TextFormField(
|
// Champ texte avec fond image
|
||||||
controller: _passwordController,
|
// ───────────────────────────────────────────────────────────────
|
||||||
decoration: const InputDecoration(
|
class _ImageTextField extends StatelessWidget {
|
||||||
labelText: 'Mot de passe',
|
final String bg;
|
||||||
border: OutlineInputBorder(),
|
final double width;
|
||||||
),
|
final double height;
|
||||||
obscureText: true,
|
final String hint;
|
||||||
validator: (value) {
|
final bool obscure;
|
||||||
if (value == null || value.isEmpty) {
|
const _ImageTextField({
|
||||||
return 'Veuillez entrer votre mot de passe';
|
required this.bg,
|
||||||
}
|
required this.width,
|
||||||
return null;
|
required this.height,
|
||||||
},
|
required this.hint,
|
||||||
),
|
this.obscure = false,
|
||||||
const SizedBox(height: 24),
|
});
|
||||||
ElevatedButton(
|
|
||||||
onPressed: _isLoading ? null : _login,
|
@override
|
||||||
child: _isLoading
|
Widget build(BuildContext context) {
|
||||||
? const CircularProgressIndicator()
|
return SizedBox(
|
||||||
: const Text('Se connecter'),
|
width: width,
|
||||||
),
|
height: height,
|
||||||
const SizedBox(height: 16),
|
child: Stack(
|
||||||
TextButton(
|
children: [
|
||||||
onPressed: () => context.go('/parent-register'),
|
Positioned.fill(child: Image.asset(bg, fit: BoxFit.fill)),
|
||||||
child: const Text('Créer un compte parent'),
|
TextField(
|
||||||
),
|
obscureText: obscure,
|
||||||
],
|
style: GoogleFonts.merienda(fontSize: width * 0.045),
|
||||||
|
decoration: InputDecoration(
|
||||||
|
border: InputBorder.none,
|
||||||
|
hintText: hint,
|
||||||
|
hintStyle: GoogleFonts.merienda(
|
||||||
|
fontSize: width * 0.045,
|
||||||
|
color: Colors.black54,
|
||||||
|
),
|
||||||
|
contentPadding: EdgeInsets.symmetric(
|
||||||
|
horizontal: width * 0.07, // 7 % latéral
|
||||||
|
vertical: height * 0.22, // 22 % vertical
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,43 +1,36 @@
|
|||||||
name: petitspas
|
name: p_tits_pas
|
||||||
description: Application de gestion de la garde d'enfants pour les collectivités locales.
|
description: Application de gestion de la garde d'enfants pour les collectivités locales.
|
||||||
publish_to: 'none'
|
publish_to: 'none'
|
||||||
version: 1.0.0+1
|
version: 0.1.0
|
||||||
|
|
||||||
environment:
|
environment:
|
||||||
sdk: '>=3.0.0 <4.0.0'
|
sdk: '>=3.2.6 <4.0.0'
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
flutter:
|
flutter:
|
||||||
sdk: flutter
|
sdk: flutter
|
||||||
cupertino_icons: ^1.0.2
|
provider: ^6.1.1
|
||||||
# Gestion d'état
|
go_router: ^13.2.5
|
||||||
provider: ^6.1.4
|
google_fonts: ^6.1.0
|
||||||
# Navigation
|
shared_preferences: ^2.2.2
|
||||||
go_router: ^13.0.0
|
image_picker: ^1.0.7
|
||||||
# API
|
js: ^0.6.7
|
||||||
dio: ^5.0.0
|
|
||||||
# Local storage
|
|
||||||
shared_preferences: ^2.2.0
|
|
||||||
# UI
|
|
||||||
flutter_svg: ^2.0.0
|
|
||||||
google_fonts: ^6.2.1
|
|
||||||
# Formulaires
|
|
||||||
form_validator: ^2.1.1
|
|
||||||
# Dates
|
|
||||||
intl: ^0.18.0
|
|
||||||
# Images
|
|
||||||
image_picker: ^1.0.0
|
|
||||||
# PDF
|
|
||||||
pdf: ^3.10.0
|
|
||||||
printing: ^5.11.0
|
|
||||||
|
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
sdk: flutter
|
sdk: flutter
|
||||||
flutter_lints: ^2.0.0
|
flutter_lints: ^2.0.0
|
||||||
build_runner: ^2.4.0
|
|
||||||
|
|
||||||
flutter:
|
flutter:
|
||||||
uses-material-design: true
|
uses-material-design: true
|
||||||
|
|
||||||
assets:
|
assets:
|
||||||
- assets/images/
|
- assets/images/logo.png
|
||||||
|
- assets/images/river_logo_desktop.png
|
||||||
|
- assets/images/paper2.png
|
||||||
|
|
||||||
|
fonts:
|
||||||
|
- family: Merienda
|
||||||
|
fonts:
|
||||||
|
- asset: assets/fonts/Merienda-VariableFont_wght.ttf
|
||||||
|
style: normal
|
||||||
Loading…
x
Reference in New Issue
Block a user