Re-Quest/mobile-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement the home screen with new UI components and assets, and refine authentication screens and routing.

Browse Source
This commit is contained in:
pradeepkumar
2026-02-24 03:19:55 +05:30
parent 4f8ad7fe49
commit 0bc8852c17
31 changed files with 1540 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

433
lib/features/home/presentation/widgets/top_professionals_section.dart Normal file
View File

@@ -0,0 +1,433 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:real_estate_mobile/core/constants/app_colors.dart';
class TopProfessionalsSection extends StatelessWidget {
const TopProfessionalsSection({super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
children: [
const Text(
'"Meet top real estate professionals"',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 25,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(height: 24),
// Agents / Lenders Tab
_buildCategoryTab(),
const SizedBox(height: 24),
// Agent Card
_buildAgentCard(),
const SizedBox(height: 12),
// Progress indicator
_buildProgressIndicator(),
const SizedBox(height: 32),
// See All Agents CTA
_buildSeeAllAgentsCta(),
],
),
);
}
Widget _buildCategoryTab() {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(color: AppColors.primaryDark, width: 0.1),
),
child: Row(
children: [
// Active tab - Agents
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: AppColors.accentOrange,
borderRadius: BorderRadius.circular(15),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/icons/agents_tab_icon.svg',
width: 24,
height: 24,
placeholderBuilder: (_) => const Icon(
Icons.people,
color: Colors.white,
size: 24,
),
),
const SizedBox(width: 8),
const Text(
'Agents',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 17,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
],
),
),
),
// Inactive tab - Lenders
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/icons/lenders_tab_icon.svg',
width: 24,
height: 24,
placeholderBuilder: (_) => const Icon(
Icons.calendar_today,
color: AppColors.primaryDark,
size: 24,
),
),
const SizedBox(width: 8),
const Text(
'Lenders',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 17,
fontWeight: FontWeight.w600,
color: AppColors.primaryDark,
),
),
],
),
),
),
],
),
);
}
Widget _buildAgentCard() {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
border: Border.all(color: AppColors.primaryDark, width: 0.1),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Agent image
ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(15)),
child: Image.asset(
'assets/images/agent_profile_image.png',
width: double.infinity,
height: 192,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(
width: double.infinity,
height: 192,
color: AppColors.gradientStart,
child: const Icon(Icons.person, size: 60, color: AppColors.primaryDark),
),
),
),
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Name and badges row
Row(
children: [
const Text(
'Arjun Mehta',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(width: 8),
SvgPicture.asset(
'assets/icons/verified_badge_icon.svg',
width: 16,
height: 16,
placeholderBuilder: (_) => const Icon(
Icons.verified,
color: Colors.blue,
size: 16,
),
),
const Spacer(),
SvgPicture.asset(
'assets/icons/star_rating_icon.svg',
width: 16,
height: 16,
placeholderBuilder: (_) => const Icon(
Icons.star,
color: AppColors.accentOrange,
size: 16,
),
),
const SizedBox(width: 4),
const Text(
'4.9 Rating',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
),
const SizedBox(height: 4),
// Verified and Location
const Text(
'"Verified local agent"',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF638559),
),
),
const SizedBox(height: 8),
// Location
Row(
children: [
const Text(
'Location:',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(width: 4),
SvgPicture.asset(
'assets/icons/location_pin_icon.svg',
width: 14,
height: 14,
placeholderBuilder: (_) => const Icon(
Icons.location_on,
color: AppColors.accentOrange,
size: 14,
),
),
const SizedBox(width: 4),
const Text(
'San Francisco, CA',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
),
const SizedBox(height: 8),
// Expertise
Row(
children: [
const Text(
'Expertise:',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(width: 8),
const Text(
'(Residential Property Expert)',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
),
const SizedBox(height: 12),
// Tags
Wrap(
spacing: 8,
runSpacing: 8,
children: [
_buildTag('Residential'),
_buildTag('Rental'),
_buildTag('Commercial'),
_buildTag('Inspection'),
_buildTag('Land'),
_buildTag('Rental'),
],
),
const SizedBox(height: 12),
// Experience
RichText(
text: const TextSpan(
children: [
TextSpan(
text: 'Experience: ',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
TextSpan(
text: '10+ years in the real estate industry.',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
),
),
],
),
),
],
),
);
}
Widget _buildTag(String label) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(color: AppColors.primaryDark, width: 0.7),
),
child: Text(
label,
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 13,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
);
}
Widget _buildProgressIndicator() {
return Stack(
children: [
Container(
height: 5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
border: Border.all(color: AppColors.primaryDark, width: 0.1),
),
),
Container(
height: 5,
width: 103,
decoration: BoxDecoration(
color: AppColors.primaryDark,
borderRadius: BorderRadius.circular(15),
),
),
],
);
}
Widget _buildSeeAllAgentsCta() {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [AppColors.gradientStart, AppColors.gradientEnd],
),
borderRadius: BorderRadius.circular(15),
border: Border.all(color: AppColors.primaryDark, width: 0.2),
boxShadow: const [
BoxShadow(
color: Color(0xFFD9D9D9),
offset: Offset(10, 0),
blurRadius: 20,
),
],
),
child: Column(
children: [
Image.asset(
'assets/icons/network_icon.svg',
width: 30,
height: 23,
errorBuilder: (_, __, ___) => const Icon(
Icons.hub,
color: AppColors.primaryDark,
size: 30,
),
),
const SizedBox(height: 12),
const Text(
'Discover 5,000+ Top Real Estate Agents in Our Network',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
const SizedBox(height: 16),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: AppColors.primaryDark,
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 14),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
child: const Text(
'See All Agents',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 16,
fontWeight: FontWeight.w700,
),
),
),
),
],
),
);
}
}