Flutter 위젯

Flutter는 구글에서 만든 크로스플랫폼 앱 제작 tool입니다. 이번 포스팅에서는 Windows에서 Flutter 개발 환경을 구축하는 방법에 대해서 알아볼겁니다.저는 Android Studio가 이미 설치되어있고, 에뮬레이터도 하나 생성되어 있습니다. 만약에 포

Flutter 기본 포스팅을 하면서 맨 처음 다루게 될 위젯은 Text위젯입니다. 위젯이란 무엇인가요? 모바일 화면에 보여지는 모든 것을 위젯이라고 합니다. 어플리케이션은 결국 위젯의 집합인 셈이죠. 그 중 가장 기초가 되는 위젯 Text위젯에 대해서 이야기해보겠습니다

갑자기 >안녕하세요?? 원래는 이후로 필수 개념이 되는 위젯들을 순서대로 포스팅하려고 했는데... 갑자기 제가 맥북을 하나 사게 되었어요. 그래서 이제부터 모든 개발 작업과 공부는 MacOS를 통해서 할건데, 설치 방법은 Windows에서 포스팅을 해버려서 제 맥북 세

유명한 SNS어플을 사용하면 하단에 페이지를 이동할 수 있는 메뉴들이 있습니다.이건 제 폰에서 스크린샷찍은 것들인데요. 저렇게 하단에 멋진 페이지 메뉴들을 만들기 위해서 Flutter에서는 bottomNavigationBar라는 위젯을 제공해주고 있습니다. 그렇다면 어

Container 위젯 >Flutter에서 Container위젯은 가장 기본이 되는 위젯입니다. 그렇다면 Container는 무엇일까요?? Container는 말그대로 하나의 박스입니다. 화면에 박스를 랜더하기 위해 사용하는 것이죠. 예제 환경을 먼저 구성해보겠습니다

Row & Column >앱의 구성, 즉, UI는 수많은 위젯들의 집합이라고 할 수 있습니다. 그렇다면 여러가지 위젯들을 가로 혹은 세로로 정렬하여 함께 사용할 수 있어야 합니다. 그것을 위해 Row & Column에 대해 이야기 해보겠습니다. 환경 구성 >lib

들어가며 >여러 SNS 앱들은 사용자가 자신들의 이야기를 앱에 적어 기록할 수 있게 되어있습니다. 지난 포스팅에서 다뤘던 Text위젯은 정해진 글만 보여주는데요. 사용자가 앱에 글을 적을 수 있도록 할 수 있는 방식으로 Flutter에서는 TextField를 이용합니

들어가며 >앱 UI에 그려진 위젯들 중에 가장 많은 타입이 아마도 버튼이 아닐까 싶습니다. 버튼을 클릭해서 다른 화면으로 이동하고, 작성중인 글을 전체 다 삭제하고... 여러가지 기능을 위해서 버튼들을 클릭하여 사용자에게 서비스를 제공할 수 있습니다. Flutter에

들어가며 >앱 안에서 알림창을 띄우려면 어떤 위젯을 사용해야 할까요? 바로 AlertDialog 위젯입니다. AlertDialog 위젯은 앱의 페이지에서 알림창을 띄울 수 있도록하는 위젯입니다. 환경구성 >페이지 위젯 클래스를 하나 준비하겠습니다. 우선, stat

들어가며 >이번 포스팅에서 다룰 주제는 ListView입니다. 영문해석 그대로 List의 내용을 화면으로 띄어주도록하는 위젯인데요. 이 위젯은 UI를 구성하는데 있어서, 데이터를 요청해서 읽어온 후 화면에 List의 내용을 보여주는 것이 아주 용이합니다. 즉, 데이터

이번에 소개시켜드릴 위젯은 PageView 위젯입니다. 이름 그대로 페이지를 보여주는 위젯입니다. 이전에 소개해준 BottomNavigationBar는 항목을 클릭하면 화면을 바꿔줬지만, 양 옆으로 스크롤하면서 여러 화면을 보여주는 위젯입니다. PageView를 사용해

