Faça um aplicativo de clone do Spotify usando o Flutter

Tempo de leitura: 4 minutes

Neste tutorial, vamos criar um aplicativo Spotify Clone usando o Flutter. para esta parte, focaremos no front end do aplicativo, o que significa que não usaremos a API ou adicionaremos um music player real, mas aprenderemos como criar uma barra de navegação inferior e como navegar entre visualizações diferentes usando a vibração.

Introdução

Antes de começarmos a codificar nosso aplicativo, vamos dar uma olhada no nosso aplicativo

Como você pode ver, nosso aplicativo tem uma barra de navegação inferior e 4 fragmentos. primeiro codificaremos o arquivo principal do nosso aplicativo e criaremos quatro arquivos, um para cada fragmento. Agora vamos começar a codificar.

Código Fonte:

main.dart

import 'package:flutter/material.dart';
import 'package:spotifyclone/PlayListPage.dart';
import 'package:spotifyclone/ProfilePage.dart';
import 'package:spotifyclone/SearchPage.dart';
import 'HomePage.dart';
void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _courentTab = 0;
  final Tabs = [
    HomePage(),
    SearchPage(),
    PlayListPage(),
    ProfilePage(),
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          backgroundColor: Colors.black,
          body: Tabs[_courentTab], //HomePage(),tabs[_courentTab],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: _courentTab,

            type: BottomNavigationBarType.shifting,
            items:[
              BottomNavigationBarItem(
                icon: Icon(Icons.home,color: Colors.white,),
                title: Text("Home",style: TextStyle(color: Colors.white),),
                backgroundColor: Color.fromARGB(255, 20, 20, 20),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.search,color: Colors.white,),
                title: Text("Search",style: TextStyle(color: Colors.white),),
                backgroundColor: Color.fromARGB(255, 20, 20, 20),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.library_music,color: Colors.white,),
                title: Text("Music Library",style: TextStyle(color: Colors.white),),
                backgroundColor: Color.fromARGB(255, 20, 20, 20),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person,color: Colors.white,),
                title: Text("Your Account",style: TextStyle(color: Colors.white),),
                backgroundColor: Color.fromARGB(255, 20, 20, 20),

              ),

            ],
            onTap: (index){
              setState(() {
                _courentTab = index;
              });
            },
          ),
        ),
      ),

    );
  }
}

 

HomePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  List<String> CoverList =[
    "https://i.pinimg.com/originals/f5/82/47/f58247463e38a536f442bfb816f62c6b.jpg",
    "https://www.designformusic.com/wp-content/uploads/2016/09/electro-synthwave-album-cover-500x500.jpg",
    "https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/102342461/original/68ef1e1fab3c4028d51f7fd7cfa9bad2232e576c/create-a-copyright-free-album-cover.jpg",
    "https://www.designformusic.com/wp-content/uploads/2016/02/volta-music-trailer-music-album-cover-design.jpg",
    "https://www.designformusic.com/wp-content/uploads/2018/07/Digital-World-album-cover-design.jpg",
    "https://www.designformusic.com/wp-content/uploads/2016/02/volta-music-trailer-music-album-cover-design.jpg"
  ];
  Widget AlbumContainer(String CoverUrl,String CoverName, String SingerName){
    return Container(
      child: InkWell(
        onTap: (){},
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.circular(12.0),
              child: Container(
                  height: 140.0,
                  width: 140.0,
                  child: Image.network(CoverUrl)
              ),
            ),
            SizedBox(height: 12.0,),
            Text(
              CoverName,
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w800,
                fontSize: 22.0
              ),
            ),
            SizedBox(height: 12.0,),
            Text(
              SingerName,
              style: TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.w300,
                  fontSize: 18.0
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 40.0,horizontal: 25.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Text(
                "Recommended for you",
                style: TextStyle(
                    color: Colors.white,
                  fontSize: 28.0
                ),
              ),
              SizedBox(
                height: 20.0,
              ),
              Expanded(
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    AlbumContainer(CoverList[0], "CoverName", "SingerName"),
                    SizedBox(width: 28.0,),
                    AlbumContainer(CoverList[1], "CoverName", "SingerName"),
                    SizedBox(width: 28.0,),
                    AlbumContainer(CoverList[2], "CoverName", "SingerName"),
                    SizedBox(width: 28.0,),
                  ],
                ),
              ),
              Text(
                "New Music",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 28.0
                ),
              ),
              SizedBox(
                height: 20.0,
              ),
              Expanded(
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    AlbumContainer(CoverList[3], "CoverName", "SingerName"),
                    SizedBox(width: 28.0,),
                    AlbumContainer(CoverList[4], "CoverName", "SingerName"),
                    SizedBox(width: 28.0,),
                    AlbumContainer(CoverList[5], "CoverName", "SingerName"),
                    SizedBox(width: 28.0,),
                  ],
                ),
              )
            ],
          ),
        ),
      );

  }
}

 

