이제 Step 6 !!! 지금까지 우리가 만든 앱은, next 버튼을 누르면 이전에 나왔던 단어를 볼 수 없었다. 그래서 이번 단계에서는 'Like' 버튼을 눌러, 원하는 단어를 기억해보려고 한다. 이번 목표는 다음 화면과 같다. Add the business logic MyAppState 에서 다음과 같이 코드를 수정해보자. lib/main.dart // ... class MyAppState extends ChangeNotifier { var current = WordPair.random(); void getNext() { current = WordPair.random(); notifyListeners(); } // ↓ Add the code below. var favorites = []; void t..

지난 스텝까지 잘 따라왔다면 다음과 같은 결과가 나왔을 것이다. 하지만 모두 느끼듯, 현재는 패딩도 맞지 않고, 우리가 중요하게 보여줘야 할 데이터인 word가 한 눈에 들어오지 않는다. 우리는 사용자가 느끼기에 조금 더 쉽게, 원하는 정보를 얻을 수 있도록 해야한다. 그래서 이번 스텝에서는 이러한 시각적인 요소(디자인) 에 조금 신경을 써보려고 한다. 코드랩에서 제시한 다음 우리의 목표는 이 이미지와 같다. Extract a widget 현재 우리 코드에서는 word pair를 다음과 같이 나타내고 있다. Text(appState.current.asLowerCase) 이 코드를 조금 더 복잡하게 바꿔보려고 한다. 이 코드를 별도의 위젯으로 빼는 것이 좋다고 한다. 이처럼 UI의 각 요소에 대해 별도의 ..

1. Introduction 학습할 내용은! ✅ flutter가 어떻게 작동하는지의 기초 ✅ flutter에서 layout 만들기 ✅ 앱 동작과 user interaction의 연결 (좋아요 버튼 누르는 것이 그 예) ✅ flutter 코드를 정갈하게 짜는 것 ✅ 반응형 앱을 만드는 것 (screen 크기에 따라 다른게 반응할 수 있음 !) ✅ 앱의 일관된 형태와 느낌을 주도록 2. Set up your Flutter environment (flutter 환경 설정) 📍 Visual Studio Code 사용 codelab 공식 문서에서 vscode를 다운받을 수 있도록 연결해두었다! 공식문서 링크 ⬇️ https://codelabs.developers.google.com/codelabs/flutter-..

외주를 하다 보니 무선 디버깅을 해야할 일이 자주 있었다. 하지만 ios 14인가 15부터는 '$ flutter run'으로는 무선으로 실행할 수 없었다. flutter run -d 기기번호 --release 기기번호 자리에 실행하고자 하는 기기의 번호를 입력하면 휴대폰에 앱이 설치되는 것을 확인할 수 있다. 몇 가지 에러가 뜬다면, xcode에서 기기를 선택하고 빌드한 뒤 다시 시도하면 된다. 앱이 설치되고 나서는 선을 제거하고도 무선으로 앱 실행이 가능하다.

flutter로 앱을 열심히 개발하다 보니 iphone에 직접 실행시켜서 개발 과정을 확인하고 싶었다.실제 앱에서는 padding이나, 이미지 크기 등이 어색하게 보일 수 있기 때문에 iphone 연동이 시급했다.하지만 flutter 초보인 내게 xcode를 다루는 일은 너무 어려웠다😭여러 reference들을 참고했는데, 오히려 그것이 내게는 독이 되었던 것 같다.여러 번의 실패 끝에 프로젝트를 다시 시작하기를 반복했다.다시는 같은 실수를 하지 않기 위해 하나씩 정리하며 기록하려 한다.  1. iphone을 맥에 연결한다.맥에 연결하면, finder에서 연결된 iphone을 확인할 수 있다.해당 기기를 선택하면, 신뢰에 대한 부분이 나오는데 신뢰를 선택하면 된다.     2. 실행하고자 하는 폴더를 ..