fix: make profile card identical to web version
- Replace banner gradient with pink→sky→cyan→blue matching web visual - Restore edit pencil button (revert Follow toggle) - Remove bio/title text (web has none) - Fix stat values to 1.2K/45/3.4K matching web - Remove rainbow bar from card bottom - Update social icons and exp label styling - Clean up unused state variables Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -52,13 +52,11 @@ class _ProfileScreenState extends State<ProfileScreen>
|
|||||||
int _animatedLikes = 0;
|
int _animatedLikes = 0;
|
||||||
int _animatedPosts = 0;
|
int _animatedPosts = 0;
|
||||||
int _animatedViews = 0;
|
int _animatedViews = 0;
|
||||||
bool _isFollowing = false;
|
|
||||||
String _title = 'Product Designer who focuses on simplicity & usability.';
|
|
||||||
|
|
||||||
// Target stat values
|
// Target stat values (matching web: 1.2K, 45, 3.4K)
|
||||||
static const int _targetLikes = 72900;
|
static const int _targetLikes = 1200;
|
||||||
static const int _targetPosts = 828;
|
static const int _targetPosts = 45;
|
||||||
static const int _targetViews = 342900;
|
static const int _targetViews = 3400;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
@@ -654,49 +652,31 @@ class _ProfileScreenState extends State<ProfileScreen>
|
|||||||
borderRadius: BorderRadius.circular(16),
|
borderRadius: BorderRadius.circular(16),
|
||||||
gradient: const LinearGradient(
|
gradient: const LinearGradient(
|
||||||
colors: [
|
colors: [
|
||||||
Color(0x991E40B1), // rgba(30,64,175,0.6)
|
Color(0xFFE879A8), // rose/pink tint (page bg bleed)
|
||||||
Color(0x3394A3B8), // rgba(148,163,184,0.2)
|
Color(0xFF7DD3FC), // sky-300
|
||||||
|
Color(0xFF67E8F9), // cyan-300
|
||||||
|
Color(0xFF0284C7), // sky-600
|
||||||
],
|
],
|
||||||
|
stops: [0.0, 0.35, 0.6, 1.0],
|
||||||
begin: Alignment.topLeft,
|
begin: Alignment.topLeft,
|
||||||
end: Alignment.bottomRight,
|
end: Alignment.bottomRight,
|
||||||
),
|
),
|
||||||
image: const DecorationImage(
|
|
||||||
image: AssetImage('assets/images/gradient_dark_blue.png'),
|
|
||||||
fit: BoxFit.cover,
|
|
||||||
opacity: 0.5,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
// Edit pencil button (top-right, matching web)
|
||||||
// Follow / Following toggle button (top-right)
|
|
||||||
Positioned(
|
Positioned(
|
||||||
top: 8,
|
top: 16,
|
||||||
right: 8,
|
right: 16,
|
||||||
child: GestureDetector(
|
child: GestureDetector(
|
||||||
onTap: () => setState(() => _isFollowing = !_isFollowing),
|
onTap: () => _openEditDialog(),
|
||||||
child: AnimatedContainer(
|
child: Container(
|
||||||
duration: const Duration(milliseconds: 200),
|
width: 36,
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
height: 36,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: _isFollowing ? Colors.white : Colors.white,
|
color: Colors.white.withValues(alpha: 0.2),
|
||||||
borderRadius: BorderRadius.circular(20),
|
shape: BoxShape.circle,
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: Colors.black.withValues(alpha: 0.1),
|
|
||||||
blurRadius: 4,
|
|
||||||
offset: const Offset(0, 2),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
_isFollowing ? 'Following \u2713' : 'Follow +',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 13,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
color: _isFollowing
|
|
||||||
? AppConstants.textSecondary
|
|
||||||
: AppConstants.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
|
child: const Icon(Icons.edit, color: Colors.white, size: 18),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -749,8 +729,8 @@ class _ProfileScreenState extends State<ProfileScreen>
|
|||||||
Text(
|
Text(
|
||||||
'exp.',
|
'exp.',
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 12,
|
fontSize: 14,
|
||||||
fontWeight: FontWeight.w600,
|
fontWeight: FontWeight.w300,
|
||||||
color: Colors.grey.shade500,
|
color: Colors.grey.shade500,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -843,10 +823,10 @@ class _ProfileScreenState extends State<ProfileScreen>
|
|||||||
|
|
||||||
Widget _buildSocialIcons() {
|
Widget _buildSocialIcons() {
|
||||||
final icons = [
|
final icons = [
|
||||||
Icons.dashboard_outlined,
|
Icons.emoji_events_outlined, // trophy (matching web)
|
||||||
Icons.camera_alt_outlined,
|
Icons.camera_alt_outlined, // instagram camera
|
||||||
Icons.alternate_email,
|
Icons.flutter_dash, // twitter-like bird
|
||||||
Icons.layers_outlined,
|
Icons.layers_outlined, // layers/stack
|
||||||
];
|
];
|
||||||
|
|
||||||
return Row(
|
return Row(
|
||||||
@@ -914,35 +894,21 @@ class _ProfileScreenState extends State<ProfileScreen>
|
|||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
fontWeight: FontWeight.w600,
|
fontWeight: FontWeight.w600,
|
||||||
color: AppConstants.textPrimary,
|
color: AppConstants.textPrimary,
|
||||||
|
letterSpacing: -0.3,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(height: 6),
|
const SizedBox(height: 8),
|
||||||
|
|
||||||
// Title / Bio
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
||||||
child: Text(
|
|
||||||
_title,
|
|
||||||
style: const TextStyle(
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: FontWeight.w300,
|
|
||||||
color: AppConstants.textSecondary,
|
|
||||||
height: 1.5,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 4),
|
|
||||||
|
|
||||||
// Email
|
// Email
|
||||||
Padding(
|
Padding(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||||
child: Text(
|
child: Text(
|
||||||
_email,
|
_email,
|
||||||
style: TextStyle(
|
style: const TextStyle(
|
||||||
fontSize: 13,
|
fontSize: 14,
|
||||||
fontWeight: FontWeight.w300,
|
fontWeight: FontWeight.w300,
|
||||||
color: Colors.grey.shade400,
|
color: AppConstants.textSecondary,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -954,10 +920,7 @@ class _ProfileScreenState extends State<ProfileScreen>
|
|||||||
|
|
||||||
// Social Icons
|
// Social Icons
|
||||||
_buildSocialIcons(),
|
_buildSocialIcons(),
|
||||||
const SizedBox(height: 20),
|
const SizedBox(height: 16),
|
||||||
|
|
||||||
// Rainbow bar at bottom
|
|
||||||
_buildRainbowBar(),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user