140 lines
4.5 KiB
Dart
140 lines
4.5 KiB
Dart
import 'dart:async';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:flutter/foundation.dart' show kIsWeb;
|
|
|
|
class LoginPage extends StatelessWidget {
|
|
const LoginPage({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.transparent,
|
|
body: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
// Version desktop (web)
|
|
if (kIsWeb) {
|
|
final w = constraints.maxWidth;
|
|
final h = constraints.maxHeight;
|
|
|
|
return FutureBuilder(
|
|
future: _getImageDimensions(),
|
|
builder: (context, snapshot) {
|
|
if (!snapshot.hasData) {
|
|
return const Center(child: CircularProgressIndicator());
|
|
}
|
|
|
|
final imageDimensions = snapshot.data!;
|
|
final imageHeight = h;
|
|
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'),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
|
|
Future<ImageDimensions> _getImageDimensions() async {
|
|
final image = Image.asset('assets/images/river_logo_desktop.png');
|
|
final completer = Completer<ImageDimensions>();
|
|
image.image.resolve(const ImageConfiguration()).addListener(
|
|
ImageStreamListener((info, _) {
|
|
completer.complete(ImageDimensions(
|
|
width: info.image.width.toDouble(),
|
|
height: info.image.height.toDouble(),
|
|
));
|
|
}),
|
|
);
|
|
return completer.future;
|
|
}
|
|
}
|
|
|
|
class ImageDimensions {
|
|
final double width;
|
|
final double height;
|
|
|
|
ImageDimensions({required this.width, required this.height});
|
|
}
|
|
|
|
// ───────────────────────────────────────────────────────────────
|
|
// Champ texte avec fond image
|
|
// ───────────────────────────────────────────────────────────────
|
|
class _ImageTextField extends StatelessWidget {
|
|
final String bg;
|
|
final double width;
|
|
final double height;
|
|
final String hint;
|
|
final bool obscure;
|
|
const _ImageTextField({
|
|
required this.bg,
|
|
required this.width,
|
|
required this.height,
|
|
required this.hint,
|
|
this.obscure = false,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
width: width,
|
|
height: height,
|
|
child: Stack(
|
|
children: [
|
|
Positioned.fill(child: Image.asset(bg, fit: BoxFit.fill)),
|
|
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
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
} |