Map 데이터 타입

[name27]

var myInfo = {
 "name" : "Teddy",
 "height" : 199.9,
 "age" : 99,
 "phone" : "010-1000-2000",
};
print(myInfo["name"]);

var myFriends = [
 {
   "phone" : "010-1000-2000",
   "name" : "이테디",
   "category" : "동네친구",
 },
 {
   "phone" : "010-1000-2000",
   "name" : "크리스",
   "category" : "회사동료",
 },
 {
   "phone" : "010-1000-2000",
   "name" : "주노",
   "category" : "회사동료",
 },
]
print(myFriends[2]["phone"]);
myFriends.map((e)=>Text(e['name'])).toList()

[name27]

Main.dart

// ignore_for_file: prefer_const_constructors
// ignore_for_file: prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
import 'package:new_project_youtube_music_app/MusicTile.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    List<Map<String, dynamic>> playList = [
      {
        "title": "Music",
        "artist": "코난그레이",
        "albumImg": "https://picsum.photos/150/150",
        "duration": Duration(minutes: 3, seconds: 14),
      },
      {
        "title": "Music",
        "artist": "코난그레이",
        "albumImg": "https://picsum.photos/150/150",
        "duration": Duration(minutes: 3, seconds: 14),
      },
      {
        "title": "Music",
        "artist": "코난그레이",
        "albumImg": "https://picsum.photos/150/150",
        "duration": Duration(minutes: 3, seconds: 14),
      },
    ];
    return MaterialApp(
      theme: ThemeData.from(colorScheme: ColorScheme.dark()),
      debugShowCheckedModeBanner: false, //debug 배너 제거
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          leading: Icon(Icons.arrow_back_ios),
          title: Text('아워리스트'),
          backgroundColor: Colors.transparent,
          elevation: 0,
          actions: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(Icons.desktop_windows_rounded),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Icon(Icons.search),
            )
          ],
          shape: Border(bottom: BorderSide(color: Colors.grey, width: 1)),
        ),
        body: ListView.builder(
          itemCount: playList.length,
          itemBuilder: (context, index) => MusicTile(
              imgUrl: playList[index]['albumImg'],
              title:  playList[index]['title'],
              name:  playList[index]['artist'],
              playTime:  playList[index]['duration'].toString(),
          ),
        ),
        bottomSheet: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              color: Colors.grey[850],
              height: 80,
              child: ListTile(
                leading: ClipRRect(
                  borderRadius: BorderRadius.circular(12),
                  child: Image.asset(
                    'assets/music_you_make_me.png',
                    width: 55,
                    height: 55,
                  ),
                ),
                title: Text(
                  'You Make Me',
                  maxLines: 2,
                ),
                subtitle: Text(
                  'DAY6',
                  maxLines: 1,
                ),
                trailing: Row(mainAxisSize: MainAxisSize.min, children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Icon(
                      Icons.play_arrow,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Icon(
                      Icons.skip_next,
                    ),
                  ),
                ]),
                // trailing: Wrap(
                //   children: [
                //     Icon(
                //       Icons.play_arrow,
                //     ),
                //     SizedBox(
                //       width: 8,
                //     ),
                //     Icon(
                //       Icons.skip_next,
                //     ),
                //   ],
                // ),
              ),
            ),
            Container(
              height: 1,
              alignment: Alignment.centerLeft,
              child: Container(
                width: 120,
                color: Colors.white,
              ),
            ),
          ],
        ),
        bottomNavigationBar: BottomNavigationBar(
            selectedItemColor: Colors.white,
            currentIndex: 2,
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
              BottomNavigationBarItem(icon: Icon(Icons.search), label: '둘러보기'),
              BottomNavigationBarItem(
                  icon: Icon(Icons.library_music), label: '보관함'),
            ]),
      ),
    );
  }
}

MusicTile.dart

// ignore_for_file: prefer_const_constructors
// ignore_for_file: prefer_const_literals_to_create_immutables

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.imgUrl,
      required this.title,
      required this.name,
      required this.playTime});
  final String imgUrl;
  final String title;
  final String name;
  final String playTime;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListTile(
        leading: ClipRRect(
          borderRadius: BorderRadius.circular(12),
          child: Image.network(
            imgUrl,
            width: 55,
            height: 55,
          ),
        ),
        title: Text(
          title,
          maxLines: 2,
        ),
        subtitle: Row(
          children: [
            Icon(
              Icons.check_circle,
              size: 18,
            ),
            SizedBox(
              width: 5,
            ),
            Flexible(
                child: Text(
              name,
              overflow: TextOverflow.ellipsis,
            )),
            SizedBox(
              width: 5,
            ),
            Icon(
              Icons.circle,
              size: 3.5,
            ),
            SizedBox(
              width: 5,
            ),
            Text(
              playTime,
            )
          ],
        ),
        trailing: Icon(
          Icons.more_vert,
          color: Colors.white,
        ),
      ),
    );
  }
}