FLUTTER

1. main.dart에 작성

lib 폴더 안에 있는 main.dart가 flutter의 메인 파일입니다.

![](<https://velog.velcdn.com/images/ryukyungwoo1220/post/1d053f27-c1a7-4c22-9da8-92ff57ec2770/image.png>)

1. lint 끄기
2. 

• prefer_typing_uninitialized_variables: 초기화되지 않은 변수에 타입을 명시적으로 선언하도록 권장하는 룰입니다. 이 규칙을 비활성화(false)하면 타입을 명시하지 않아도 경고를 받지 않습니다.
• prefer_const_constructors_in_immutables: 불변 객체에서 가능한 경우 const 생성자를 사용하도록 권장하는 룰입니다. 이 규칙을 비활성화하면 const 생성자를 사용하지 않아도 됩니다.
• prefer_const_constructors: 가능한 모든 곳에서 const 생성자를 사용하도록 권장하는 룰입니다.
• avoid_print: 코드에서 print() 함수 사용을 피하도록 권장하는 룰입니다. 로깅 목적으로 print()의 사용을 피하라는 것이 일반적인 코딩 표준입니다. 이 규칙을 비활성화하면 print() 사용에 대한 경고가 발생하지 않습니다.

1. main 빼고 다 지우고 stless 입력해줍니다.

그 후에 클래스 명을 runApp 안에 있는 const에 맞춰 주시면 됩니다.

![](<https://velog.velcdn.com/images/ryukyungwoo1220/post/dcbbc2bc-139a-4c80-8589-0c2212ee0a3b/image.png>)

![](<https://velog.velcdn.com/images/ryukyungwoo1220/post/08e22388-2a84-4924-91f5-6fc36a0e1a0a/image.png>)

1. build 안에 있는 PlaceHolder()를 MaterialApp()으로 변경 후 그 안에 위젯을 생성해줍니다.

MaterialApp()은 Material Design을 구현하는 어플리케이션의 루트 위젯으로 사용됩니다. 네비게이션, 테마, 홈화면 등의 기능을 갖추고 있습니다.

![](<https://velog.velcdn.com/images/ryukyungwoo1220/post/fe0ef1a6-4fe1-4d67-9309-d1c86d4d8b4d/image.png>)

1. MaterialApp() 안의 home 속성에 홈 화면에서 보여줄 위젯을 넣어줍니다.

잘 나오는 것을 볼 수 있습니다.

![](<https://velog.velcdn.com/images/ryukyungwoo1220/post/24845336-ab15-431f-832d-95bbab079fb2/image.png>)

![](<https://velog.velcdn.com/images/ryukyungwoo1220/post/6c83ca4a-c996-4dcf-8660-5afde16bbbed/image.png>)

5-1. 결과물을 크롬에서 보려면 여기를 선택해주고 run 하시면 됩니다.

1. 사진을 넣고싶다면 lib이랑 동일한 계층에 assets 폴더를 만들고 pubspec.yaml파일의 flutter의 하위에 asserts의 폴더 위치를 정의해주시면 됩니다.
2. 
3. 그리고 Image 위젯을 사용해서 assets 하위의 파일명을 정의해주시면 됩니다.
4. 
5. 아이콘을 쓰고 싶다면 Icon()위젯을 사용하시면 됩니다.
6. 
7. 상자를 만들고 싶다면 Container 위젯을 사용하시면 됩니다.

그런데 상자가 예상보다 크게 나옵니다. 그 이유는 상자가 어디에 위치해 있는지 지정해주지 않아서 그런데요

Center라는 위치를 정해주고 거기에 child로 container를 넣으면 제대로 나오는 것을 볼 수 있습니다.

![](<https://velog.velcdn.com/images/ryukyungwoo1220/post/87279037-0b4e-43af-81f7-393ade7a2336/image.png>)

![](<https://velog.velcdn.com/images/ryukyungwoo1220/post/601bcad2-8554-45ed-a9fb-77b19e23534b/image.png>)

출처 : https://www.youtube.com/watch?v=mLQ-ehf3d6Y&list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C&index=2