본문 바로가기

📱 Mobile/플러터 앱프로그래밍

(7)

플러터 앱프로그래밍 Day7 플러터 앱프로그래밍 Day7 지난 시간에는 계산기를 만들어 봤었다. 이번에는 '탭(tab)' 에 대해 알아볼 것이다. 우리가 보통 인스타그램이나, 카카오톡에서 아주 많이 사용하는 탭바를 알고 있다면 기능 이해에 대해서는 조금 쉽게 접근할 수 있다. 각 화면을 탭으로 연결한 탭바를 이용하면 관련 있는 내용끼리 묶을 수 있다. 메인화면에서 탭을 눌러 화면을 이동할 수 있기 때문에 좀 더 직관적인 앱을 만들 수 있다. 여러 페이지 만들고 이동하기 우선, 여러 화면을 만들고 각 화면을 탭바에 연결해 사용자가 탭을 눌렀을 때 화면으로 이동하는 앱을 구현해보겠다. 모바일 앱 개발에서는 이를 내비게이션(navigation)이라고 한다. 내비게이션은 다음 포스팅 때 다뤄보고 오늘은 탭바를 이용해보겠다. class Fi..

플러터 앱프로그래밍 Day6 플러터 앱프로그래밍 Day6 지난 시간까지는 기본적인 플러터 위젯을 봤었다. 이번에는 계산기 앱을 만들어서 사용자와 상호작용을 하는 위젯을 보려고 한다. 기본적으로 버튼은 사용자가 눌렀을 때 onPressed라는 이벤트가 발생한다. 덧셈 계산기 앱 만들기 1. 새 프로젝트를 생성하고 main.dart 파일에서 Column을 사용할 수 있게 StatefulWidget을 만든다. 2. Column에 children을 선언한 후 차례대로 Text, Textfield, ElevateButton 위젯을 추가한다. ElevateButton 위젯의 onPressed는 버튼이 눌렸을 때 발생하는 이벤트이다. child : Column( children : [ Text('flutter'), TextField(), Ele..

플러터 앱프로그래밍 Day5 플러터 앱프로그래밍 Day5 지금부터는 본격적으로 플러터 앱을 개발하는 데 필요한 내용을 하나씩 살펴보려고 한다. 그 중에서 구글의 머티리얼 디자인이 적용된 위젯을 사용하는 방법과 앱에 이미지, 폰트 등을 추가하는 방법 등 공부할 것이다. 스캐폴드를 이용한 머티리얼 디자인 적용 머티리얼 디자인은 구글에서 2014년부터 사용한 플랫 디자인 지침이다. 머티리얼 디자인을 적용하면 평면, 단색 위주의 간결한 디자인을 바탕으로 앱의 용량을 줄이고 동시에 속도를 개선할 수 있다. 플러터 앱을 제작할 때 머티리얼 디자인을 적용하려면 스캐폴드 클래스를 이용한다. 스캐폴드 클래스는 각종 위젯을 머티리얼 디자인 레이아웃으로 설계하는 것을 돕는다. 제목 줄 추가하기 1. 스캐폴드에 appBar를 선언하고 새로운 AppBar..

플러터 앱프로그래밍 Day4 플러터 앱프로그래밍 Day4 위젯의 생명주기를 알면 언제 데이터를 주고받을지, 그리고 화면이 사라질 때 어떤 로직을 처리해야 할지를 정리해서 넣을 수 있다. 생명주기를 이해하면 앱의 동작이나 자원을 효율적으로 관리할 수 있다. 스테이트리스 위젯은 한 번 만들어지면 갱신할 수 없으므로 생명주기가 없다. 즉, 다른 화면으로 넘어가면 모든 로직이 종료된다. 그러나 스테이트풀 위젯은 10단계로 구분하는 생명주기가 있다. 앞에 붙은 번호순으로 생명주기가 진행되므로 순서도 눈여겨봐야 한다. 상태를 생성하는 createState() 함수 먼저 StatefulWidget 클래스를 상속받는 클래스는 반드시 createState() 함수를 호출해야 한다. 이 함수는 다른 생명주기 함수들이 포함된 State 클래스를 반환한..

플러터 앱프로그래밍 Day3 플러터 앱프로그래밍 Day3 플러터 프로젝트를 만들면 많은 파일과 폴더가 자동으로 생성된다. 이러한 플러터 프로젝트의 구성을 살펴보도록 한다. 그리고, 플러터 앱 개발에서 핵심인 위젯과 생명주기를 알아보려고 한다. 플러터 프로젝트 구조 폴더 내용 비고 android 안드로이드 프로젝트 관련 파일 안드로이드 스튜디오로 실행 가능 iOS iOS 프로젝트 관련 파일 엑스코드로 실행 가능(맥 전용) lib 플러터 앱 개발을 위한 다트 파일 플러터 SDK 설치 필요 test 플러터 앱 개발 중 테스트 파일 테스트 편의성 제공 루트에서도 여러 파일이 있지만, 여기서 주목할 파일은 pubspec.yaml이다. pubspec.yaml 파일은 플러터에서 다양한 패키지와 이미지, 폰트 등을 사용할 수 있게 해준다. 상태 ..

플러터 앱프로그래밍 Day2 플러터 앱프로그래밍 Day2 오늘은 다트 언어를 이용하여 간단한 프로그램을 구현해보려고 한다. 구구단 프로그램 2~9단까지 구구단을 출력하는 프로그램이다. for문을 중첩해서 코드를 짠다. void main() { for (int i = 2; i

이전 1 2 다음

728x90

티스토리툴바