- auth_layout: gradient header (mobile) / split panel (desktop) - background_auth: gradient blue with network logo, tagline and feature list - custom_title: network logo replacing local asset - login_view: consistent UI matching phone_login_view (inputs, buttons, links to register/phone login, brand colors) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
91 lines
2.6 KiB
Dart
91 lines
2.6 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:prosapp_web_app/ui/layouts/auth/widgets/background_auth.dart';
|
|
|
|
class AuthLayout extends StatelessWidget {
|
|
final Widget child;
|
|
const AuthLayout({super.key, required this.child});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final size = MediaQuery.of(context).size;
|
|
return Scaffold(
|
|
body: size.width > 900
|
|
? _DesktopBody(child: child)
|
|
: _MobileBody(child: child),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _MobileBody extends StatelessWidget {
|
|
final Widget child;
|
|
const _MobileBody({required this.child});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
children: [
|
|
// Gradient header with logo
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(vertical: 36),
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [Color(0xFF42A4EF), Color(0xFF1565C0)],
|
|
),
|
|
borderRadius: BorderRadius.only(
|
|
bottomLeft: Radius.circular(32),
|
|
bottomRight: Radius.circular(32),
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Image.network(
|
|
'https://prosapp.co/img/logo_prosapp.png',
|
|
height: 52,
|
|
color: Colors.white,
|
|
colorBlendMode: BlendMode.srcATop,
|
|
errorBuilder: (_, __, ___) => const Text(
|
|
'ProsApp',
|
|
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, color: Colors.white),
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
const Text(
|
|
'Conecta con los mejores profesionales',
|
|
style: TextStyle(color: Colors.white70, fontSize: 13),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Expanded(child: SingleChildScrollView(child: child)),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _DesktopBody extends StatelessWidget {
|
|
final Widget child;
|
|
const _DesktopBody({required this.child});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final size = MediaQuery.of(context).size;
|
|
return Row(
|
|
children: [
|
|
// Left gradient panel
|
|
const SizedBox(width: 420, child: BackgroundAuth()),
|
|
// Right form panel
|
|
Expanded(
|
|
child: Container(
|
|
height: size.height,
|
|
color: Colors.white,
|
|
child: Center(child: child),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|