Music UI

 Music UI:

Video:

Code:

import 'package:flutter/material.dart';

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

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

class MyHome extends StatefulWidget {
  @override  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  @override  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double topHeight = height * 0.5;
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          physics: NeverScrollableScrollPhysics(),
          child: Stack(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Stack(
                    children: <Widget>[
                      Container(
                        height: topHeight,
                        width: MediaQuery.of(context).size.width,
                        child: Image.asset(
                          "images/music.jpg",
                          fit: BoxFit.cover,
                        ),
                      ),
                      IconButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        icon: Icon(
                          Icons.arrow_back,
                          color: Colors.white,
                        ),
                      ),
                    ],
                  ),
                  Container(
                    height: height * 0.6,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.bottomLeft,
                        end: Alignment.topRight,
                        stops: [0, 0.5, 1],
                        colors: [
                          Colors.cyan,
                          Colors.blueGrey,
                          Colors.cyan,
                        ],
                      ),
                    ),
                    child: Column(
                      children: <Widget>[
                        SizedBox(
                          height: 40.0,
                        ),
                        Container(
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                              Icon(
                                Icons.queue_music,
                                color: Colors.white,
                                size: 30,
                              ),
                              Icon(
                                Icons.favorite,
                                color: Colors.red,
                                size: 30,
                              ),
                              Icon(
                                Icons.share,
                                color: Colors.white,
                                size: 30,
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                        Text(
                          "Buffering...",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 23,
                          ),
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        _progress(),
                        Expanded(
                          child: ListView.builder(
                              physics: BouncingScrollPhysics(
                                parent: AlwaysScrollableScrollPhysics(),
                              ),
                              itemCount: 10,
                              itemBuilder: (BuildContext context, int index) {
                                return Column(
                                  children: <Widget>[
                                    ListTile(
                                      onTap: () {},
                                      leading: Text(
                                        "${index + 1}.",
                                        style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 18,
                                        ),
                                      ),
                                      title: Text(
                                        "Season${index + 1}",
                                        style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 20,
                                        ),
                                      ),
                                      subtitle: Text(
                                        "Online",
                                        style: TextStyle(
                                          color: Colors.white,
                                          fontSize: 14,
                                        ),
                                      ),
                                      trailing: IconButton(
                                        onPressed: () {},
                                        icon: Icon(
                                          Icons.play_arrow,
                                          color: Colors.white,
                                        ),
                                      ),
                                    ),
                                    Divider(
                                      height: 6,
                                      color: Colors.white,
                                    ),
                                  ],
                                );
                              }),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              Positioned(
                left: MediaQuery.of(context).size.width * 0.15,
                top: topHeight - 55,
                child: FractionalTranslation(
                  translation: Offset(0, 0.5),
                  child: playerWidget(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  playerWidget() {
    return Stack(overflow: Overflow.visible, children: <Widget>[
      Container(
        alignment: Alignment.topCenter,
        height: 50,
        width: MediaQuery.of(context).size.width * 0.7,
        margin: EdgeInsets.only(bottom: 6),
        decoration: BoxDecoration(
          boxShadow: [BoxShadow(blurRadius: 5)],
          borderRadius: BorderRadius.circular(15),
          color: Colors.yellow,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              icon: Icon(
                Icons.skip_previous,
                color: Colors.blue,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(
                Icons.fast_rewind,
                color: Colors.blue,
              ),
              onPressed: () {},
            ),
            SizedBox(
              width: 25,
            ),
            IconButton(
              icon: Icon(
                Icons.fast_forward,
                color: Colors.blue,
              ),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(
                Icons.skip_next,
                color: Colors.blue,
              ),
              onPressed: () {},
            ),
          ],
        ),
      ),
      Positioned(
        left: 77,
        right: 77,
        bottom: 2,
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.blue,
            boxShadow: [BoxShadow(blurRadius: 5)],
          ),
          child: CircleAvatar(
            backgroundColor: Colors.red,
            radius: 29,
            child: IconButton(
                icon: Icon(
                  Icons.play_arrow,
                  color: Colors.white,
                  size: 35,
                ),
                onPressed: () {}),
          ),
        ),
      )
    ]);
  }

  Widget _progress() {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Text(
          "00:00",
          style: TextStyle(
            fontSize: 20.0,
            color: Colors.white,
          ),
        ),
        Expanded(
            child: Divider(
              height: 5,
              color: Colors.white,
            )),

        SizedBox(
          width: 1,
        ),
        Text(
          "00:00",
          style: new TextStyle(
            fontSize: 20.0,
            color: Colors.white,
          ),
        ),

      ],
    );
  }
}