개발
-
[Flutter basic] Listview 상품 리스트 구현하기 예제(column,row,container)개발/flutter 2021. 7. 11. 13:31
이번에 구현 해보려 하는 UI 는 위와 같은 상품 리스트 이다. 다소 복잡한 페이징은(오른쪽위 페이지 넘기는거) 제외하고 상품사진, 타이틀, Descripton으로 구성관 리스트를 구현 해보고자 한다. 보통 첫번째로 해야할 일은 모델링을 하는것이다. 그러나 API를 제공받고 있는 상황은 아니므로 모델링한 데이터들은 공유하도록 하겠다. class ProductModel { const ProductModel(this.imageUrl, this.title, this.desc1, this.desc2); final String imageUrl; final String title; final String desc1; final String desc2; } const productList = [ ProductMode..
-
[Flutter basic] Listview 를 사용해 원하는 UI 구현하기개발/flutter 2021. 7. 3. 22:08
Listview 는 아주 많이 쓰이는 기능이다. 아무 앱이나 자주 가는 사이트들을 보면 알수있듯이 리스트는 아주 흔하게 볼수있는 UI 다. 예를 들어 게시판이나 유튜브 영상 리스트, 검색 결과 리스트 등등 이있다. 리스트는 보통 서버에서 받은 데이터들을 보여주는 형식으로 자주 쓰인다. 따라서 갯수가 고정적이지 않고 동적으로 변하는 경우도 많이 있다. 그리고 여러개일경우 핸드폰의 크기를 벗어나기 때문에 scroll 기능이 필요한경우가 있고 리스트의 형태가 가로이거나 세로 일경우도 있다. 이모든 기능들을 Listview 하나로만 구현이 가능하므로 ListView는 매우 필수적인 기능이라 볼수있다. 보통의 경우 서버 데이터를 보여주는 경우가 많으므로 ListView.builder() 를 사용한다. 이거만 사용..
-
[Flutter basic] Container/Row/Column 사용해 구글 검색 페이지 구현하기 튜토리얼개발/flutter 2021. 6. 27. 18:45
지금까지 배운 Container 와 Row/Column을 사용해 구글의 메인화면인 검색 페이지를 구현 해보려한다. 화면을 구현할때 우선 어떻게 그려낼지 생각해보고 작업을 진행하는게 좋다. 해당 UI는 크게 세개로 나뉘어 진다. 구글로고 / 입력창 / 텍스트 1. 이 세개는 세로로 그려져 있기 때문에 Column 을 사용하는것이 좋겠다. 그리고 정렬을 가운데 정렬을 하면 될것이다. 2. 검색창에는 돋보기 모양의 이미지가 있음을 확인 할수있다. 검색창을 크게 Container로 두고 그 안에 child로 이미지를 넣은후 왼쪽으로 배치하면 될것이다. 3. 그리고 맨 아래에 있는 텍스트(google 제공 서비스: English ) 는 텍스트와 버튼 으로 나뉘어진다 세로로 그리면 되므로 Row를 활용 할수있을것이..
-
[Flutter basic] Row를 활용해 원하는 위치에 UI 그리기개발/flutter 2021. 6. 23. 21:40
Row는 UI를 세로로 배치하고 싶을떄 사용한다. Column 과 유사하게 사용하고 설정값또한 비슷하다. body: Container( margin: EdgeInsets.all(10), color: Colors.yellow, child: Row( children: [ Container( height: 60, color: Colors.red, child: Text("Container1"), ), Container( height: 60, color: Colors.blue, child: Text("Container2"), ), Container( height: 60, color: Colors.green, child: Text("Container3"), ), ], ), ), Row의 arguments들도 Cou..
-
[Flutter basic] Column 을 이용해 원하는 위치에 UI 그리기개발/flutter 2021. 6. 23. 21:21
Column 사용해 원하는 위치에 UI 그리기 Column 은 쉽게 세로로 UI를 그릴때 사용된다. 그리고 싶은 UI의 영역을 잡았을때 영역이 위 아래로 나뉜다면 그 나뉜 두개의 영역을 Column 안에 두면 된다. body: Container( margin: EdgeInsets.all(10), child: Column( children: [ Container( height: 30, width: 200, color: Colors.red, child: Text("Container1"), ), Container( height: 60, width: 200, color: Colors.blue, margin: EdgeInsets.only(top: 20), child: Text("Container2"), ), ],..
-
[Flutter basic] Container 를 사용해 원하는 크기,위치 그리기개발/flutter 2021. 6. 20. 16:28
Modern Collection View 와 MVVM 패턴 가이드 [iOS] Modern Collection View & MVVM 패턴 가이드 - 인프런 | 강의 MVVM 패턴과 Modern Collection View를 사용해 네트워킹을 구현하고, 다양하고 동적인 Collection View를 자유자재로 다룰 수 있게 됩니다., - 강의 소개 | 인프런 www.inflearn.com 쉽게 말하자면 Container는 하나의 사각형 박스를 생각하면 된다. Container를 알아야 하는 큰 이유는 어느 위치에 내가 원하는 UI를 그리기 위해 그 위치에 Container를 생성해주고 그 안에 UI를 넣어주는 방식을 사용하면 편하기 떄문이다. 실제로 나도 사각형 박스들의(Container) 집합으로 앱의 모..
-
RxFlow 적용기개발/Swift 2021. 5. 25. 17:44
우선 프로젝트에서 적용 시킨 Flow 는 이렇다 AppFlow → MainFlow AppInitViewController 에서 init 함수들이 돌고 끝이나면 MainFlow 로 넘어가서 MainViewController 를 push 하고 MainViewController 에서 버튼을 클릭하면 CodingViewController 를 push 한다. 따라서 Step은 이렇게 단순하다. enum AppStep: Step { case introIsRequired case mainIsRequired case codingIsRequired } Flow의 시작은 SceneDelegate에서 시작해줬다. let appFlow = AppFlow() let appStepper = OneStepper(withSingle..
-
Flutter 프로젝트 안에 Swift 프로젝트(framework) 추가하기개발/flutter 2021. 4. 27. 18:59
flutter 에서 swift 프로젝트를 추가시킬때 다음과같이 추가한다. Add file 을 선택한 후 원하는 프로젝트의 .xcodeproj 파일을 선택하면 된다. 그러면 해당 프로젝트가 추가됬음을 볼수있다. 이후 General → Frameworks,Libraries... 여기서 해당 framework를 선택하면 된다. 문제는 해당 프레임워크에서 사용중인 pod 파일들을 찾아오지못해 에러가 발생한다. 해당 pod 들은 podfile에 추가해주면 된다. 보면 RxCocoa, RxSwift, Moya 등을 추가해줬다. 그리고 pod install 명령어를 실행시켜준다. 만약 빌드할때 "does not contain bitcode." 라는 에러가 발생할경우 해당 프로젝트 BuildSettings → Enab..