Refactor profile tab layout: replace SingleChildScrollView with Stack for improved logout button positioning and enhance avatar display

This commit is contained in:
Leon Bösche
2026-01-27 09:22:44 +01:00
parent 262ce18902
commit ebe2887d7c

View File

@@ -326,101 +326,111 @@ class _AccountSettingsDialogState extends State<AccountSettingsDialog> {
}
Widget _buildProfileTab() {
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Avatar
Center(
child: Column(
children: [
SizedBox(height: 16),
GestureDetector(
onTap: _pickAndUploadAvatar,
child: CircleAvatar(
radius: 50,
backgroundColor: AppTheme.secondaryText.withValues(
alpha: 0.2,
return Stack(
children: [
SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Avatar
Center(
child: Column(
children: [
SizedBox(height: 16),
GestureDetector(
onTap: _pickAndUploadAvatar,
child: CircleAvatar(
radius: 50,
backgroundColor: AppTheme.secondaryText.withValues(
alpha: 0.2,
),
child: _avatarUrl != null && _blurHash != null
? ClipOval(
child: flutter_blurhash.BlurHash(
hash: _blurHash!,
image: _avatarUrl,
imageFit: BoxFit.cover,
),
)
: Icon(
Icons.person,
size: 50,
color: AppTheme.secondaryText,
),
),
),
child: _avatarUrl != null && _blurHash != null
? ClipOval(
child: flutter_blurhash.BlurHash(
hash: _blurHash!,
image: _avatarUrl,
imageFit: BoxFit.cover,
),
)
: Icon(
Icons.person,
size: 50,
color: AppTheme.secondaryText,
),
const SizedBox(height: 8),
Text(
'Tap to change avatar',
style: TextStyle(
color: AppTheme.secondaryText,
fontSize: 12,
),
),
],
),
),
const SizedBox(height: 24),
// Display Name
Text(
'Display Name',
style: TextStyle(
color: AppTheme.primaryText,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Container(
decoration: BoxDecoration(
color: AppTheme.primaryBackground.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: AppTheme.accentColor.withValues(alpha: 0.3),
),
),
const SizedBox(height: 8),
Text(
'Tap to change avatar',
style: TextStyle(color: AppTheme.secondaryText, fontSize: 12),
child: TextFormField(
controller: _displayNameController,
cursorColor: AppTheme.accentColor,
style: TextStyle(color: AppTheme.primaryText),
decoration: InputDecoration(
hintText: 'Enter display name',
hintStyle: TextStyle(color: AppTheme.secondaryText),
border: InputBorder.none,
contentPadding: const EdgeInsets.all(12),
),
),
],
),
),
const SizedBox(height: 24),
// Display Name
Text(
'Display Name',
style: TextStyle(
color: AppTheme.primaryText,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Container(
decoration: BoxDecoration(
color: AppTheme.primaryBackground.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: AppTheme.accentColor.withValues(alpha: 0.3),
),
),
child: TextFormField(
controller: _displayNameController,
cursorColor: AppTheme.accentColor,
style: TextStyle(color: AppTheme.primaryText),
decoration: InputDecoration(
hintText: 'Enter display name',
hintStyle: TextStyle(color: AppTheme.secondaryText),
border: InputBorder.none,
contentPadding: const EdgeInsets.all(12),
),
),
),
const SizedBox(height: 24),
const SizedBox(height: 24),
// Save Button
Center(
child: SizedBox(
width: 104,
child: ModernGlassButton(
onPressed: _updateProfile,
child: const Text('Save Changes'),
// Save Button
Center(
child: SizedBox(
width: 104,
child: ModernGlassButton(
onPressed: _updateProfile,
child: const Text('Save Changes'),
),
),
),
),
const SizedBox(height: 80), // Space for logout button
],
),
const SizedBox(height: 24),
// Logout Button
Center(
child: IconButton(
onPressed: _logout,
icon: Icon(Icons.logout, color: AppTheme.errorColor),
tooltip: 'Logout',
iconSize: 28,
),
),
// Logout Button in bottom right corner of profile tab
Positioned(
bottom: 16,
right: 16,
child: IconButton(
onPressed: _logout,
icon: Icon(Icons.logout, color: AppTheme.errorColor),
tooltip: 'Logout',
iconSize: 28,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
],
),
),
],
);
}