first commit
This commit is contained in:
Anbarasu
443
lib/view/authentication/login_view.dart
Normal file
443
lib/view/authentication/login_view.dart
Normal file
@@ -0,0 +1,443 @@
|
||||
import 'package:flutter/gestures.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:get/get.dart';
|
||||
import 'package:webview_flutter/webview_flutter.dart';
|
||||
import '../../controllers/authentication/auth_controller.dart';
|
||||
import '../authentication/verification_view.dart';
|
||||
|
||||
class Login_view extends StatelessWidget {
|
||||
Login_view({super.key});
|
||||
|
||||
final TextEditingController phoneController = TextEditingController();
|
||||
// Fix: RxString mirrors the field so Obx rebuilds on every keystroke/clear
|
||||
final RxString phoneValue = ''.obs;
|
||||
final RxBool isAgreed = false.obs;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Size screenSize = MediaQuery.of(context).size;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.white,
|
||||
body: Stack(
|
||||
children: [
|
||||
// Top curved purple background
|
||||
Positioned(
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
child: CustomPaint(
|
||||
size: Size(screenSize.width, screenSize.height * 0.52),
|
||||
painter: _TopCurvePainter(),
|
||||
),
|
||||
),
|
||||
|
||||
// Decorative circles
|
||||
Positioned(
|
||||
top: screenSize.height * 0.04,
|
||||
right: -30,
|
||||
child: Container(
|
||||
width: 120,
|
||||
height: 120,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Colors.white.withOpacity(0.06),
|
||||
),
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
top: screenSize.height * 0.10,
|
||||
left: -20,
|
||||
child: Container(
|
||||
width: 80,
|
||||
height: 80,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Colors.white.withOpacity(0.06),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
SafeArea(
|
||||
child: SingleChildScrollView(
|
||||
physics: const ClampingScrollPhysics(),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Header area
|
||||
Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: screenSize.width * 0.06,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(height: screenSize.height * 0.03),
|
||||
// Logo / brand chip
|
||||
SizedBox(height: screenSize.height * 0.02),
|
||||
const Text(
|
||||
"Groceries & More,\nDelivered in Minutes!",
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w800,
|
||||
fontSize: 26,
|
||||
height: 1.25,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
),
|
||||
SizedBox(height: screenSize.height * 0.008),
|
||||
const Text(
|
||||
"Sign in to enjoy lightning-fast delivery!",
|
||||
style: TextStyle(
|
||||
color: Colors.white70,
|
||||
fontSize: 14,
|
||||
height: 1.4,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Image — right-aligned, overlapping curve
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Image.asset(
|
||||
"assets/images/loginImage.png",
|
||||
height: screenSize.height * 0.30,
|
||||
fit: BoxFit.contain,
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// White card form area
|
||||
Container(
|
||||
margin: EdgeInsets.symmetric(
|
||||
horizontal: screenSize.width * 0.05),
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: screenSize.width * 0.05,
|
||||
vertical: screenSize.height * 0.03,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(24),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: const Color(0xFF662582).withOpacity(0.08),
|
||||
blurRadius: 30,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text(
|
||||
"Login or Signup",
|
||||
style: TextStyle(
|
||||
color: Color(0xFF1A1A2E),
|
||||
fontWeight: FontWeight.w800,
|
||||
fontSize: 20,
|
||||
letterSpacing: -0.3,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
const Text(
|
||||
"Enter your mobile number to continue",
|
||||
style: TextStyle(
|
||||
color: Color(0xFF9CA3AF),
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
SizedBox(height: screenSize.height * 0.025),
|
||||
|
||||
// Phone input
|
||||
TextFormField(
|
||||
controller: phoneController,
|
||||
maxLength: 10,
|
||||
onChanged: (value) {
|
||||
phoneValue.value = value; // Fix: keep Rx in sync
|
||||
if (value.length == 10) {
|
||||
FocusScope.of(context).unfocus();
|
||||
}
|
||||
},
|
||||
decoration: InputDecoration(
|
||||
labelText: "Mobile Number",
|
||||
hintText: "Enter 10-digit number",
|
||||
counterText: "",
|
||||
labelStyle: const TextStyle(
|
||||
color: Color(0xFF662582), fontSize: 13),
|
||||
hintStyle:
|
||||
const TextStyle(color: Color(0xFFD1D5DB)),
|
||||
prefixIcon: Container(
|
||||
width: screenSize.width * 0.2,
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Text(
|
||||
"+91",
|
||||
style: TextStyle(
|
||||
color: Color(0xFF662582),
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 15,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Container(
|
||||
width: 1,
|
||||
height: 20,
|
||||
color: const Color(0xFFE5E7EB),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// filled: true,
|
||||
// fillColor: const Color(0xFFF9F5FF),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(
|
||||
color: Color(0xFFE9D5FF), width: 1.2),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(
|
||||
color: Color(0xFFE9D5FF), width: 1.2),
|
||||
),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: const BorderSide(
|
||||
color: Color(0xFF662582), width: 1.8),
|
||||
),
|
||||
),
|
||||
style: const TextStyle(
|
||||
color: Color(0xFF1A1A2E),
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 16,
|
||||
letterSpacing: 1,
|
||||
),
|
||||
cursorColor: const Color(0xFF662582),
|
||||
keyboardType: TextInputType.phone,
|
||||
),
|
||||
|
||||
SizedBox(height: screenSize.height * 0.02),
|
||||
|
||||
// Agree checkbox row
|
||||
Obx(() => GestureDetector(
|
||||
onTap: () => isAgreed.value = !isAgreed.value,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
AnimatedContainer(
|
||||
duration:
|
||||
const Duration(milliseconds: 200),
|
||||
width: 20,
|
||||
height: 20,
|
||||
decoration: BoxDecoration(
|
||||
color: isAgreed.value
|
||||
? const Color(0xFF662582)
|
||||
: Colors.white,
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
border: Border.all(
|
||||
color: isAgreed.value
|
||||
? const Color(0xFF662582)
|
||||
: const Color(0xFFD1D5DB),
|
||||
width: 1.5,
|
||||
),
|
||||
),
|
||||
child: isAgreed.value
|
||||
? const Icon(Icons.check,
|
||||
size: 13, color: Colors.white)
|
||||
: null,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: RichText(
|
||||
text: TextSpan(
|
||||
style: const TextStyle(
|
||||
color: Color(0xFF6B7280),
|
||||
fontSize: 12.5,
|
||||
),
|
||||
children: [
|
||||
const TextSpan(
|
||||
text: "I agree to the "),
|
||||
TextSpan(
|
||||
text: "Terms & Privacy Policy",
|
||||
style: const TextStyle(
|
||||
color: Color(0xFF662582),
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
recognizer:
|
||||
TapGestureRecognizer()
|
||||
..onTap = () {
|
||||
Get.to(() => WebViewScreen(
|
||||
url:
|
||||
"https://nearle.in/privacy",
|
||||
title:
|
||||
"Terms & Privacy Policy",
|
||||
));
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
)),
|
||||
|
||||
SizedBox(height: screenSize.height * 0.025),
|
||||
|
||||
// Continue button
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 52,
|
||||
child: Obx(() {
|
||||
final authController =
|
||||
Get.find<AuthController>();
|
||||
final phone = phoneValue.value.trim(); // Fix: reactive read
|
||||
|
||||
bool isValidMobile(String phone) {
|
||||
return RegExp(r'^[6-9]\d{9}$').hasMatch(phone);
|
||||
}
|
||||
|
||||
final bool isPhoneValid = isValidMobile(phone);
|
||||
final bool canProceed = isPhoneValid &&
|
||||
isAgreed.value &&
|
||||
!authController.isLoading.value;
|
||||
|
||||
return ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: const Color(0xFF662582),
|
||||
foregroundColor: Colors.white,
|
||||
disabledBackgroundColor:
|
||||
const Color(0xFFD8B4FE),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
elevation: 0,
|
||||
),
|
||||
onPressed: canProceed
|
||||
? () =>
|
||||
authController.signIn(context, phone)
|
||||
: null,
|
||||
child: authController.isLoading.value
|
||||
? const SizedBox(
|
||||
width: 22,
|
||||
height: 22,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
valueColor:
|
||||
AlwaysStoppedAnimation<Color>(
|
||||
Colors.white),
|
||||
),
|
||||
)
|
||||
: const Row(
|
||||
mainAxisAlignment:
|
||||
MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
"Continue",
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
letterSpacing: 0.3,
|
||||
),
|
||||
),
|
||||
SizedBox(width: 8),
|
||||
Icon(Icons.arrow_forward_rounded,
|
||||
size: 18),
|
||||
],
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
SizedBox(height: screenSize.height * 0.04),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Custom painter for top curved purple background ──────────────────────────
|
||||
class _TopCurvePainter extends CustomPainter {
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
final paint = Paint()
|
||||
..shader = const LinearGradient(
|
||||
colors: [Color(0xFF8B2FC9), Color(0xFF662582)],
|
||||
begin: Alignment.topRight,
|
||||
end: Alignment.bottomLeft,
|
||||
).createShader(Rect.fromLTWH(0, 0, size.width, size.height));
|
||||
|
||||
final path = Path();
|
||||
path.lineTo(0, size.height * 0.85);
|
||||
path.quadraticBezierTo(
|
||||
size.width * 0.25,
|
||||
size.height * 1.0,
|
||||
size.width * 0.5,
|
||||
size.height * 0.92,
|
||||
);
|
||||
path.quadraticBezierTo(
|
||||
size.width * 0.75,
|
||||
size.height * 0.84,
|
||||
size.width,
|
||||
size.height * 0.94,
|
||||
);
|
||||
path.lineTo(size.width, 0);
|
||||
path.close();
|
||||
canvas.drawPath(path, paint);
|
||||
}
|
||||
|
||||
@override
|
||||
bool shouldRepaint(_TopCurvePainter oldDelegate) => false;
|
||||
}
|
||||
|
||||
// ── WebView screen (unchanged) ────────────────────────────────────────────────
|
||||
class WebViewScreen extends StatefulWidget {
|
||||
final String url;
|
||||
final String title;
|
||||
|
||||
const WebViewScreen({
|
||||
super.key,
|
||||
required this.url,
|
||||
required this.title,
|
||||
});
|
||||
|
||||
@override
|
||||
State<WebViewScreen> createState() => _WebViewScreenState();
|
||||
}
|
||||
|
||||
class _WebViewScreenState extends State<WebViewScreen> {
|
||||
late final WebViewController controller;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
controller = WebViewController()
|
||||
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
||||
..loadRequest(Uri.parse(widget.url));
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(widget.title),
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: Colors.black,
|
||||
),
|
||||
body: WebViewWidget(controller: controller),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user