Flutter 8

Flutter GetX 패턴으로 프로젝트 구성해보기(4) - controller

Controller 룰? 특징? .obs 변수를 생성하여 조작하는 코드 작성 Repository의 데이터를 consume (Provider의 데이터를 호출) 모든 controller에는 하나의 repository만 가진다.(GetX widget에서 controller를 초기화 하는데 필요함) 만약 하나의 페이지에서 두 개의 repository가 필요한 경우 두 개의 GetX widget(Controller) 을 사용 여러 페이지에서 동일한 controller를 사용하는 경우는 아래 하나 뿐이다. 모든 페이지의 데이터가 단일 repository를 사용하는 경우 ( 뭐 login user? 이런 것..?) 위의 이유는 GetX를 사용하고 GetX의 모든 기능을 사용하기 위함이다. 왜냐하면 controller..

개발/Flutter 2021.06.20

Flutter GetX 패턴으로 프로젝트 구성해보기(3) - Data

차근차근 getx_pattern 사이트에 나와있는대로 프로젝트 구조를 설정해보도록 하겠다. 먼저 lib 폴더 아래 app 폴더를 생성한다. getx_pattern에서 제안하는 모든 것들은 app 폴더 하위에 생성될 것이다. Data data폴더를 app 폴더 하위에 생성한다. data 폴더는 정말 데이터 조작에 사용하는 model, repository, provider 들이 들어갈 폴더일 뿐이다. Provider http 요청 또는 데이터베이스 조작을 수행한다. 데이터 하위에 provider 폴더를 생성하고 예제를 살펴보기 위해 api.dart 를 생성했다. import 'dart:convert'; import 'package:getx_practice/app/data/model/model.dart'; i..

개발/Flutter 2021.06.17

Flutter GetX 패턴으로 프로젝트 구성해보기(2) - getx_pattern

막상 GetX를 사용해서 프로젝트를 진행하려니 어떤 식으로 프로젝트를 구성해야할 지 감이 안왔다. 그래서 GitHub을 좀 뒤지다보니 GetX 개발 표준을 제안하는 것이 있어서 참고해서 프로젝트를 진행해보려고 한다. https://github.com/kauemurakami/getx_pattern kauemurakami/getx_pattern Design pattern designed to standardize your projects with GetX on Flutter. - kauemurakami/getx_pattern github.com getx_pattern에서 제안하는 GetX를 사용하는 프로젝트 구조는 Package와 Module 두 가지이다. Package 형태가 내가 진행하려는 프로젝트와 더..

개발/Flutter 2021.06.08

Flutter 기초(5) - 첫 번째 앱 작성하기 Part2 ( Navigator 와 route )

이번 글에서는 저번 글에서 만들었던 무한으로 생성되는 단어쌍 추천 어플을 한 단계 더 발전시켜 보겠습니다. 단어쌍마다 하트 버튼이 존재하고, 하트 버튼을 누르면 보관함에 보관할 수 있게 만들겠습니다. 먼저 저번에 만들었던 프로젝트를 불러오겠습니다. 그리고 main.dart의 State 클래스에 다음을 추가해주겠습니다. 하트 버튼을 누른 단어들을 저장할 _saved 변수를 Set 형태로 추가해주겠습니다. 그 이유는 Set는 고등학교 때(?) 배웠던 수학의 집합이라고 생각하시면 되는데, 변수 안에 중복된 것을 허용하지 않기 때문입니다. 그래서 단어쌍이 중복 저장되는 것을 막을 수 있습니다. 그리고 ListTile을 그려주는 즉, 무한 리스트 뷰의 아이템을 그려주던 _buildRow 함수에 다음과 같이 추가해..

개발/Flutter 2020.02.19

Flutter 기초(4) - 첫 번째 앱 작성하기( Stateful과 Stateless의 차이, 무한 ListView 생성 )

위는 Flutter 공식 홈페이지에 나와있는 첫 번째 앱 작성하기 코드입니다. 먼저 MyApp은 StatelessWidget을 상속받습니다. Stateless 위젯은 속성을 변경할 수 없습니다. 모든 값을 final로 선언해줍니다. 이와 반대로 조금 이따 사용할 변경 가능한 Stateful 위젯도 있습니다. MaterialApp이라는 위젯을 빌드하게 되는데, 이 위젯을 Scaffold 위젯으로 구성했습니다. Material 라이브러리 문서를 보면 Scaffold를 사용하면 app bar와 title, body 등 기본적인 Material 디자인의 레이아웃 구조를 구현할 수 있습니다. app bar와 body에 간단한 Text 위젯을 넣어 만든 결과는 다음 화면처럼 나옵니다. 앱의 위쪽에 있는 하늘색으로 ..

개발/Flutter 2020.02.17

Flutter 기초(3) - flutter 데모 앱

드디어 flutter로 앱을 실행해보도록 하겠습니다. 먼저 VS Code를 켜줍니다. 그리고 [Ctrl] + [Shift] + p 를 누르면 pallete가 보이는데요. 위처럼 pallete가 뜨면 flutter를 입력해줍니다. 그리고 New Project를 만들어주도록 합시다. 그러면 프로젝트명을 입력할 수 있는데 google에서 예를 들어준대로 myapp으로 하겠습니다. 그러면 위처럼 flutter 프로젝트가 생성되고 main.dart 창이 열립니다. 오른쪽 아래의 파란색 status bar를 보시면 핸드폰이 연결돼있는 것을 볼 수 있습니다. 기기를 연결 안하고 싶으시면 No Devices를 클릭하여 시뮬레이터를 실행하시면 됩니다. 이제 Debug > Start Debugging 를 누르시거나 F5 ..

개발/Flutter 2020.02.13

Flutter 기초(2) - 의존성 문제 해결

저번 글에서 flutter doctor를 사용해 의존성을 확인했을 때, 안드로이드 스튜디오에 대한 의존성 확인이 실패했다고 떴습니다. 나중에 컴파일할 때나 문제가 생기는 줄 알았는데 아니더군요. 그래서 flutter doctor를 실행했을 때 생긴 의존성 문제를 다 해결해보겠습니다. 안드로이드 스튜디오 설치 VS Code flutter extension 설치(나중에 텍스트 에디터를 VS Code로 쓸 예정입니다.) https://developer.android.com/studio

개발/Flutter 2020.02.13

Flutter 기초(1) - Flutter 설치 및 의존성 확인

안녕하세요. 개발자를 꿈꾸는 워뤼천입니다. 블로그를 시작해야겠다는 생각만 하다가 드디어 생각해놓은 어플을 구현할 겸 시작하려고 합니다. 글 재밌게 봐주시고 초보이기 때문에 틀린 점을 댓글로 달아주신다면 정말 감사하겠습니다. 먼저 Flutter를 시작하게 된 이유는 구상한 어플리케이션이 ios와 안드로이드 둘 다에서 사용 가능해야만 하기 때문입니다. 안드로이드 어플리케이션만 간단하게 만들어본 저로써는 부담이 있었고, Flutter와 React Native를 고민하게 됐습니다. 그중 Flutter를 찾게 된 이유는 Java Script도 제대로 써본 적이 없기에 React Native가 러닝커브가 클 것 같았습니다. 또한, Native에 대한 이해도가 더 많이 필요해 보였기에 Flutter로 만들게 됐습니다..

개발/Flutter 2020.02.10