유튜브 뮤직앱UI 만들기

예제

수업 다 듣고 코드설명과 배운것들 수정하겠습니다..

 

아래는 메인코드

import 'package:flutter/material.dart';

import 'package:youtube_app/MusicTile.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        backgroundColor: Colors.black87,

        appBar: AppBar(

          backgroundColor: Colors.transparent,

          elevation: 0,

          leading: Icon(Icons.arrow_back),

          title: Text(

            '아워리스트',

            style: TextStyle(fontSize: 20, color: Colors.white),

          ),

          actions: [

            Padding(

              padding: const EdgeInsets.all(16),

              child: Icon(Icons.airplay),

            ),

            Padding(

              padding: const EdgeInsets.all(16),

              child: Icon(Icons.search),

            ),

          ],

        ),

        body: ListView(

          children: [

            MusicTile(

                musictitle: 'Come with me',

                singer: 'Surfaces 및 salem ilese',

                imgAssets: 'assets/images/music_come_with_me.png',

                pTime: ' ● 3:00'),

            MusicTile(

                musictitle: 'Good day',

                singer: 'Surfaces',

                imgAssets: 'assets/images/music_good_day.png',

                pTime: ' ● 3:00'),

            MusicTile(

                musictitle: 'Honesty',

                singer: 'Pink Sweat\$',

                imgAssets: 'assets/images/music_honesty.png',

                pTime: ' ● 3:09'),

            MusicTile(

                musictitle: 'I Wish I Missed My Ex',

                singer: '마할리아 버크마',

                imgAssets: 'assets/images/music_i_wish_i_missed_my_ex.png',

                pTime: ' ● 3:24'),

            MusicTile(

                musictitle: 'Plastic Plants',

                singer: '마할리아 버크마',

                imgAssets: 'assets/images/music_plastic_plants.png',

                pTime: ' ● 3:20'),

            MusicTile(

                musictitle: 'Sucker for you',

                singer: '맷 테리',

                imgAssets: 'assets/images/music_sucker_for_you.png',

                pTime: ' ● 3:24'),

            MusicTile(

                musictitle: 'Summer is for falling in love',

                singer: 'Sarah Kang & Eye Love asdfdsfsdf',

                imgAssets:

                    'assets/images/music_summer_is_for_falling_in_love.png',

                pTime: ' ● 3:00'),

            MusicTile(

                musictitle:

                    'These days(feat. Jess Glynne, Macklemore & Dan Caplen)',

                singer: 'Rudimental',

                imgAssets: 'assets/images/music_these_days.png',

                pTime: ' ● 3:00'),

            MusicTile(

                musictitle: 'Zombie Pop',

                singer: 'DRP IAN',

                imgAssets: 'assets/images/music_zombie_pop.png',

                pTime: ' ● 3:00'),

          ],

        ),

        bottomSheet: Container(

            color: Colors.black87,

            child: Container(

              child: Column(

                mainAxisSize: MainAxisSize.min,

                children: [

                  ListTile(

                    leading: Image.asset('assets/images/music_you_make_me.png'),

                    title: Text(

                      'You Make Me',

                      style: TextStyle(color: Colors.white),

                    ),

                    subtitle: Text(

                      'Day6',

                      style: TextStyle(color: Colors.grey),

                    ),

                    trailing: Wrap(

                      spacing: 8,

                      children: [

                        Padding(

                          padding: const EdgeInsets.all(8.0),

                          child: Icon(

                            Icons.arrow_right,

                            color: Colors.white,

                          ),

                        ),

                        Padding(

                          padding: const EdgeInsets.all(8.0),

                          child: Icon(

                            Icons.skip_next,

                            color: Colors.white,

                          ),

                        )

                      ],

                    ),

                  ),

                  Row(

                    children: [

                      Container(

                        width: 30,

                        height: 1,

                        decoration: BoxDecoration(color: Colors.white),

                      ),

                      Expanded(

                        child: Container(

                          height: 1,

                          decoration: BoxDecoration(color: Colors.white54),

                        ),

                      )

                    ],

                  ),

                ],

              ),

            )),

        bottomNavigationBar: BottomNavigationBar(

          backgroundColor: Colors.white10,

          currentIndex: 2,

          items: [

            BottomNavigationBarItem(

                icon: Icon(

                  Icons.home_outlined,

                  color: Colors.white,

                ),

                label: '홈',

                activeIcon: Icon(Icons.home) //선택됐을때의 아이콘

                ),

            BottomNavigationBarItem(

                icon: Icon(

                  Icons.explore_outlined,

                  color: Colors.white,

                ),

                label: '둘러보기',

                activeIcon: Icon(Icons.explore)),

            BottomNavigationBarItem(

                icon: Icon(

                  Icons.library_music_outlined,

                  color: Colors.white,

                ),

                label: '보관함',

                activeIcon: Icon(Icons.library_music)),

          ],

          selectedItemColor: Colors.white,

          unselectedLabelStyle: TextStyle(color: Colors.white),   //이게 선택안됐을때 라벨 색같은데..

        ),

      ),

    );

  }

}

아래가 MusicTile

import 'package:flutter/material.dart';

import 'package:flutter/src/widgets/container.dart';

import 'package:flutter/src/widgets/framework.dart';

class MusicTile extends StatelessWidget {

  const MusicTile(

      {super.key,

      required this.musictitle,

      required this.singer,

      required this.imgAssets,

      required this.pTime});

  final String musictitle;

  final String singer;

  final String imgAssets;

  final String pTime;

  @override

  Widget build(BuildContext context) {

    return ListTile(

      title: Text(

        musictitle,

        style: TextStyle(color: Colors.white),

        maxLines: 2,

      ),

      subtitle: Row(

        crossAxisAlignment: CrossAxisAlignment.start,

        children: [

          Padding(

            padding: const EdgeInsets.only(top: 3),

            child: Icon(

              Icons.check_circle_rounded,

              color: Colors.white,

              size: 15,

            ),

          ),

          Flexible(

            child: Text(

              singer,

              style: TextStyle(color: Colors.grey),

              overflow: TextOverflow.ellipsis,

            ),

          ),

          Text(

            pTime,

            style: TextStyle(color: Colors.grey),

          )

        ],

      ),

      leading: Image.asset(imgAssets),

      trailing: Icon(

        Icons.more_vert,

        color: Colors.white,

      ),

    );

  }

}

실행결과