[Flutter] 위젯 만들기

 목차

1. 위젯 만들기
   1. 기본 구성
   2. 글자 위젯
   3. 이미지 위젯
   4. 아이콘 위젯
   5. 박스 위젯

 

 

 

✅ 위젯 만들기

 

1️⃣ 기본 구성
* 위젯 : 첫 문자를 대문자로 하고, 괄호를 사용

1. 기본 구성

 

 

2️⃣ 글자 위젯

• Text('작성할 내용')

2. 글자 위젯 : Text('작성할 내용')

 

3️⃣ 아이콘 위젯

• Icon(Icons.아이콘 이름)
  * 아이콘 이름은 플러터 홈페이지에서 확인 가능

3. 아이콘 위젯 : Icon(Icons.아이콘 이름)

 

4️⃣ 이미지 위젯

• Image.asset('경로')
  • 이미지 담아둘 폴더 생성 : 프로젝트 우클릭 > New > Directory > 폴더명 입력
  • 이미지 등록 : pubspec.yaml > "flutter:" 라고 씌어진 코드 하단에 이미지 등록 코드 작성 ('assets: ....')
  • 이미지 위젯 : Image.asset('경로')

4-1. 이미지 담아둘 폴더 생성 : 프로젝트 우클릭 > New > Directory > 폴더명 입력

4-2. 이미지 등록 : pubspec.yaml > "flutter:" 라고 씌어진 코드 하단에 이미지 등록 코드 작성 ('assets: ....')

4-3. 이미지 위젯 : Image.asset('경로')

 

 

5️⃣ 박스 위젯

• Container( style값 ) 또는 SizedBox( style값 )
  * flutter의 style 값 단위는 px가 아니라 lp
• 박스 위젯을 만들 땐, 박스가 생성되는 시작 지점(부모 위젯) 세팅이 필요
  * 위젯 ( child: 위젯() 

5-1. Container( style값 )  또는  SizedBox( style값 )

5-2. 박스 위젯을 만들 땐, 박스가 생성되는 시작 지점(부모 위젯) 세팅이 필요