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, right: 0,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32), padding: const EdgeInsets.symmetric(horizontal: 32),
child: Center( child: Row(
child: Row( crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min, children: [
crossAxisAlignment: CrossAxisAlignment.center, // Left spacer
children: [ const Expanded(child: SizedBox()),
// Title // Center: title and audio bar
Builder( Expanded(
builder: (context) { flex: 2,
final screenWidth = MediaQuery.of(context).size.width; child: Row(
final fontSize = screenWidth < 600 ? 24.0 : 48.0; mainAxisAlignment: MainAxisAlignment.center,
return Text( crossAxisAlignment: CrossAxisAlignment.center,
'b0esche.cloud', children: [
style: TextStyle( Builder(
fontFamily: 'PixelatedElegance', builder: (context) {
fontSize: fontSize, final screenWidth = MediaQuery.of(
color: AppTheme.primaryText, context,
decoration: TextDecoration.underline, ).size.width;
decorationColor: AppTheme.primaryText, final fontSize = screenWidth < 600 ? 24.0 : 48.0;
fontFeatures: const [FontFeature.slashedZero()], return Text(
), 'b0esche.cloud',
); style: TextStyle(
}, fontFamily: 'PixelatedElegance',
), fontSize: fontSize,
// Audio player (if visible) color: AppTheme.primaryText,
if (_showAudioBar && decoration: TextDecoration.underline,
_audioFileName != null && decorationColor: AppTheme.primaryText,
_audioFileUrl != null) ...[ fontFeatures: const [
const SizedBox(width: 32), FontFeature.slashedZero(),
FractionallySizedBox( ],
widthFactor: 0.5, ),
child: SlideTransition( );
position: _audioBarOffset, },
child: AudioPlayerBar(
fileName: _audioFileName!,
fileUrl: _audioFileUrl!,
onClose: () {
_audioBarController.reverse();
setState(() => _showAudioBar = false);
},
),
), ),
), if (_showAudioBar &&
], _audioFileName != null &&
const SizedBox(width: 32), _audioFileUrl != null) ...[
// Navigation buttons const SizedBox(width: 24),
BlocBuilder<AuthBloc, AuthState>( SlideTransition(
builder: (context, state) { position: _audioBarOffset,
final isLoggedIn = state is AuthAuthenticated; child: AudioPlayerBar(
if (!isLoggedIn) { fileName: _audioFileName!,
return const SizedBox.shrink(); fileUrl: _audioFileUrl!,
} onClose: () {
return Row( _audioBarController.reverse();
mainAxisSize: MainAxisSize.min, setState(() => _showAudioBar = false);
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,
), ),
], ),
); ],
}, ],
), ),
], ),
), // 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,
),
],
);
},
),
),
),
],
), ),
), ),
), ),