SearchPage.dart

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 15.0),
          child: Column(
            children: <Widget>[
              Center(
                child: Text(
                  "Search",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 48.0,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(18.0),
                child: TextField(
                  textAlign: TextAlign.center,
                  decoration: InputDecoration(
                    fillColor: Colors.white,
                    prefixIcon: Icon(Icons.search,color: Colors.black,size: 28.0,),
                    filled: true,
                    border: InputBorder.none,
                    hintText: "Find your music",
                  ),
                ),
              ),
              Expanded(
                child: GridView.count(
                  primary: false,
                  padding: const EdgeInsets.all(20),
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  crossAxisCount: 2,
                  children: <Widget>[
                    ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
                        child: const Text("Pop Music",style: TextStyle(
                          color: Colors.white,
                          fontSize: 28.0
                        ),),
                        color: Colors.deepOrange,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
                        child: const Text("Rock",style: TextStyle(
                          color: Colors.white,
                          fontSize: 28.0
                        ),),
                        color: Colors.deepPurple,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
                        child: const Text("Hip Hop",style: TextStyle(
                          color: Colors.white,
                          fontSize: 28.0
                        ),),
                        color: Colors.blueAccent,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
                        child: const Text("Jazz",style: TextStyle(
                          color: Colors.white,
                          fontSize: 28.0
                        ),),
                        color: Colors.amber,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
                        child: const Text("House",style: TextStyle(
                          color: Colors.white,
                          fontSize: 28.0
                        ),),
                        color: Colors.green,
                      ),
                    ),
                    ClipRRect(
                      borderRadius: BorderRadius.circular(10.0),
                      child: Container(
                        padding: const EdgeInsets.symmetric(vertical: 12.0,horizontal: 12.0),
                        child: const Text("Reggae",style: TextStyle(
                          color: Colors.white,
                          fontSize: 28.0
                        ),),
                        color: Colors.red,
                      ),
                    ),

                  ],
                ),
              )

            ],
          ),

      )
    );
  }
}

 

PlayListPage.dart

import 'package:flutter/material.dart';

class PlayListPage extends StatelessWidget {
  List<String> CoverList =[
    "https://i.pinimg.com/originals/f5/82/47/f58247463e38a536f442bfb816f62c6b.jpg",
    "https://www.designformusic.com/wp-content/uploads/2016/09/electro-synthwave-album-cover-500x500.jpg",
    "https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/102342461/original/68ef1e1fab3c4028d51f7fd7cfa9bad2232e576c/create-a-copyright-free-album-cover.jpg",
    "https://www.designformusic.com/wp-content/uploads/2016/02/volta-music-trailer-music-album-cover-design.jpg",
    "https://www.designformusic.com/wp-content/uploads/2018/07/Digital-World-album-cover-design.jpg",
    "https://www.designformusic.com/wp-content/uploads/2016/02/volta-music-trailer-music-album-cover-design.jpg"
  ];

