아기개발자의 성장일기

아래 움짤처럼 여러 화면에서 상태를 공유해야할때 어떻게 해야하는지 State management 문서를 살펴보겠습니다. 1) 선언적으로 생각하기 우선 선언적으로 생각하라고 합니다. SwiftUI 처럼 state가 바뀌면 뷰를 아예 다시 그리는 컨셉 🆗👌 2) 임시상태 vs 앱상태 (Ephemeral state vs app state) 그 다음에 임시 상태와 앱상태를 구분하라고 합니다. (Ephemeral state vs app state) 임시상태는 말그대로 단일 위젯에만 딱 포함되는 상태입니다. (다른 위젯들이 이 위젯의 상태에 대해 몰라도됨) 그리고 사용자가 앱을 닫았다가 다시 시작하면 초기값으로 재설정되도 되는 상태입니다. 이런 경우 setState()를 써서 상태관리를 해주면 됩니다. 앱상태는 앱..

textField.text로 값을 가져올 수 있으면 좋겠지만,,,,! (이렇게 못함) Retrieve the value of a text field 문서에서는 TextField의 text를 얻기위해서 TextEditingController를 사용하라고 합니다. CupertinoTextField 생성자를 보면 TextEditingController를 넣어줄 수 있게 되어있네요 현재 이 화면을 만드는 LoginForm 코드는 이렇게 되어있는데요, 텍스트 필드에서 값을 가져올 수 있도록 바꿔보겠습니다,,!! 1) TextEditingController 만들기 우선 TextEditController를 만들어주세요 그리고 dispose함수를 오버라이딩하여서 위젯이 disposed될때 controller도 disp..

우선 플젝에 images 디렉토리를 만들어줍니다. 그리고 여기 넣고 싶은 이미지파일들을 넣어주세요 (저는 이 안에 tabbar라는 디렉터리도 하나 더 만들었어요) 아래 하이라이트한 형식의 이미지들을 넣을 수 있다고 합니다-! 그 다음에 pubspec.yaml에 가서 flutter 밑에 네모 친 것 처럼 이미지 디렉토리를 명시해주세요 문서에 보면 이렇게 해주는 것은 이 디렉토리에 있는 모든 이미지들을 include하겠다!! 하는 거라고 합니다. 이렇게 한땀한땀 이미지 path들을 넣어줄 수 도 있는데, 이것은 너무 귀찮으니까 디렉토리로 해줍니다. 그러면 pub get이 뜨는데 이걸 누르거나 아니면 콘솔 > 터미널 누르고 아래 명령어를 입력해주세요 flutter pub get 근데 iOS에서는 이미지를 잘 ..

NavigationBar랑 TabBar 모두 기본적으로 border가 들어가있는데요 주황네모는 NavigationBar의 border 회색네모는 TabBar의 border 입니다. 그 이유는 CupertinoTabBar에 들어가보면 디폴트 값으로 border가 설정되어있기때문이에요 CuperTinoNavigationBar에 들어가봐도 똑같이 디폴트 값으로 border가 세팅되어있습니다,, 그럼 이 두개의 선을 어떻게 지워줄 수 있을까요?! border에 null을 넣어주면 됩니다..!! TabBar의 border에도 null 넣어주고 NavigationBar의 border에도 null을 넣어주면 이렇게 border가 사라지게 됩니다.

SwiftUI에 HStack, VStack이 있다면 플러터에는 Row, Column이 있습니다. 그리고 SwiftUI에 Spacer가 있다면 플러터에는 SizedWidget이 있습니다. (혹은 Spacer: eunjin3786.tistory.com/277 ) [1] Row와 Column Row 와 Cloumn의 생성자는 우선 이렇게 생겼습니다. [2] Row, Column의 자식들 정렬 Row, Column의 생성자에 있는 MainAxisAlignment와 CrossAxisAlignment는 children을 어떻게 정렬해줄 건가!! 하는거에요 두개 다 enum type이고 각각 종류는 다음과 같아요 MainAxisAlignment - center - start - end - spaceAround - s..

