모바일개발/플러터 검색 결과
20 개의 검색 결과가 있습니다.
모바일개발/플러터

[flutter] 플러터 StatefulWidget 라이프 사이클 (lifecycle)

StatefulWidget(스테이트풀 위젯) 의 라이프 사이클에 대해 알아보도록 하겠습니다. 라이프 사이클과 함께 각 사이클에서 호출되는 훅 메소드도 알아보도록 하겠습니다. StatefulWidget의 라이프사이클 이란? 스테이트풀 위젯에는 lifecycle(생명주기)이 존재합니다. 플러터 앱에서는 위젯의 생성부터 파기까지의 위젯의 생명주기가 관리 되어지고 있고, 생명주기의 특정 시점에서 특정 메소드가 호출되어집니다. 이러한 라이프사이클의 상태를 이해함으로써 위젯의 정교한 제어가 가능해집니다. 위젯을 만들 때 우리가 잘 인식하지 않고 사용하고 있는 build 메소드나 initState메소드 역시 라이프사이클과 관련된 메소드 입니다. 라이프 사이클(lifecycle) 개요 createState, initS..

2022. 3. 16. 15:59
모바일개발/플러터

[Flutter]플러터 Flexible과 Expanded 차이점

Flexible과 Expanded는 플러터 레이아웃에서 중요한 역할을 하는 위젯입니다. Flexible과 Expanded 약간 헷갈리는데요. 두 위젯의 특징을 알아보고 차이점에 대해 알아보도록 하겠습니다. Expanded 위젯 특징 Expanded의 특징을 먼저 알아보도록 하겠습니다. Expanded는 child 요소를 렌더링 영역의 최대 사이즈까지 확장시켜 주는 위젯입니다. 예를 들어 아래와 같이 가로세로 400, 400 의 Container가 있습니다. 이 컨테이너 안에 Expanded로 싸인 가로, 세로100 * 100 상자가 있다면 화면에서는 어떻게 표현될까요? 예측해보셨나요? 화면은 아래와 같습니다. child의 위젯은 가로 100이지만 부모의 요소인 300만큼 확장된 걸 볼 수 있습니다. 또 ..

2022. 3. 15. 13:19
모바일개발/플러터

플러터 Timer 시계 만들기

플러터에서 Timer를 사용하는 법에 대해 알아보도록 하겠습니다. Timer 클래스 Timer는 5초 후에 특정 함수를 호출하거나 1분마다 호출하는 동작을 하고 싶을 때 유용하게 사용할 수 있습니다. Timer는 dart:async 라이브러리에 정의되어있습니다. 1초마다 함수를 호출하여 시간을 표시하는 시계 위젯을 만들어 보도록 하겠습니다. Timer 사용해서 시계 위젯만들기 아래와 같이 clock.dart파일을 만들어 주었습니다. import 'dart:async'; import 'package:flutter/material.dart'; import 'package:intl/intl.dart'; class Clock extends StatefulWidget { const Clock({Key? key})..

2022. 3. 14. 22:46
모바일개발/플러터

[flutter] 플러터 다음 화면에 값 전달

플러터 앱에서 화면 이동시에 값을 전달하는 방법에 대해 알아보도록 하겠습니다. 예를 들어 게시판의 게시 목록에서 글을 클릭하면 상세 페이지로 이동하는 경우를 생각해 보세요. 글의 id를 상세 페이지로 건네주고, 그 id를 사용해 상세 페이지의 데이터를 취득하는 경우 값 전달이 필요로 하게 됩니다. 간단한 방법으로는 위젯을 담당하는 화면 클래스를 생성할 때 생성자에 값을 넣어주면 됩니다. 코드에서 살펴보도록 하겠습니다. 수정 전 코드 TestScreen 화면은 정중앙 버튼을 클릭했을 때 NextScreen으로 이동하는 간단한 스캐폴드 위젯 화면입니다. 현재 TestScreen화면의 ElevatedButton을 클릭하면 Navigator을 이용해서 NextScreen으로 화면이 이동하게 됩니다. 화면을 이동..

2022. 3. 13. 09:16
모바일개발/플러터

[flutter]플러터 화면 전환(페이지 이동)

플러터에서 Navigator를 이용한 화면 간의 이동을 알아보도록 합시다. 화면 전환 코드를 살펴보기 전에 현재 화면은 다음과 같은 상태입니다. 위 화면의 파일명은 test_screen.dart이고 소스코드는 아래와 같습니다. 단순히 스케폴드 위젯을 보여주고 있고 자식으로는 Container를 가지고 있지만 아무런 표시를 하지 않는 상태입니다. 버튼을 눌렀을 때 화면 이동을 시킬 계획이므로 아무것도 없는 화면에 버튼을 하나 만들어 보겠습니다. child 프로퍼티를 ElevatedButton 위젯을 추가했습니다. ElevatedButton 의 onPressed는 버튼을 눌렀을 때 실행되는 함수를 정의할 수 있지만, 현재는 빈 함수로 해뒀습니다. 앱에서 살펴볼까요? 버튼이 잘 만들어졌네요. 이제 버튼을 눌렀..

2022. 3. 11. 16:35
모바일개발/플러터

플러터 위젯(Widget) 기본 사용법

플러터의 특징인 위젯(Widget)에 대해 이야기해보겠습니다. Widget 유형 위젯에는 안드로이드 앱용 "Material" 위젯과 iOS용 "Cupertino"계통 위젯이 있습니다. *Cupertino 스타일 *Material 스타일 또한 위젯을 크게 나누어 두 가지로 나눌 수 있습니다. 외형을 디자인하기 위한 위젯 레이아웃 및 상태 관리를 위한 위젯 Scaffold나 Text와 같은 위젯들이 외형을 디자인 하기 위한 화면에 실제로 표시되는 위젯입니다. Column이나 Center와 같은 위젯이 화면에는 표시되지 않는 레이아웃을 위한 위젯입니다. 위젯 구현의 기본 위젯에는 각각 위젯마다 프로퍼티가 있어 색을 바꾸거나 크기를 조정하거나 혹은 위젯을 추가할 때 프로퍼티에 할당해 줍니다. 다음 화면은 아래의..

2022. 3. 10. 19:42