Refactor HomePage layout to improve audio bar integration and navigation button arrangement

This commit is contained in:
Leon Bösche
2026-01-17 01:41:58 +01:00
parent 6ee244b829
commit 2c565c3b50

View File

@@ -412,77 +412,89 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
right: 0,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32),
child: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Title
Builder(
builder: (context) {
final screenWidth = MediaQuery.of(context).size.width;
final fontSize = screenWidth < 600 ? 24.0 : 48.0;
return Text(
'b0esche.cloud',
style: TextStyle(
fontFamily: 'PixelatedElegance',
fontSize: fontSize,
color: AppTheme.primaryText,
decoration: TextDecoration.underline,
decorationColor: AppTheme.primaryText,
fontFeatures: const [FontFeature.slashedZero()],
),
);
},
),
// Audio player (if visible)
if (_showAudioBar &&
_audioFileName != null &&
_audioFileUrl != null) ...[
const SizedBox(width: 32),
FractionallySizedBox(
widthFactor: 0.5,
child: SlideTransition(
position: _audioBarOffset,
child: AudioPlayerBar(
fileName: _audioFileName!,
fileUrl: _audioFileUrl!,
onClose: () {
_audioBarController.reverse();
setState(() => _showAudioBar = false);
},
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Left spacer
const Expanded(child: SizedBox()),
// Center: title and audio bar
Expanded(
flex: 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Builder(
builder: (context) {
final screenWidth = MediaQuery.of(
context,
).size.width;
final fontSize = screenWidth < 600 ? 24.0 : 48.0;
return Text(
'b0esche.cloud',
style: TextStyle(
fontFamily: 'PixelatedElegance',
fontSize: fontSize,
color: AppTheme.primaryText,
decoration: TextDecoration.underline,
decorationColor: AppTheme.primaryText,
fontFeatures: const [
FontFeature.slashedZero(),
],
),
);
},
),
),
],
const SizedBox(width: 32),
// Navigation buttons
BlocBuilder<AuthBloc, AuthState>(
builder: (context, state) {
final isLoggedIn = state is AuthAuthenticated;
if (!isLoggedIn) {
return const SizedBox.shrink();
}
return Row(
mainAxisSize: MainAxisSize.min,
children: [
_buildNavButton('Drive', Icons.cloud),
const SizedBox(width: 16),
_buildNavButton('Mail', Icons.mail),
const SizedBox(width: 16),
_buildNavButton('Add', Icons.add),
const SizedBox(width: 16),
_buildNavButton(
'Profile',
Icons.person,
isAvatar: true,
if (_showAudioBar &&
_audioFileName != null &&
_audioFileUrl != null) ...[
const SizedBox(width: 24),
SlideTransition(
position: _audioBarOffset,
child: AudioPlayerBar(
fileName: _audioFileName!,
fileUrl: _audioFileUrl!,
onClose: () {
_audioBarController.reverse();
setState(() => _showAudioBar = false);
},
),
],
);
},
),
],
],
),
],
),
),
// Right: nav buttons
Expanded(
child: Align(
alignment: Alignment.centerRight,
child: BlocBuilder<AuthBloc, AuthState>(
builder: (context, state) {
final isLoggedIn = state is AuthAuthenticated;
if (!isLoggedIn) {
return const SizedBox.shrink();
}
return Row(
mainAxisSize: MainAxisSize.min,
children: [
_buildNavButton('Drive', Icons.cloud),
const SizedBox(width: 16),
_buildNavButton('Mail', Icons.mail),
const SizedBox(width: 16),
_buildNavButton('Add', Icons.add),
const SizedBox(width: 16),
_buildNavButton(
'Profile',
Icons.person,
isAvatar: true,
),
],
);
},
),
),
),
],
),
),
),