이번에 알아볼 위젯은 GridView위젯입니다. 인스타그램은 사진을 격자 타일처럼 사진을 보여주죠. 이런 격자모습을 만들기 위해서 GridView를 사용할 수 있습니다.body에 Container만 전달된 빈 화면을 우선 만들어 줍니다.body에 전달된 Containe

들어가며 >앱 화면에 시간이 걸리는 작업이 있는 경우에는 로딩화면을 구현해야 하는 경우가 있습니다. Flutter 에서는 CirculatProgressIndicator, LinearProgressIndicator를 통해서 로딩화면을 구현할 수 있습니다. 환경 구성

오늘 다뤄볼 이야기는 AppBar위젯입니다. AppBar는 화면 상단에 표시되는 제목줄입니다. Flutter에서 Scaffold는 기본적으로 appBar를 통해서 AppBar를 화면에 표현할 수 있어요.body에 Container만 전달한 빈 화면을 그려주겠습니다. 이

처음 Flutter 앱을 생성하게 되면, 숫자 카운팅 예제앱이 등장하는데요. 하단 우측 부분에 버튼을 클릭하면 숫자가 카운팅되어 증가하게 되는 앱입니다. 그 버튼을 Floating Action Button이라고 합니다. 왜 갑자기 이 얘기가 나왔느냐면 오늘 이야기할 위

모바일 앱을 사용하다보면 메뉴버튼을 클릭했을 때, 메뉴가 쫙 나오면서 선택할 수 있는 그런 버튼들을 보셨을 겁니다. 오늘은 flutter의 Drop Down Button에 대해서 알아보겠습니다.Drop Down Button의 메뉴를 바꾸기 위해서는 setState메소드

이번 포스팅에서는 Slider위젯에 대해서 알아보겠습니다. Slider위젯은 무엇일까요?이렇게 생긴 위젯입니다. 무언가를 조절할때, 이 위젯을 통해서 화면에 랜더링시키는 게 사용자 입장에서는 편하게 느껴지겠죠? Slider위젯 이제 시작합니다.페이지 위젯 클래스를 하나

스크롤링하는 페이지를 구성하는데, SingleChildScrollView를 이용해서 구축했죠? 이렇게 구축한 페이지는 하단으로 스크롤링하면서 내용을 볼 수 있습니다. 근데, 실제 모바일 앱에서는 우측에 스크롤바가 있는 것을 볼 수 있어요. 이 스크롤바는 어떻게 구현할

앱에서 시간을 고르는 기능을 추가하고 싶다면 어떻게 해야될까요? 이번 포스팅에서는 Flutter가 제공하는 방식으로 TimePicker를 구현해보도록 하겠습니다.페이지는 StatefulWidget으로, body에 Container를 전달한 빈 페이지를 만들어줍시다.Ti

지난 포스팅에서는 현재시간과 TimePicker에 대해서 알아보았습니다. 이번에는 날짜를 해봐야겠죠? 이번 포스팅에서는 DatePicker를 구현하는 법에 대해서 알아보겠습니다.StatefulWidget으로 빈 페이지를 구성합니다. 마찬가지로 body는 일단 Conta

Flutter는 앱 안에서 새로운 화면으로 이동하려면 Navigator를 사용합니다. 이번 포스팅에서는 Navigator에 대해서 알아보도록 하겠습니다.페이지 이동 구현을 위한 2개의 페이지가 필요합니다. 첫번째 페이지는 First, 두번째 페이지는 Second라고 하

Flutter는 크로스플랫폼 앱개발 프레임워크입니다. 그렇다보니 아무래도 웹과 모바일앱을 동시에 제작하는 일도 많고, 특히나 웹에 경우 화면 사이즈에 따라서 각기 다른 화면처리가 필요합니다. 이를 반응형 웹이라고 하죠. LayoutBuilder는 이러한 화면처리를 도와