  Widget ListItem(String CoverUrl,String AlbumTitle, String SingerName){
      return Column(
        children: <Widget>[
          InkWell(
            onTap: (){},
            child: Container(
                child: Row(
                  children: <Widget>[
                    ClipRRect(
                      borderRadius: BorderRadius.circular(4.0),
                      child: Container(
                        width: 100.0,
                        height: 100.0,
                        child: Image.network(CoverUrl),
                      ),
                    ),
                    SizedBox(width: 20.0,),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          AlbumTitle,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 28.0,
                            fontWeight: FontWeight.w800
                          ),
                        ),
                        SizedBox(height: 12.0,),
                        Text(
                          SingerName,
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                            fontWeight: FontWeight.w300
                          ),
                        )
                      ],
                    )
                  ],
                ),
            ),
          ),
          SizedBox(height: 20.0,)
        ],
      );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 35.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Text(
                "Your Favorite Music",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 28.0
                ),
              ),
              SizedBox(height: 20.0,),
              Expanded(
                child: ListView(
                  children: <Widget>[
                    ListItem(CoverList[0], "AlbumTitle", "SingerName"),
                    ListItem(CoverList[1], "AlbumTitle", "SingerName"),
                    ListItem(CoverList[2], "AlbumTitle", "SingerName"),
                    ListItem(CoverList[3], "AlbumTitle", "SingerName"),
                    ListItem(CoverList[4], "AlbumTitle", "SingerName"),
                    ListItem(CoverList[5], "AlbumTitle", "SingerName"),
                  ],
                ),
              )
            ],
          ),
        ),
    );
  }
}

 

ProfilePage.dart

import 'package:flutter/material.dart';

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 30.0,horizontal: 22.0),
          child: Column(
            children: <Widget>[
              CircleAvatar(
                radius: 70,
                backgroundImage: NetworkImage("https://images.unsplash.com/photo-1529665253569-6d01c0eaf7b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1276&q=80"),
              ),
              SizedBox(
                height: 20.0,
              ),
              Text(
                "Doctor Code",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 28.0
                ),
              ),
              SizedBox(
                height: 50.0,
              ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        Text("501",style: TextStyle(
                          color: Colors.white,
                          fontSize: 35.0
                        ),),
                        SizedBox(height: 5.0,),
                        Text("Music",style: TextStyle(
                            color: Colors.white,
                            fontSize: 25.0,
                          fontWeight: FontWeight.w300
                        ),),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        Text("20.1K",style: TextStyle(
                          color: Colors.white,
                          fontSize: 35.0
                        ),),
                        SizedBox(height: 5.0,),
                        Text("Followers",style: TextStyle(
                            color: Colors.white,
                            fontSize: 25.0,
                            fontWeight: FontWeight.w300
                        ),),
                      ],
                    ),
                  ),
                  Expanded(
                    child: Column(
                      children: <Widget>[
                        Text("1.2k",style: TextStyle(
                          color: Colors.white,
                          fontSize: 35.0
                        ),),
                        SizedBox(height: 5.0,),
                        Text("Follow",style: TextStyle(
                            color: Colors.white,
                            fontSize: 25.0,
                          fontWeight: FontWeight.w300
                        ),),
                      ],
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 30.0,
              ),
              
              Padding(
                padding: EdgeInsets.all(22.0),
                child: RaisedButton(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(100.0),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 30.0,vertical: 18.0),
                    child: Text("Edit Profile", style: TextStyle(
                      color: Colors.white,
                      fontSize: 22.0
                    ),),
                  ),
                  color: Color(0xFF1DD860),
                  onPressed: (){},
                ),
              )
            ],
          ),
        )
    );
  }
}

 

Espero que este tutorial tenha sido útil, se você gostou, pode colocar no comentário o que você quer para um projeto futuro

Visits: 2 Visits: 1199681