Flutter 개발

Flutter 개발/Flutter 개념

[Flutter] State & Widget 살펴보기

🕶️ State에 관한 고찰 Flutter에서 Widget은 꼭 필요한 요소이다. Flutter에서 UI 구성요소 == Widget이라고 보아도 무방하다. 모든 widget은 자신이 stateless widget인지 stateful widget인지 결정을 해줘야 한다. 일단 Widget의 종류를 알기 위해 가장 먼저 알아야 할 선수 지식이 있다. 바로 State(상태)이다. 예를 들어 타이머 앱이 있다고 생각 하자. 타이머 앱에 있는 StopWatch는 1초마다 화면을 전환 해줘야 한다. 나의 focus it에서 class timerPage extends StatefulWidget { const timerPage({Key? key}) : super(key: key); @override _timerPage..

Flutter 개발/Flutter 개념

[Flutter] 오픈소스 패키지 사용해보기

PUB.DEV Cross Flatform Framework의 장점을 꼽자면 ReactNative와 Flutter의 방대한 오픈 소스이다. Flutter 개발자들 사이에선, Widget과 패키지를 레고처럼 조립하면 앱이 완성된다고 한다. The official package repository for Dart and Flutter apps. pub.dev는 dart와 flutter의 공식 패키지 저장소라고 볼 수 있다. ✔ Flutter 패키지 추가 방법 Example) permission_handler 패키지 설치하기 pubspec.yaml 파일에 버전을 기록한다. name: description: A new Flutter project. # 다음은 앱 버전 및 빌드 번호를 정의합니다. # 버전은 점으로..

Flutter 개발/Flutter 개념

[Flutter] Flutter에 관한 고찰

🚀Flutter 개요 Cross Flatform Framework중 현재 가장 인기 있는 프레임워크는 구글에서 개발한 Flutter이다. Cross Flatform Framework란 안드로이드, ios를 하나의 코드베이스로 개발할 수 있는 효율적인 개발 프레임워크인데, 대표적으로 Microsoft의 Xamarin, Meta의 React Native, Google의 Flutter가있다. Flutter React Native Xamarin 회사 Google Facebook (Meta) Microsoft 개발 언어 Dart JavaScript C# 출시 년도 2017 2015 2011 장점 제일 높은 성능, 낮은 진입 장벽, Hot Reload, 수많은 오픈소스 패키지, 한글 및 영어 레퍼런스 JS언어 기반..

Flutter 개발/Focusit 앱 프로젝트

[Flutter] 3. 표를 만들어보자

저번 시간까지 만든 부분들을 살펴보면 1페이지 통계 부분은 그냥 대충 아무거나 import해와서 만들어 놓은 것을 볼 수 있다. time chart라는 패키지를 이용하여 만들었는데, 오로지 수면시간에만 집중 되어 있는 것 같아, 다른 패키지를 통해 직접 UI 구성을 하기로 마음 먹었다. https://pub.dev/packages/syncfusion_flutter_charts syncfusion_flutter_charts | Flutter Package A Flutter Charts library which includes data visualization widgets such as cartesian and circular charts, to create real-time, interactive, hi..

Flutter 개발/Focusit 앱 프로젝트

[Flutter] 2. 회원가입, 로그인 만들어보기

백엔드의 'ㅂ'도 모르는 나는 플러터엔 firebase지! 하며 바로 firebase셋팅을 시작했다.. firebase_core: ^1.10.6 firebase_auth: ^3.3.4 cloud_firestore: ^3.1.5 먼저 pubspec.yaml 파일에 의존성 파일들 넣어주고 flutter fire cli를 사용하여 파이어베이스 연동을 시도했다. https://firebase.flutter.dev/docs/cli/ CLI | FlutterFire The FlutterFire CLI is a useful tool which provides commands to help ease the installation process firebase.flutter.dev 먼저 무슨 앱 아이디 같은걸 써줘야하는..

Flutter 개발/Focusit 앱 프로젝트

[Flutter] 1. 타이머부터 말썽이에용!

제일 먼저 틀부터 잡아주었다. 공부 할때 잘못된 습관이었던 main.dart에다가 모든 파일 다 박아 넣지 않기.. (중요)그래서 일단 indexPage라는 폴더 하나를 만들어서 총 3개의 page view controller를 사용하여 개발 해보기로 했다. 테마 색상을 저렇게 잡은 이유는 포모도로와 휴식 타이머의 색상 반전을 위해 딱 2컬러만 앱에다가 쓰자 이런 마인드 였다. 그래서 찾은 사이트가 요기다 조금 붉으스름한 흰색이 맘에 안들긴 한다만 이 남색이 내 취저이다보니.. 이걸로 그냥 선탞ㄲㄲ 자 이제 본 작업에 들어가보자~ 해서 pub.dev들어가서 다양한 자료들도 찾아보고 했는데, 제일 중요한 시계를 어떻게 구현해야 할지 모르겠더라.. 모를땐 패키지를 쓰라던 자칭 플러터 고수 xx씨의 말을 듣고..

Flutter 개발/Focusit 앱 프로젝트

[Flutter] 0. 무슨 앱을 만들어 볼까?

Prologue 플러터 공부를 차근차근 해나가고 있던 과정중, 이렇게 클론 코딩하고 남 강의 하는거 계속 들어 봤자 뭐하겠나? 싶어 대충 디자인 하는 법, 어떻게 코딩하는지 레이아웃 정도는 습득 했으니 바로 코딩을 해보자고 생각을 했다. 하지만 막상 코딩 해보자고 하니, 뭘 해야 할지 전혀 감이 안왔다.. 뭔가 실생활에 진짜 쓰이는 앱 개발을 하고싶었다. 한 3일정도 고민 했나? 그냥 무난하게 ToDo 앱을 만들어서 플레이스토어에 올려보면 되지 않을까? 생각 했다. 근데 또 막상 시작하려고 하니깐 너무 무난한 앱이지 않나 싶어서 프로젝트를 접고 다시 고민했다... 어느날 디자인과 친구와 통화를 했다 나: 내가 앱을 만들려고 하는데 뭐 추천 할만 한 거 없냐? 친구: 니가 무슨 앱을 x만든다고 x랄이야....

Flutter 개발

[Flutter] 플러터를 공부하는 이유

플러터란 무엇인가? 플러터는 2017년 출시한 모바일/웹/데스크톱 크로스 플랫폼 GUI SDK이다. 쉽게 말해서 하나의 코드로 안드로이드, 아이폰, 윈도우, 리눅스, 맥, 웹브라우저 등등을 지원하는 앱을 만드는 것이다. Dart언어를 HTML, CSS, JS, 코틀린, 오브젝트-C 등등 다양한 언어로 transpliation하는 것이라고 한다. 다트언어를 접하자마자 참 매력적인 언어라고 생각했다. C언어와 문법이 거의 같고, C#, JS같은 기능적 스트럭쳐를 추가한 언어라고 하는데, 딱 내가 그나마 익숙한 3가지 언어가 집합인 언어여서 배우는데 참 편한 것 같다. 그 뿐 아니라, 클래스 기반 객체 지향, 앞서 설명한 것 처럼 네이티브 코드로 컴파일이 가능하고, 코드상의 오류를 쉽고 정확하게 집어주어서 개..

Jongung
'Flutter 개발' 카테고리의 글 목록