[Flutter] Is there any way to create a bottom sheet like YouTube Music in flutter

I want to create a Youtube Music like mini player in bottom side which can be expanded to a full page and again collapsed into a miniplayer. as fat as I can think of it seem like an example of bottom sheet example but I turnaround over some internet examples and only found ways by which we can just call a bottom sheet function in flutter like showModelBottomSheet() and then it launches a bottom sheet. But I want something like which is already existed when app is opened and can be dragged up or down by user.

main file

import 'package:flutter/material.dart';
import 'package:minitest/mini_sheet.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MusicPlayer(),
);
}
}

class MusicPlayer extends StatefulWidget {
@override
_MusicPlayerState createState() => _MusicPlayerState();
}

class _MusicPlayerState extends State<MusicPlayer> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Mini Music Player'),
),
body: Stack(
children: [
// Main content here (e.g., ListView)
ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
),
// DraggableScrollableSheet for the mini player at the bottom
Align(
alignment: Alignment.bottomCenter,
child: DraggableMiniPlayer(),
),
],
),
);
}
}



Miniplayer file

import 'package:flutter/material.dart';

class DraggableMiniPlayer extends StatelessWidget {
const DraggableMiniPlayer({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return DraggableScrollableSheet(
initialChildSize: 0.1, // The collapsed size
minChildSize: 0.1, // Minimum size when collapsed
maxChildSize: 0.8, // Maximum size when expanded
builder: (BuildContext context, ScrollController scrollController) {
return Container(
decoration: const BoxDecoration(
color: Color.fromARGB(255, 189, 72, 72),
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
child: Column(
children: [
// A drag handle at the top for better UX
Container(
height: 5,
width: 60,
margin: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(10),
),
),
Expanded(
child: ListView.builder(
controller: scrollController,
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
title: Text(
'Song $index',
style: const TextStyle(color: Colors.white),
),
);
},
),
),
],
),
);
},
);
}
}



this is an example code i tried but the bottom sheet is just fixed in their position not moving up or anywhere it is just fixed and items inside are scrolling using mouse but not expanding the bottom sheet to up like I want.

Continue reading...