2일

19강. Column Widget과 Row Widget

Column 위젯

• 세로로 위젯을 나열할 때 사용
• 자식'들'을 가질 수 있는 위젯(children)
• 속성 : children에 데이터타입이 List<Widget>인 것만 넣어줄 수 있다

Column(
	children : [
    	Text('Widget:1'),
        Text('Widget:2'),
    ]
)

List안에서 데이터를 구분할 때 ,로 구분함따라서, 위젯도 ,로 구분

Row 위젯

• 가로로 위젯을 나열할 때 사용
• 자식'들'을 가질 수 있는 위젯(children)
• 속성 : children에 데이터타입이 List<Widget>인 것만 넣어줄 수 있다

Row(
	children[
    	Text('Widget:1'),
        Text('Widget:2'),
    ]
)

20강. ListTile Widget과 Padding Widget

ListTitle 위젯

속성 : title에는 Widget 데이터만 들어갈 수 있다

속성 : subtitle에는 Widget데이터만 들어갈 수 있다

ListTitle(
	title: Text('이테디'),
    subtitle : Text('010-1234-5678')
)

속성또한 여러가지 들어갈 때 ,로 구분해주기

보너스 속성 : leading에는 앞에 위젯을 두고 싶을 때

보너스 속성 : trailing에는 뒤에 위젯을 두고 싶을 때

Padding 위젯

자식에게 패딩(간격)을 원하는 만큼 띄우고 싶을 때 사용

Padding위젯을 사용하여 간격을 줄 수 있다

속성 : child에는 WIdget 데이터만 들어갈 수 있다

속성 : Padding에는 Edgelnsets 데이터만 들어갈 수 있다

Padding(
	padding : EdgeInsets.all(8),
    child : Text('이테디'),
)

21강. Widget의 속성값

위젯의 속성

위젯마다 각각 원하는 설정을 할 수 있는 특수한 값들

위젯마다 사용할 수 있는 속성이 다르다

"일반적으로" 자식위젯 사용시 child 속성이름값을 사용한다

속성마다 들어갈 수 있는 데이터 타입이 정해져 있다

22강. SizedBox Widget과 Container Widget

SizedBox 위젯

자식위젯에게 사용할 수 있는 공간(크기)를 정해줄 때

속성 : height에는 double, int 값을 줄 수 있음

속성 : width에는 double, int 값을 줄 수 있음

SizedBox(
	width: 300,
    height: 300,
    child : Text('이테디'),
)

 

 

Container 위젯

자식위젯에게 사용할 수 있는 공간(크기)를 정해줄 때

예쁘게 내 자식을 포장해서 보여주고 싶을 때(색상넣기, 둥글게 하기, 그림자 넣기 등)

Container(
	width:300,
    height:300,
    child:Text('이테디'),
    color:Colors.red,		//색상넣기
    
    //데코레이션1
    decoration : BoxDecoration()	
   
    //데코레이션2
   
    decoration : BoxDecoration(
    	color:Colors.red
    )
    
    //데코레이션3
    decoration : BoxDecoration(
    	color : Colors.red,
        border:Border.all()
    )
    
    //데코레이션4
    decoration : BoxDecoration(
    	color : Colors.red,
        borderRadius:BorderRadius.circular(16)
    )
    
    //데코레이션5
    decoration : BoxDecoration(
    	color : Colors.red,
        borderRadius:BorderRadius.circular(16),
        gradient: LinearGradient(
        	begin:Alignment.topLeft,
            end:Alignment.bottomRight, 
            Color: (
            	Colors:blue,
                Colurs.red,
            ),
        ),
    )
)

    //데코레이션
    decoration : BoxDecoration(
    	color : Colors.red,
        borderRadius:BorderRadius.circular(16),
        boxShadow : (
        	BoxShadow(
            	color: Colors.grey,
                spreadRadius:5,
                blurRadius:7.
                offset:Offset(0,3).
            ),
        ),
    )
)

23강. Image.network

Image.network 위젯

이미지를 사용할 때, .network를 붙이게되면 네트워크의 데이터를 사용함

우리가 사용하는 '웹';에서는 수많은 네트워크 이미지가 있음

브라우저에서 이미지 웹주소를 하나 가져온다

Image.network('http://~~~~')

Url주소는 String데이터 타입

24강. Flutter 폴더구조와 pubspec.yaml에 대하여

플러터 폴더구조

플러터 프로젝트 생성시 자동으로 생성되는 폴더들

빌드란? 개발된 프로젝트를 실행가능한 프로그램으로 변환하는 작어

각 플랫폼마다 사용하는 전용 폴더가 있고, 해당 폴더에서 빌드가 이루어진다

lib:코드/소스가 작업되는 장소

pubspec.yaml:프로젝트가 사용하는 이미지, 폰트, 패키지 등의 자원들을 등록하는 역할

