[3주차] 튜토리얼 영상 #8-#14

이번 3주차는 플러터 튜토리얼 영상 #8-#14를 공부했습니다.

Youtube <Flutter Tutorial for Beginners>

https://www.youtube.com/watch?v=4AoFA19gbLo&list=PLjxrf2q8roU3wk7CDw4RfV3mEwOJbjx1k

 

---

 

#8 - Images & Assets

image 불러오기

network image: 외부에서 이미지 링크로 불러오기

asset image: 소스파일에 저장되어있는 이미지 불러오기

 

Image Widget

-image property: NetworkImage or AssetImage Widget 사용

➡️Image(

image: ~~Image(’경로’),

)

1. NetworkImage

* 모든 코드는 Dart 언어를 사용했습니다

body: Center(
  child: Image(
    image:NetworkImage('이미지 링크'),
  )
),

 

2. AssetImage

root directory에 assets 폴더 만들고 폴더에 이미지 저장

pubspec.yaml 파일 수정

-assets/파일명

-assets/         —> assets 폴더 내 모든 이미지 불러오기

**들여쓰기 정확히 안 하면 오류!!

body: Center(
  child: Image(
    image:AssetImage('이미지 경로'),
  )
),

 

Image Shortcut

Image Widget에서 image property 사용 대신 단축 입력 가능

➡️Image.asset(‘경로’)

➡️Image.network(‘경로’)

 

 

#9 - Buttons & Icons

Icon Widget

➡️ Icon (

Icons.아이콘명,

color, size 등 properties

)

body: Center(
  child: Icon(
    Icons.add_box,
    color: Colors.blue,
	)
)

 

Button Widget

➡️ ~~Button(

onPressed () {

 버튼 누르면 실행할 코드

},

child: ex) Text… ,

style: ButtonStyle(

 foregroundColor, backgroundColor 등 properties

),

)

**style: ButtonStyle을 활용하여 color 등을 지정하는 것으로 바뀜

 

1) RaisedButton —> ElevatedButton: 그림자가 있는 3D 버튼

body: Center(
  child: ElevatedButton(
    onPressed: (){
      print('clicked!'); //console에 출력
    },
    child: Text('New'),
    style: ButtonStyle(
      foregroundColor: MaterialStateProperty.all<Color>(Colors.black),
      backgroundColor: MaterialStateProperty.all<Color>(Colors.amber),
    ),
  ),
),

 

2) 내부에 아이콘이 있는 버튼

➡️ ~~Button.icon(

icon: Icon(

…

),

label: Text(..), //아이콘 옆에 띄울 글씨

onPressed () { 버튼 누르면 실행할 코드 },

...

)

body: Center(
  child: ElevatedButton.icon(
    onPressed: (){
      print('clicked!');
    },
    label: Text('New'),
    style: ButtonStyle(
      foregroundColor: MaterialStateProperty.all<Color>(Colors.black),
      backgroundColor: MaterialStateProperty.all<Color>(Colors.amber),
    ),
    icon: Icon(
      Icons.add_box,
    )
  )
)

 

3) FlatButton —> TextButton: 그림자가 없는 버튼

-위의 코드에서 TextButton으로 변경

 

4) IconButton: 아이콘 자체를 버튼으로 만들기

➡️ IconButton(

icon: Icon( … ),

color 등 properties, //ButtonStyle 쓰지 않고 아이콘처럼 적용 가능

onPressed () { 버튼 누르면 실행할 코드 },

)

body: Center(
  child: IconButton(
    onPressed: (){
      print('clicked!');
    },
    icon:Icon(
      Icons.add_box,
    ),
    color:Colors.blue,
  )
),

—여기까지 basic UI widgets 끝 / 다음은 layout

 

 

#10 - Containers & Padding

Container

다른 widget들을 감싸는 box 같은 개념

-color property: container의 background color

-child property: 내부에 들어갈 widget들을 작성

-margin, padding property

*container는 child widget에 맞춰 크기를 변경

 

margin & padding

padding: container 안쪽 ~ child 사이 공간

margin: container 바깥쪽 공간

-EdgeInsets()로 값을 줌 - padding, margin 값을 설정하는 Widget

EdgeInsets.~~

.symmetric: 가로, 세로끼리 같은 값으로 설정 (대칭)

.fromLTRB: 상하좌우 각각 값 설정

.all : 상하좌우 모두 같은 값으로 설정

body: Container(
  child: Text('Hello'),
  color: Colors.lightBlueAccent,
  padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
  margin: EdgeInsets.all(100),
),

 

Padding Widget

Container 없이 padding 구현 가능

body: Padding(
  child: Text('Hello'),
  padding: EdgeInsets.symmetric(vertical: 50, horizontal: 20),
),

**padding은 따로 구현이 가능하지만 background color와 margin은 Container가 있어야만 구현할 수 있음!

- margin/ 배경색 설정하고 싶다면 Container 쓰기

 

#11 - Rows, #12 - Columns

Row Widget & Column Widget

하나의 Row/Column 안에는 여러 개의 Widgets이 들어감

- child가 아니라 children(list) property 사용하여 내부에 들어갈 위젯 나열

➡️ Row or Column(

mainAxisAlignment: MainAxisAlignment.~~,
crossAxisAlignment: CrossAxisAlignment.~~,
children: [ 안에 들어갈 위젯들... ],
)

 

Alignment

main axis: Row에서는 가로축, Column에서는 세로축

cross axis: Row에서는 세로축, Column에서는 가로축

MainAxisAlignment / CrossAxisAlignment.~~

.spaceBetween: 간격 넓히는데 맨 끝 간격x

.spaceEvenly: 간격 넓히는데 맨 끝도 같은 간격으로

.spaceAround: 간격 넓히는데 맨 끝은 위젯들 간격의 1/2

.stretch: 여백 채워서 늘리기

.start, end, center..

body: Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Text'),
    Container(
      child:Text('Container'),
      color: Colors.amberAccent,
      padding: EdgeInsets.all(20),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.adjust),
      color:Colors.blue,
    ),
    Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        Container(
          color: Colors.green,
          padding: EdgeInsets.all(20),
        ),
        Container(
          color: Colors.indigoAccent,
          padding: EdgeInsets.all(30),
        ),
        Container(
          color: Colors.orange,
          padding: EdgeInsets.all(40),
        )
      ],
    )
  ],
),

 

 

#13 - Flutter Outline & Shortcuts

Shortcuts

위젯 클릭 - 좌측 전구 아이콘 —> 단축키 기능

-아래/위 위젯이랑 자리 바꾸기

-Padding, Center, Row, Column 등으로 감싸기

-상위 위젯 지우고 하위 위젯으로 변경하기

-새 위젯으로 감싸기

...

 

Flutter Outline

위젯트리 한눈에 볼 수 있음

아이콘 - Shortcut 기능

**처음에 안 보이면 아무 위젯에 ctrl+click

 

#14 - Expanded Widgets

Expanded Widget & flex property

Expanded widget으로 감싸면 여백 공간이 없도록 꽉 차게 나타남

-flex property: 숫자로 값 주면 모든 요소들의 값을 더하여 전체 width의 portion을 나누고 각각 그만큼의 비율을 차지

ex) 3, 2, 1을 주면 width를 6개의 portion으로 나누어서 각각 3개, 2개, 1개 공간씩 차지

-사용 예시: screen의 boundary 안에 image를 넣은데 이미지가 너무 커서 잘리고, 다른 요소들을 밀어낼 때

—> Expanded widget & flex 사용!