b0esche/b0esche_cloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor HomePage layout to improve audio player integration and enhance UI responsiveness

Browse Source
This commit is contained in:
Leon Bösche
2026-01-16 16:09:07 +01:00
parent 0b2a9bad2f
commit 072564fb0f
2 changed files with 169 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
b0esche_cloud/lib/pages/home_page.dart
View File

@@ -405,35 +405,78 @@ class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
backgroundColor: AppTheme.primaryBackground,
body: Stack(
children: [
// Audio bar between title and button row
// Title and audio bar row
Positioned(
top: MediaQuery.of(context).size.width < 600 ? 36 : 60,
top: 0,
left: 0,
right: 0,
child: AnimatedBuilder(
animation: _audioBarController,
builder: (context, child) {
return (_showAudioBar &&
_audioFileName != null &&
_audioFileUrl != null)
? SlideTransition(
position: _audioBarOffset,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 32.0,
),
child: AudioPlayerBar(
fileName: _audioFileName!,
fileUrl: _audioFileUrl!,
onClose: () {
_audioBarController.reverse();
setState(() => _showAudioBar = false);
},
),
),
)
: const SizedBox.shrink();
},
child: Padding(
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.width < 600 ? 16 : 24,
left: 32,
right: 32,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title
Expanded(
flex: 3,
child: Align(
alignment: Alignment.centerLeft,
child: 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 bar (max 1/4 width, right-aligned)
Expanded(
flex: 1,
child: AnimatedBuilder(
animation: _audioBarController,
builder: (context, child) {
return (_showAudioBar &&
_audioFileName != null &&
_audioFileUrl != null)
? Align(
alignment: Alignment.topRight,
child: FractionallySizedBox(
widthFactor: 1.0,
child: SlideTransition(
position: _audioBarOffset,
child: AudioPlayerBar(
fileName: _audioFileName!,
fileUrl: _audioFileUrl!,
onClose: () {
_audioBarController.reverse();
setState(() => _showAudioBar = false);
},
),
),
),
)
: const SizedBox.shrink();
},
),
),
],
),
),
),
Center(