Flutter - 위젯

세팅중에 fultter doctor 을 해도 

zsh: command not found: fultter

 

다음같은 에러가 떴는데

 

source ~/.zshrc

다음 명령어를 치니깐 해결 되었다 

이유는 모른다

 

위젯

 

위젯은 크게 4개로 나뉜다. 

 

글자 넣고 싶으면 

MaterialApp(
	home: Text('안녕')
)

아이콘은

 

MaterialApp(
	home: Icon(Icons.star)
)

 

이미지는

 

이미지를 넣어줄 assets 파일을 만들어주고

pubspec.yaml 파일을 찾아 assets 파일을 등록 해주어야 한다. 

 

*pubspec.yaml 파일 : 앱 만드는데 필요한 라이브러리들을 기록하는 파일

 

flutter: 
  assets: 
    - assets/

flutter 를 찾아 등록해준다 (들여쓰기 잘맞추기)

그럼 이 폴더에 있는 이미지들 전부 사용 가능하다. 

 

 

MaterialApp(
       home: Image.asset('peachs.jpeg')

 )

 

크롬으로 실행시켜 이미지를 하나 넣어 보았다. 

 

 

네모 박스 넣고 싶을때는 

 

MaterialApp(
  home: Container()
)

이 위젯을 기본으로 크기와 색상 파라미터를 이용하면 된다.

 

MaterialApp(
  home: Container(width : 50, height : 50, color: Colors.blue)
)

하지만 이렇게 넣으면 어디서 부터 크기를 그려야할지 모르기 때문에 그냥 화면에 꽉차게 표시한다.

그래서 Center()위젯을 이용해 가운데에 상자를 그려보았다.

 

MaterialApp(
  home: Center( 
    child: Container(width : 50, height : 50, color: Colors.blue) 
  )
)

센터 위젯에 자식 위젯인 Container 위치를 중앙에서 부터 잡아준다

 

 

이렇게 위젯안에 위젯을 넣어 줄 수 있다.

MaterialApp(
     home: Center(
           child:Container( width: 50, height: 50, color: Colors.blue,child: Text('Hi'))
       )
       
     //박스 위젯에 추가로 Text 위젯을 넣어 보았다

 

 

넓이와 높이 단위)

 

앞에서 파라미터에 입력할때 단위없이 그냥 50, 50 이렇게 입력했다.

Fultter 모든 단위는 LP(Logical Pixel)을 사용한다.

px을 쓰지 않는 이유는 기기마다 px의 절대적인 값이 다르기때문이다. 

10*10cm^2 화면 100개의 px이 있을 수도 있고 10000개의 px이 있을 수 있기 때문

 

절대적인 값이다. 

1cm => 38LP