[유데미x스나이퍼팩토리] 9주 완성! 프로젝트 캠프: 플러터 강의 - 3일차 과제

Image.network 

• 이미지를 사용할 때, network를 붙이게 되면 네트워크의 데이터를 사용함
• 우리가 사용하는 '웹'에는 수많은 네트워크 이미지가 있음
• 브라우저에서 이미지 웹주소를 하나 가져온다.(CDN 방식으로 많이 쓰이기 때문)
• URL 주소는 String 데이터 타입으로 전달한다.

Image.network('https://sniperfactory.com/img/flutter/result.png')

Image.asset 

• pubspec.yaml에 등록돼있는 이미지를 사용할 때 사용하는 위젯
• pubspec.yaml에 이미지를 등록하고 사용하는 방법
  1. 주석을 해제한다. (들여쓰기가 정확해야 한다)
  2. 이미지 경로에 이미지를 준비하고 새로고침 후 사용한다.

  assets:
    - assets/images/lalaland.jpeg

Image.asset('assets/images/lalaland/jpg')

Image.asset VS Image.network

• 네트워크가 없는 상황에는 Image.asset을 사용한다. 네트워크에 연결 되어 있지 않아도 장치 내부에 있기 때문에.
• 인터넷을 통해서 이미지를 보여줘야 하는 상황에는 Image.network를 사용한다. 서버에서 받아와야 하기 때문에.
• Tip) 디자이너가 작업해준 Icon, 어플 필수 이미지(로고), 등은 Image.asset을 사용한다.

ListTile 위젯

• 구글 머터리얼디자인의 ListTile을 표현하기 위한, 디자인된 위젯
• 속성 title, subtitle에는 Widget 데이터만 들어갈 수 있다.
• leading은 앞에 위젯을 두고 싶을 때, trailing은 뒤에 위젯을 두고 싶을 때

ListTile(
	title: Text('신쥬디'),
	subtitle: Text('010-1234-5678')
    )

ListView 위젯

• ListView는 기본적으로 스크롤 기능이 장착돼있는 위젯이다.
• scrollDirection속성을 Axis.horizontal로 하면 가로로 스크롤이 가능하다.(Default값은 세로)

ListView(
	children: [
    	Text('안녕.. 나는'),
        Text('Column이랑'),
        Text('Row랑'),
        Text('사용법이 같아'),
    ]
)

BottomNavigationBar 위젯

• 앱들의 스크린 네비게이션이 되며 화면 맨 아래에 위치한다
• 위젯이지만 Scaffold에 바로 넣어서 사용한다
• 필수 속성값은 items이고 List<BottomNavigationBarItem> 데이터 타입을 준다
• items에 제공되는 List의 length는 2보다 많아야 한다.
• type속성에 BottomNavigationBarType.fixed를 주면 3개보다 많이 넣을 수 있다.

bottomNavigationBar: BottomNavigationBar(
	type: BottomNavigationBarType.fixed,
	items: [
    	BottomNavigationBarItem(
        	icon: Icon(Icons.home),
            ),
        BottomNavigationBarItem(
        	icon: Icon(Icons.search),
            ),
        ]
    )

과제 요구사항💻

1. 음악명은 최대 2줄까지만 가능하다.
2. 가수명과 플레이시간은 최대 1줄까지만 가능하며 필요한 경우 가수명을 줄인다.
3. 음악의 정보를 보여주는 위젯을 만들고, 이름은 MusicTile로 한다.

 

💙결과 및 후기💙

• MaterialApp 의 속성에 theme: ThemeData.from(colorScheme: ColorScheme.dark(),), 를 넣으면 다크테마를 사용할 수 있다.
• 나는 검색창 아래에 devider로 선 그었는데 appBar에 borderside 를 bottom 넣으셨다.
• ListTile로 구현하면 훨씬 쉽게 할 수 있었다.
• Text 속성을 maxline: 2, TextOverflow.ellipsis주면 ... 으로 표시된다.
• 재생라인은 Container 2개를 height를 1로 주고 만드셨다.
• Row, Column은 확장하려는 속성이 있다.  
• ListTile의 trailing에 원래 하나의 아이콘만 들어가는데, Row로 아이콘들을 감싸서 mainAxisSize를 min으로 바꿔주면 더 넣을 수 있다.

 

본 후기는 유데미-스나이퍼팩토리 9주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#유데미 #udemy #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #웹개발 #앱개발 #플러터 #flutter #개발 #안드로이드 #ios #단기캠프