플러터 기초 위젯 사용하기

유튜브 Flutter official

https://www.youtube.com/@flutterdev/featured

Flutter

 

Text 표시하기

---

1.폴더 살펴보기

lib : 플러터 앱 개발을 위한 다트 파일

• 플러터 SDK 설치 필요
• main.dart 파일이 있음

android : 안드로이드 프로젝트 관련 파일

• 안드로이드 스튜디오로 실행 가능

ios : ios 프로젝트 관련 파일

• xcode로 실행 가능(맥 전용)

test : 플러터 앱 개발 중 테스트 파일

• test 편의성 제공

 

2. 파일 살펴보기

<직접 관리>

pubspec.yaml : 패키지, 이미지, 폰트 설정

README.md : 프로젝트 소개

.gitignore : 깃(git)에 커밋, 푸시 등 소스 코드를 업로드할 때 필요 없는 파일 기록

 

<자동 관리>

.metadata : Flutter SDK 정보

.packages : Flutter SDK에 사용하는 기본 패키지 경로

first_flutter_api.iml : 파일이 자동으로 생성될 때 만들어지는 폴더 위치

pubspec.lock : pubspec.yaml 파일에 적용된 패키지 위치

 

 

3. 소스의 구성

1. import 구문

• import는 해당 소스 파일에서 사용하려는 패키지를 불러올 때 사용하는 구문
• 자바의 import와 똑같음
• 다른 다트 클래스나 pubspec.yaml 파일에서 내려받은 패키지를 불러올 때도 사용

2. main() 함수

• 자바나 C언어로 작성된 프로그램처럼 main() 함수에서 시작
• runApp()함수
  • binding.dart 클래스에 정의되어 있으며 플러터 앱을 시작하는 역할
  • 플러터 앱을 시작하면서 화면에 표시할 위젯 전달

3. MyApp 클래스

 

• extends: 다트에서 상속을 의미하는 키워드
• Stateless Widget: 상태가 변경되지 않는 위젯을 상속받았다고 생각하면 됨
• build() 함수: 어떠한 위젯을 만들 것인지를 정의

---

Text 수정 실습

처음에 화면 빌드하면 이런 화면이 나옴

 

Text 부분을 안녕하세요로 수정하면 다음과 같이 화면이 변경됨.

 

style: TextStyle()을 이용하여 컬러, 백그라운드컬러, 폰트사이즈, 폰트웨이트, 폰트스타일, 장평, 자간 등 다양한 데이터 표시 가능

 

 

---

버튼이벤트 처리하기

1. 플러터 앱을 구성하는 두가지 위젯

1. 두 가지 위젯 분류 기준

 

상태 연결에 따라 스테이트리스(stateless)와 스테이트풀(stateful)로 구분됨.

 

2. 스테이트리스 위젯(Stateless Widget) : 상태를 연결할 필요가 없는 위젯

• 내용을 갱신할 필요가 없는 위젯(화면에 보이기 전에 모든 로딩을 마침)
  • ex) 앱을 처음 실행하면 사용자에게 정적인 도움말을 보여줌
• 즉, 앱이 위젯의 상태를 감시하고 있는 필요가 없는 것

• Stateless Widget 클래스를 상속받아서 만듦

3. 스테이트풀 위젯(Stateful Widget) : 상태가 연결된 동적인 위젯

• 내용을 갱신해야 할 때 필요한 위젯
  • ex) 계산기 앱에서 숫자를 입력하고 계산버튼을 누르면 결과값이 화면에 출력됨. => 이때 버튼을 누를 때마다 화면에 누른 숫자가 반영되어야 함
• 즉 앱이 위젯의 상태를 감시하다가 위젯이 특정 상태가 되면 알맞은 처리를 수행

• StatefulWidget 클래스를 상속받아서 만듦

---

버튼 이벤트 실습

StatelessWidget으로 화면 구성하기

 

Container 위젯은 플러터에서 가장 기본적인 위젯 중의 하나로 화면을 구성하는 레이아웃

Container 안에 하나의 위젯을 또 넣을 수 있는데, 이를 child라고 함.

여러개의 위젯을 넣을 때에는 children이라는 parameter를 사용함.

 

ElevatedButton은 레이즈드 버튼이 디스크립트 되면서 새롭게 만들어진 버튼 위젯 -> 그게 child에 다양한 위젯들을 꾸며서 넣을 수 있음

 

onPressed는 버튼을 클릭했을 때 호출되는 콜백함수

 

이렇게 작성하고 맨 위에 home:에 기본으로 있는 MyHomePage대신 TestWidget 붙여넣기

 

화면에서 버튼을 클릭하면 console에 click이 출력됨.

 

 

 

여기서 child를 switch로 바꾸고 코드를 다음과 같이 바꾸면

 

화면에 버튼이 다음과 같이 생긴다.

 

 

onChanged에 print('value')를 해주면 화면의 버튼을 눌렀을 때 console에 true가 출력됨.

---

Input 데이터 받아 처리하기

1. TextEditingController 설정

 

2. controller 선언 및 keyboardType 지정

 

키보드 유형

• number : 숫자 키보드 표시
• text  기본 텍스트
• multiline : 멀티 라인 텍스트, 메모 같이 여러 줄을 입력할 때 사용
• phone : 전화번호 전용 키보드
• datetime : 날짜 입력 키보드
• emailAddress : @ 표시 등 이메일 입력 키보드
• url : 주소 입력 창

---

 

Input 데이터 받아오기 실습

TextField(
  controller: controller,
  style: TextStyle(fontWeight: FontWeight.bold),
  decoration: InputDecoration(hintText: '이름쓰기'),
  keyboardType: TextInputType.number,
),

이런식으로 설정하면 텍스트 힌트에 이름쓰기라고 쓰여있고 클릭하면 글자가 사라짐.

keyboardType을 number로 설정하면 클릭했을때 숫자 키보드가 올라옴.

 

---

응용 문제

계산기 프로그램 만들기

 

결과:

 

다음으로 뺄셈, 곱셈, 나눗셈도 추가

 

결과: