지난 스텝까지 잘 따라왔다면 다음과 같은 결과가 나왔을 것이다. 하지만 모두 느끼듯, 현재는 패딩도 맞지 않고, 우리가 중요하게 보여줘야 할 데이터인 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-..