UI 만들기 - 텍스트,이미지,아이콘 넣기

 

메인함수에서 void는 아무것도 반환하지 않는다는 의미로 string으로 입력하게 되면, 리턴값으로 스트링 형태를 반환해줘야지 정상적으로 실행 가능함

그리고 앱 실행을 위해서 플러터의 runApp 함수를 불러와줌 얘는 아무것도 반환하지 않으므로 void 임

 

stless라고 입력하면 기본적인 형태를 만들 수 있음

statelessWidget이란 말 그대로 상태변화가 없다는 의미

 

클래스 첫번째 줄은 클래스의 생성자를 정의하는 부분

Widget build 메서드는 앱이 화면이 어떻게 보일지 위젯을 정의하는 역할을 함

구글에서 제공하는 가이드로 개발하기 위해서 MaterialApp을 리턴해줌

MaterialApp은 (처음 시작하는 화면)홈 속성을 가지고 있는데 

홈 화면에서 레이아웃 구성을 만들기 위해서 Scaffold라는 위젯을 가져오고 저장함

 

+ 관련 코드에 물결 표시가 뜨면 analysis_options.yaml 에서 rules: 부분에 아래 코드를 추가한다 

prefer_const_constructors: false
prefer_final_fields: false
use_key_in_widget_constructors: false
prefer_const_literals_to_create_immutables: false
prefer_const_constructors_in_immutables: false
avoid_print: false

 

먼저 appBar를 만들어 본다

 

title은 기본 위젯이라고 텍스트 해놓고 백그라운드 색은 블루로 함

이렇게 수정하고 바로바로 확인할 수 있는 이건 flutter의 Hot reload라는 기능이다

 

body는 가운데 부분이라고 생각하면 되고 바디에 텍스트,이미지,아이콘 위젯을 만들어볼 것이다

Center에는 child라는 속성이 있는데 이는 위젯을 한 개만 넣을 수 있다는 의미고 여러개 넣으려면 children이라는 속성을 사용해야함

텍스트 꾸미기는 Text 괄호 안에 TextStyle을 넣어주고 폰트 사이즈랑 배경색까지 지정해줬다

 

폰트를 바꾸고 싶다면, 프로젝트에서 fonts 라는 폴더를 만들어주고 ttf 파일을 넣어준다

 

이 폰트를 사용하기 위해서는 pubspec.yaml 에서 fonts라고 검색해서 해당 부분을 찾은 뒤에

주석처리가 되어있으므로 cmd + / 를 눌러서 없애줌 그리고 들여쓰기 위치도 확인해줌

속성을 봐보면 family는 폰트의 이름을 지정해주는 부분이다.

나는 Pretendard 라는 폰트를 사용할 것이므로 Pretendard 라고 변경해주고,

asset 에는 폰트의 경로를 넣어주면 된다

 

그리고나서 다시 텍스트 스타일 속성에 들어가서 fontFamily: 에 지정해줬던 폰트 이름을 넣어주면

 

이렇게 폰트가 적용된 것을 확인할 수 있다

 

다음으로는 이미지 위젯을 알아볼 것이다

앞서 말했듯 child 속성은 위젯을 하나만 가질 수 있으므로 위에서 작성한 Text 위젯을 지운다

Image. 해보면 이미지를 가져오는 4가지의 방식(asset, network, file, memory)이 있는데

먼저 네트워크를 살펴보면, 말 그대로 url에서 이미지를 가져오는 방법이다

 

asset의 경우는 폰트와 동일하게 images 폴더를 하나 만들고, 원하는 이미지를 넣으면 된다 

이때 깜빡하지 말것은 pubspec.yaml 가서 assets: 부분에 이미지를 추가하는 것!

 

이제 아이콘 위젯을 알아보자

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

 

 

여기에 들어가보면 아이콘을 확인할 수 있는데, 만약에 내가 저 Favorite 아이콘을 넣고 싶다 하면

Icon(Icons.favorite) 이렇게 해주면 바로 하트 아이콘이 생성된 것을 확인할 수 있다

size와 color 속성을 이용해서 변경해줄 수도 있다