pubspec.yaml

플러터 프로젝트 생성시 자동으로 생성되는 중요한 파일 중 하나

프로젝트가 사용하는 이미지, 폰트, 패키지 등의 자원들을 등록하는 역할

네트워크가 아닌 장치에 저장돼있는 이미지를 사용한다면 등록과정이 반드시 필요함

작업할 때 다른 사람의 작업물 코드(패키지)또한 필요한 상황이 오게 됨

패키지 의존성 관리 역할

25강. Image.asset

플러터의 이미지 위젯

플러터에서 이미지를 표현하는 위젯들의 종류

• Image.network : 네트워크에서 이미지를 가져온다
• Image.asset : 내 저장소에서 이미지를 가져온다
• Image.memory, Image.file

Image.asset

pubspec.yaml에 등록되어 있는 이미지를 사용할 때 사용하는 위젯

경로마다 폴더를 만들고, 이미지 파일을 하나씩 등록해주는 것

pubspec.yaml에 이미지 경로 등록->이미지 경로에 이미지 준비->새로고침->Image.asset

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

Image.asset이랑 Image.network 둘 중 뭐가 더 좋은가

상황마다 다름

1.네트워크가 없는 상황

2.인터넷을 통해서 이미지를 보여줘야하는 상황

26강. 연락처 앱 기반 만들기

연락처 앱 기반 작성

1. 연락처에 저장될 친구들은 총 5명으로, 이름과 번호는 다음과 같다.

- 이테디, 010-1000-2000

- 김스틴, 010-9000-8000

- 이주노, 010-3000-3000

- 임헬렌, 010-2000-8000

- 염해리, 010-1000-1000

 

2. 이미지는 네트워크로 (CDN 방식으로) 아래 URL에 랜덤이미지를 사용하세요.

- https://picsum.photos/100/100

 

- 사용한 위젯은 다음과 같다. (다른위젯사용가능)

- Text, ListTile, Icon, Column, ???...

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body:SafeArea(
          child:Column(
            children: [
              ListTile(
                title:Text('이테디'),
                subtitle: Text('010-1000-2000'),
                trailing : Icon(Icons.call),
                leading: Container(
                  decoration: BoxDecoration(
                    shape:BoxShape.circle,
                  ),
                  clipBehavior : Clip.antiAlias,
                    child:Image.network('https://picsum.photos/100/100'),
                ),
              ),
              ListTile(
                title:Text('김스틴'),
                subtitle: Text('010-9000-8000'),
                trailing : Icon(Icons.call),
                leading: Container(
                decoration: BoxDecoration(
                  shape:BoxShape.circle,
                ),
                clipBehavior : Clip.antiAlias,
                child:Image.network('https://picsum.photos/100/100'),
              ),
              ),
              ListTile(
                title:Text('이주노'),
                subtitle: Text('010-3000-3000'),
                trailing : Icon(Icons.call),
                leading: Container(
                  decoration: BoxDecoration(
                    shape:BoxShape.circle,
                  ),
                  clipBehavior : Clip.antiAlias,
                  child:Image.network('https://picsum.photos/100/100'),
                ),
              ),
              ListTile(
                title:Text('임헬렌'),
                subtitle: Text('010-2000-8000'),
                trailing : Icon(Icons.call),
                leading: Container(
                decoration: BoxDecoration(
                shape:BoxShape.circle,
                ),
                clipBehavior : Clip.antiAlias,
                child:Image.network('https://picsum.photos/100/100'),
                ),
                ),
              ListTile(
                title:Text('염해리'),
                subtitle: Text('010-1000-1000'),
                trailing : Icon(Icons.call),
                leading: Container(
                  decoration: BoxDecoration(
                    shape:BoxShape.circle,
                  ),
                  clipBehavior : Clip.antiAlias,
                  child:Image.network('https://picsum.photos/100/100'),
                ),
                ),
            ],
          )
        )
      ),
    );
  }
}

27강. ListView Widget

 Column,Row에는 기본적으로 스크롤 기능이 없다

 ListView는 기본적으로 스크롤 기능이 장착되어 있는 위젯

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

28강. SingleChildScrollView Widget

로렘입숨? 쓸데없는 더미 텍스트

한글 로렘입숨 생성기 : http://hangul.thefron.me/ 

영문 로렘입숨 생성기 : https://poremipsum.io/generetor/n=2&t=s 

 

자식객체에 스크롤 기능을 만들어줌

ListView는 children으로 다수의 위젯(List<Widget>)을 제공해야한다

SingleChildScrollView는 단일 위젯 자식에게 스크롤을 제공가능

속성 : scrollDirection으로 ListView와 동일하게 방향을 설정가능

29강. PageView Widget

PageView(
	children: [
    	Text("1번 페이지"),
    ]
)

 

 

 

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