Flutter Study #2

Container와 Column / Row 비교

Flutter를 공부하다 보니 Widget 중에 Container와 Column, Row과 있고 이들의 특성을 지금 정리해두어야 나중에 안 헷갈릴거 같다.

Container

• 1개의 Child Widget만 가질 수 있다.
• 다양하고 쓸만한 정렬 및 스타일 옵션들이 있다.
• Width 조절이 유연하다.
• 직접 style & 정렬을 Custom 하기에 사용하기 적합.

Column / Row

• 다수의 Child Widget을 가질 수 있다.
• 정렬은 가능한데 스타일은 지정이 불가하다.
• 항상 Full Height Column / Full Width Row 이다.
• Widget들이 바로 옆에 위치하거나, 또는 위아래로 있거나 할때 무조건적으로 사용해야함.

그렇다고 이들이 서로를 대체할 수 있는 것은 아니고 이들을 적절히 조합해서 사용할 수 있기때문에

특성만 알아두고 적재적소에 사용하여 이쁘게 만들면 된다.

특수문자를 변수 앞에 넣고 싶으면

\를 이용한다

Example

'\$${tx.amount}'

아래 처럼 됨

pub.dev/packages/intl

intl | Dart Package

intl -> internationalise

dependencies:
  intl: ^0.17.0

pubspec.yaml에 추가한다

추가한 모습

flutter와 같은 level에 해야지 안그러면 문제가 생김

Make sure check out the flutter SDK Version

Date가 이상하게 나오니 intl안에 있는 DateFormat().format(tx.date)를 사용하여 자동으로 String으로 바꾸주고,

날짜도 훨씬 보기 좋은 스타일로 수정이 되었다.

수정 전

수정 후

DateFormat('yyyy-MM-dd').format(tx.date)으로 date pattern을 수정할 수 있다.

yyyy-MM-dd

대소문자 구분하여야 함. Reference에 구분하라함

DateFormat('yyyy/MM/dd').format(tx.date) /를 이용하면

yyyy/MM/dd

위와 같이 /를 이용해서도 가능

DateFormat.yMMMMd().format(tx.date) 요렇게 하면

위와 같이도 가능. 다양한 패턴들이 있으니 시도해보면 좋을 듯..

Official Document 발췌