flutter의 ListView 를 만들어보겠습니다. [1] 문서보기 리스트로 그려줄 데이터가 다 정해져있고 몇개 안된다면 아래처럼 해주면 됩니다. 하지만 데이터가 많다면 ListView.builder 를 사용해주면 됩니다. 그리고 리스트에 구분선을 넣고 싶다면 ListView.separated.를 사용해주면 됩니다. 참고로 Divider는 material 디자인에 있는 위젯이여서 (cupertino 위젯에는 Divider 없는 것 같아요) import 해줘야합니다. import 'package:flutter/material.dart'; [2] 더미데이터로 리스트뷰 만들어보기 일단 더미데이터로 ListView.separated. 를 이용하여 리스트를 만들어볼게요-! 각 Cell의 height를 따로 안넣..

flutter에서 iOS Style의 네비게이션을 만들고 싶다면 이렇게 두개를 같이 쓰면 됩니다-!! [1] CupertinoNavigationBar 우선 CupertinoNavigationBar 부터 살펴볼게요-! 말 그대로 navigationBar를 만들때 쓰는 위젯입니다. 생성자는 이렇게 생겼어요 저는 이렇게 navigationBar를 만들어볼게요-!! var _navigationBar = CupertinoNavigationBar( leading: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')), middle: Text("안녕", style: TextStyle(color: Cupertino..

Use a custom font 문서를 봐주시면 됩니다. 플젝에 fonts라는 디렉토리를 만들고 여기에 폰트파일을 넣어주세요 그 다음 pubspec.yaml로 이동해주세요 flutter 밑에 fonts를 추가해줍니다. fontfamily(앱에서 쓸 폰트이름) 랑 font file의 path를 적어주면 됩니다..! 이렇게 써주면 됩니다,,! Text("안녕하십니까아아", style: TextStyle(fontFamily: 'GyeonggiMedium', fontSize: 15)) 저는 style > font 파일을 만들어주고 이런 클래스를 만들어서 폰트를 관리해주게 했어요 class MyFontFamily { static const gyeonggiLight = "GyeonggiLight"; static c..

[1] http 패키지 설치 우선 http패키지를 설치해주겠습니다. pubspec.yaml 파일로 가서 dependency에 http 패키지를 명시해주세요 http: ^0.12.0+2 그다음에 pod install하는 것처럼 터미널을 열고 해당 프로젝트로 가서 아래 명령어로 패키지를 설치해줍니다. flutter pub get (참고: medium.com/@changjoopark/플러터-flutter-의-pubspec-yaml-ffa40b26296a ) [2] http 요청후 reponse를 받아보기 일단 main에서 해보겠습니다. 우선 아까 설치한 http 패키지를 import해줍니다. import 'package:http/http.dart' as http; as http라고 해준 이유에 대해서도 살펴볼..

cupertino-widget 문서 의 CuperinoTabBar를 만들어주겠습니다. (만약 머티리얼 탭바를 만들어주고 싶다면 BottomNavigationBar 문서를 보시면 됩니다) [1] 쿠퍼티노 스타일로 앱 설정 플러터 프로젝트를 처음 만들면 main.dart에 머티리얼앱 코드들이 들어가있는데요, 모두 지우고 아래 코드를 복붙해서 쿠퍼티노 스타일로 바꿔줍니다. (쿠퍼티노가 훨씬 이쁘니까-!! 🍏) 에뮬레이터, 시뮬레이터 돌려서 둘다 잘나오는 지 확인합니다. [2] CupertinoPageScaffold -> CupertinoTabScaffold로 바꾸기 Scaffold는 '골격' 이라는 뜻을 지난 단어인데요, 앱의 골격? structure? 라고 생각하면 됩니다. 쿠퍼티노에는 Page랑 Tab 이..