Shazam 클론코딩

main.dart

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Shazam',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      initialIndex: 1,
      length: 3,
      child: Builder(builder: (context) {
        DefaultTabController.of(context)?.addListener(() {
          setState(() {});
        });

        return Scaffold(
          body: Stack(
            children: [
              TabBarView(
                children: [
                  FirstTab(),
                  SecondTab(),
                  ThirdTab(),
                ],
              ),
              SafeArea(
                child: Padding(
                  padding:
                      const EdgeInsets.symmetric(vertical: 20, horizontal: 16),
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.topCenter,
                        child: TabPageSelector(
                          color: DefaultTabController.of(context)?.index == 1
                              ? Colors.blue[300]
                              : Colors.grey[400],
                          selectedColor:
                              DefaultTabController.of(context)?.index == 1
                                  ? Colors.white
                                  : Colors.blue,
                          indicatorSize: 8,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        );
      }),
    );
  }
}

// 첫번째 페이지
class FirstTab extends StatelessWidget {
  const FirstTab({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // ignore: unused_local_variable
    const songs = [
      {
        'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
        'title': '가을밤에 든 생각',
        'artist': '잔나비',
      },
      {
        'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
        'title': '가을밤에 든 생각',
        'artist': '잔나비',
      },
      {
        'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
        'title': '가을밤에 든 생각',
        'artist': '잔나비',
      },
      {
        'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
        'title': '가을밤에 든 생각',
        'artist': '잔나비',
      },
      {
        'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
        'title': '가을밤에 든 생각',
        'artist': '잔나비',
      },
      {
        'imageUrl': 'https://i.ytimg.com/vi/jAO0KXRdz_4/hqdefault.jpg',
        'title': '가을밤에 든 생각',
        'artist': '잔나비',
      },
    ];

    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 4),
        child: Column(
          children: [
            //Text("설정버튼"),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Padding(
                  padding: const EdgeInsets.all(1.0),
                  child: IconButton(
                    onPressed: () {},
                    icon: Icon(Icons.settings),
                  ),
                ),
                Text(
                  "라이브러리",
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 15, // 폰트 크기
                    fontWeight: FontWeight.bold, // 폰트 두께
                    color: Colors.black, // 폰트 색상
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Icon(null),
                ),
              ],
            ),
            Row(
              children: [
                Container(
                  margin: EdgeInsets.all(8.0),
                  child: Image.network(
                    "https://cdn.iconscout.com/icon/free/png-256/shazam-3-761709.png",
                    color: Colors.black,
                    width: 20,
                    height: 20,
                  ),
                ),
                Text(
                  "Shazam",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontSize: 14, // 폰트 크기
                    color: Colors.black, // 폰트 색상
                  ),
                ),
              ],
            ),
            Divider(),
            Row(
              children: [
                Container(
                  margin: EdgeInsets.all(8.0),
                  child: Icon(Icons.person),
                ),
                Text(
                  "아티스트",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontSize: 14, // 폰트 크기
                    color: Colors.black, // 폰트 색상
                  ),
                ),
              ],
            ),
            Divider(),
            Row(
              children: [
                Container(
                  margin: EdgeInsets.all(8.0),
                  child: Icon(Icons.audiotrack),
                ),
                Text(
                  "회원님을 위한 재생 목록",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontSize: 14, // 폰트 크기
                    color: Colors.black, // 폰트 색상
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    "최근 Shazam",
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      fontSize: 18, // 폰트 크기
                      fontWeight: FontWeight.bold, // 폰트 두께
                      color: Colors.black, // 폰트 색상
                    ),
                  ),
                ),
              ],
            ),
            Expanded(
              child: GridView.builder(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 20,
                  childAspectRatio: 3 / 4,
                ),
                itemCount: songs.length,
                itemBuilder: (context, index) {
                  return Container(
                    margin: EdgeInsets.only(bottom: 10),
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.black12,
                      ),
                      borderRadius: BorderRadius.circular(30),
                    ),
                    child: Column(
                      children: [
                        Image.network(songs[index]['imageUrl']!),
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text(songs[index]['title']!),
                        ),
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text(songs[index]['artist']!),
                        ),
                      ],
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

