FLUTTER #2 Dicee & Dart

Hot Reload 

코딩과 동시에 화면이 변경되는 기능

stateless 위젯 안 return에 MaterialApp을 넣으면 순식간에 수정가능해져서 결과 출력이 훨씬 빨라짐

 

Container Widget

사각형의 시각적요소를 만들어줌(배경, 테두리, 그림자, 패딩, 여백, 행렬사용 가능)

Container 위젯에서는 children이 없으면 무한대로 커지게된다.

- alt + enter → wrap with widget

 

Safe Area

위젯이름을 SafeArea를 입력하면 appbar밑에 컨테이너가 생긴다.

 

Margin

• margin 컨테이너의 여백 margin : EdgeInsets.all(20,20) 모든 상하좌우의 여백을 20으로 함 margin:
• EdgeInsets.symmetric(vertical:50.0,horizontal:10.0) top,bottom을 나타냄
• EdgeInsets.fromLTRB(30.0,10.0,50.0,20.0) 순서대로 left, top, right, bottom의 여백을 나타냄
• EdgeInsets.only(left:30.0) 특정한 몇부분만 여백을 주고 싶을 때 사용(여러개도 가능) 선택적용

Column & Row

수평으로 배치(Row), 수직으로 배치(column)

• MainAxisAlignment - row, column 정렬
• MainAxisAlignment : MainAxisSize.min 컨테이너가 꽉차게 배치
• MainAxisAlignment : MainAxisSize.start 컨테이너가 왼쪽상부에 위치
• MainAxisAlignment : MainAxisSize.end 왼쪽 하부에 위치
• MainAxisAlignment : MainAxisSize.center 왼쪽 중앙에 위치
• MainAxisAlignment : MainAxisSize.spaceEvenly 컨테이너간의 간격이 고르게 위치함

crossAxisAlignment : CrossAxisAlignment.end → 컨테이너 중 크기가 다른것의 끝을 맞춤

crossAxisAlignment : CrossAxisAlignment.end → 컨테이너 중 크기가 다른것의 끝을 맞춤

 

* ctrl + q : 쓸 수 있는 child를 소개

 

폰트 바꾸기

https://flutter.io/custom-fonts/#from-packages 참고

fonts.google.com 에서 폰트 다운

상업적 폰트 다운 : https://noonnu.cc/about

directory 새로 만들어서 폰트 그 폴더에 삽입 pubspec.yaml에

//pubspec.yaml
fonts:
-family: Pacifico
 fonts:
 - assets : fonts/Pacifico-Regulat.ttf
//main.dart
Text('Minjoo Park', style : TextStyle(
fontFamily : 'Pacifico',
fontSize : 40.0,
color : Colors.white,
fontWeight : FontWeight.bold,
),
),

메인함수에 가서 Text안에 style: TextStyle(fontfamily: 'Pacifico')

 

이미지 삽입

// before
image: AssetImage('images/urbanbrush-20190125013748099992.png')
//After
child: Image.asset('images/dice1.png')

Icon Class

Icon(Icons.add_shopping_cart) //쇼핑카트 모양 아이콘 넣기

 

위젯을 센터로 보내는 방법

Sol 1) Center(

           child : Row( ....

Sol 2) Row에 커서를 놓고 Flutter Online - Center Widget 클릭

 

Random Number

$leftDiceNumber ⇒ String Interpolation(문자열 보간)

코드 상단에 import 'dart:math' 입력

leftDiceNumber = Random().nextint(int max)//여기서 max는 범위에 포함하지 않음.
//1~6까지의 랜덤숫자를 표시
Random().nextint(int 6) + 1;

 

Dart : Statically Typed Language

Variable - Type Safe Language

Data Type

• String
• bool-True, False

변수선언

var ____; //dynamic으로 사용
dynamic c = _____; //아무거나 변수로 사용가능

다트는 statically typed language이지만, dynamic으로 사용하면 동적으로 사용가능

 

Stateful/Stateless

stateless는 상태를 가지지 않음, 변하지 않음 예를 들면 박물관 같은거를 생각해 보시면 박물관에 가면 각자 자리에 작품들이 있고 그 작품을 만져서는 안되고 보기만 해야합니다. 그리고 각각의 작품들은 항상 그자리에 위치하고 있어야 한다. 이런 상황에 쓰이는게 Stateless Widget stateful는 상태를 가짐, 변할 수 있음 ⇒ stful(shortcut) setState()는 안에 변동된 사항으로 hot reload 했을 때, 재빌드할 수 있도록 함 - data has changed stateless 위젯은 그냥 extends 해서 사용하면 되지만 stateful 위젯은 상속도 받고 변수에 할당된 값을 바꿔준다거나 이미지가 바뀐다던가 등 의 상태를 바꿔줄 소스들을 setState 메서드 안에 넣어줘야함