Bottom Navigation and music bar

[Dhanrajsinh002]

Hey I want to know that how did you make I mean what widget you have used?

[webrror]

@Dhanrajsinh002 I am using an AnimatedContainer with Positioned and Offstage widgets.

Here's the code :

Positioned(
    bottom: !fullPlayer ? 100 : 0,
    left: !fullPlayer ? 10 : 0,
    right: !fullPlayer ? 10 : 0,
    child: GestureDetector(
        onTap: () {
            nowPlayingMethod();
        },
        child: AnimatedContainer(
            duration: const Duration(milliseconds: 800),
            curve: Curves.fastOutSlowIn,
            width: !fullPlayer ? screenWidth * 0.9 : screenWidth,
            height: !fullPlayer ? screenHeight * 0.07 : screenHeight,
            decoration: BoxDecoration(
                color: nowPlaying["color"],
                borderRadius: fullPlayer
                ? BorderRadius.circular(0)
                : BorderRadius.circular(10)
            ),
            child: fullPlayer
            ? Offstage(
                offstage: !offStage,
                child: NowPlaying(
                    closeOpen: nowPlayingMethod,
                )
            )
            : Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                    Row(
                        children: [
                            Padding(
                                padding: const EdgeInsets.only(
                                    left: 10.0,
                                    right: 5,
                                    top: 8,
                                    bottom: 5
                                ),
                                child: SizedBox(
                                    height: 40,
                                    width: 40,
                                    child: ClipRRect(
                                        borderRadius: BorderRadius.circular(5),
                                        child: Image.network(
                                            nowPlaying['imageUrl'],
                                            fit: BoxFit.cover,
                                        ),
                                    ),
                                ),
                            ),
                            SizedBox(
                                width: screenWidth * 0.01,
                            ),
                            Column(
                                crossAxisAlignment:
                                CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                    Text(
                                        nowPlaying['title'],
                                        overflow: TextOverflow.ellipsis,
                                        style: const TextStyle(
                                            fontSize: 13,
                                            color: Colors.white,
                                            fontWeight: FontWeight.w400),
                                    ),
                                    SizedBox(
                                        height: screenHeight * 0.005,
                                    ),
                                    Text(
                                        nowPlaying['artists'],
                                        overflow: TextOverflow.ellipsis,
                                        style: const TextStyle(
                                            fontSize: 12,
                                            color: Colors.white54,
                                            fontWeight: FontWeight.w300),
                                    )
                                ],
                            ),
                            const Spacer(),
                            IconButton(
                                onPressed: () {},
                                icon: const Icon(FluentIcons
                                    .device_meeting_room_remote_20_regular)),
                            IconButton(
                                onPressed: () {},
                                icon: const Icon(
                                    FluentIcons.play_20_filled)
                            )
                        ],
                    ),
                    const Padding(
                        padding: EdgeInsets.symmetric(horizontal: 8.0),
                        child: LinearProgressIndicator(
                            value: 0.2,
                            minHeight: 2,
                            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                        ),
                    ),
                ],  
            )
        ),
    )
)

Or refer : lib/screens/base.dart