// 두번째 페이지
class SecondTab extends StatelessWidget {
  const SecondTab({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.blue[300]!, Colors.blue[900]!],
        ),
      ),
      child: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Column(
                  children: [
                    Icon(
                      Icons.person,
                      color: Colors.white,
                    ),
                    Text(
                      "라이브러리",
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
                Spacer(),
                Column(
                  children: [
                    Icon(
                      Icons.show_chart,
                      color: Colors.white,
                    ),
                    Text(
                      "차트",
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ],
            ),
            SizedBox(
              height: 80,
            ),
            Text(
              'Shazam하려면 탭하세요',
              style: TextStyle(
                fontSize: 30, // 폰트 크기
                fontWeight: FontWeight.bold, // 폰트 두께
                color: Colors.white, // 폰트 색상
              ),
            ),
            SizedBox(
              height: 40,
            ),
            Container(
                child: Image.network(
              "https://cdn.iconscout.com/icon/free/png-256/shazam-3-761709.png",
              color: Colors.white,
              width: 130,
              height: 130,
            )),
            SizedBox(
              height: 150,
            ),
            Container(
              width: 60,
              height: 60,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.blue[400], shape: BoxShape.circle),
              child: Icon(
                Icons.search,
                color: Colors.white,
                size: 30,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 세번째 페이지
class ThirdTab extends StatelessWidget {
  const ThirdTab({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // ignore: unused_local_variable
    const chartData = {
      'korea': [
        {
          'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
          'name': 'Dynamite',
          'artist': 'BTS',
        },
        {
          'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
          'name': 'Dynamite',
          'artist': 'BTS',
        },
        {
          'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
          'name': 'Dynamite',
          'artist': 'BTS',
        },
      ],
      'global': [
        {
          'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
          'name': 'Dynamite',
          'artist': 'BTS',
        },
        {
          'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
          'name': 'Dynamite',
          'artist': 'BTS',
        },
        {
          'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
          'name': 'Dynamite',
          'artist': 'BTS',
        },
      ],
      'newyork': [
        {
          'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
          'name': 'Dynamite',
          'artist': 'BTS',
        },
        {
          'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
          'name': 'Dynamite',
          'artist': 'BTS',
        },
        {
          'imageUrl': 'https://i.ibb.co/xf2HpfG/dynamite.jpg',
          'name': 'Dynamite',
          'artist': 'BTS',
        },
      ],
    };

    return SafeArea(
      child: Column(
        children: [
          Text(
            "차트",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 15, // 폰트 크기
              fontWeight: FontWeight.bold, // 폰트 두께
              color: Colors.black, // 폰트 색상
            ),
          ),
          SizedBox(height: 16),
          Expanded(
            child: SingleChildScrollView(
              child: Column(children: [
                Stack(
                  alignment: Alignment.center,
                  children: [
                    SizedBox(
                      height: 160,
                      child: Container(
                        color: Colors.purple,
                      ),
                    ),
                    Column(
                      children: [
                        SizedBox(
                          width: 300,
                          height: 25,
                          child: Container(
                            alignment: Alignment.center,
                            child: Text(
                              "국가 및 도시별 차트",
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 15, // 폰트 크기
                                fontWeight: FontWeight.bold, // 폰트 두께
                                color: Colors.purple, // 폰트 색상
                              ),
                            ),
                            color: Colors.white,
                          ),
                        ),
                        Text(
                          "전 세계",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 15, // 폰트 크기
                            fontWeight: FontWeight.bold, // 폰트 두께
                            color: Colors.white, // 폰트 색상
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
                Row(
                  children: [
                    Text(
                      "대한민국 차트",
                      style: TextStyle(
                        fontSize: 14, // 폰트 크기
                        color: Colors.black, // 폰트 색상
                      ),
                    ),
                    Spacer(),
                    Text(
                      "모두 보기",
                      style: TextStyle(
                        fontSize: 14, // 폰트 크기
                        color: Colors.black, // 폰트 색상
                      ),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        Image.network(
                          'https://i.ibb.co/xf2HpfG/dynamite.jpg',
                          width: MediaQuery.of(context).size.width * 0.30,
                        ),
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text("Dynamite"),
                        ),
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text("BTS"),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                          'https://i.ibb.co/xf2HpfG/dynamite.jpg',
                          width: MediaQuery.of(context).size.width * 0.30,
                        ),
                        Text("Dynamite"),
                        Text("BTS"),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                          'https://i.ibb.co/xf2HpfG/dynamite.jpg',
                          width: MediaQuery.of(context).size.width * 0.30,
                        ),
                        Text("Dynamite"),
                        Text("BTS"),
                      ],
                    ),
                  ],
                ),
                SizedBox(
                  height: 10,
                ),
                Row(
                  children: [
                    Text(
                      "글로벌 차트",
                      style: TextStyle(
                        fontSize: 14, // 폰트 크기
                        color: Colors.black, // 폰트 색상
                      ),
                    ),
                    Spacer(),
                    Text(
                      "모두 보기",
                      style: TextStyle(
                        fontSize: 14, // 폰트 크기
                        color: Colors.black, // 폰트 색상
                      ),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        Image.network(
                          'https://i.ibb.co/xf2HpfG/dynamite.jpg',
                          width: MediaQuery.of(context).size.width * 0.30,
                        ),
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text("Dynamite"),
                        ),
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text("BTS"),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                          'https://i.ibb.co/xf2HpfG/dynamite.jpg',
                          width: MediaQuery.of(context).size.width * 0.30,
                        ),
                        Text("Dynamite"),
                        Text("BTS"),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                          'https://i.ibb.co/xf2HpfG/dynamite.jpg',
                          width: MediaQuery.of(context).size.width * 0.30,
                        ),
                        Text("Dynamite"),
                        Text("BTS"),
                      ],
                    ),
                  ],
                ),
                SizedBox(
                  height: 10,
                ),
                Row(
                  children: [
                    Text(
                      "뉴욕 차트",
                      style: TextStyle(
                        fontSize: 14, // 폰트 크기
                        color: Colors.black, // 폰트 색상
                      ),
                    ),
                    Spacer(),
                    Text(
                      "모두 보기",
                      style: TextStyle(
                        fontSize: 14, // 폰트 크기
                        color: Colors.black, // 폰트 색상
                      ),
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Column(
                      children: [
                        Image.network(
                          'https://i.ibb.co/xf2HpfG/dynamite.jpg',
                          width: MediaQuery.of(context).size.width * 0.30,
                        ),
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text("Dynamite"),
                        ),
                        Container(
                          alignment: Alignment.topLeft,
                          child: Text("BTS"),
                        ),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                          'https://i.ibb.co/xf2HpfG/dynamite.jpg',
                          width: MediaQuery.of(context).size.width * 0.30,
                        ),
                        Text("Dynamite"),
                        Text("BTS"),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                          'https://i.ibb.co/xf2HpfG/dynamite.jpg',
                          width: MediaQuery.of(context).size.width * 0.30,
                        ),
                        Text("Dynamite"),
                        Text("BTS"),
                      ],
                    ),
                  ],
                ),
              ]),
            ),
          )
        ],
      ),
    );
  }
}