아기개발자의 성장일기

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 이..

Flutter 앱 자동배포 구축 - iOS 편 에서 이어집니다. Getting started with fastlane for Android 문서를 참고해주세요 [1] fastlane init 안드로이드 폴더로 이동해서 아래 명령어를 실행시켜주세요 fastlane init [2] Package Name Package Name을 물어보는데 대답해줍니다. app/build.gradle의 applicationId를 알려주면 됩니다. [3] json secret file 그 다음 json secret file의 경로를 물어보네요 json secret file을 만들어서 path를 알려줘야해요!+! Getting started with fastlane for Android 문서의 Collect your Google..

얼마전 간단한 플러터앱을 만들어서 앱스토어와 구글 플레이스토어에 배포를 해보았다. (플러터 앱 배포 회고) 근데 버그 발견해서 새 버전 낼때 때마다 iOS, 안드로이드 각각 신경써야하고 AppStoreConnet와 구글플레이스토어 콘솔 각각 들어가야하고... 두개를 다하려니 너무 귀찮다. 😭 (iOS 앱 출시 준비하기 , Android 앱 출시 준비하기 ) 그러다가 메마른 땅 촉촉한 단비와도 같은 웹 개발자의 Travis CI 기반 Flutter 앱 지속적 빌드 및 배포 환경 구축기 라는 글을 만나게 되는데... 따라해보겠습니다! (다 해보고 나니 플러터 뿐만아니라 iOS 네이티브앱에 그대로 해도 되겠더라구요) [1] Fastlane 설치하기 fastlane docs 를 참고해서 설치해줄게요 sudo g..

Get the Flutter SDK 문서 를 참고해주세요여기 따라하다가 쌍따옴표 이슈 를 만난 김에 정리합니다-!! 1) zip 다운받기 다운받으면 flutter라는 폴더로 압축이 풀립니다. 2) flutter 폴더를 원하는 위치로 이동하기 어디에 둘까하다가 홈에가서 development 폴더하나 만들고 여기에 넣어둠 3) Path 추가하기맥 OS 카탈리나부터 터미널이 bash가 아니라 zsh로 바뀌었기때문에bash_profile에 Path 추가해줘도 터미널에서 flutter 명령을 인식 못합니다. 그러니까 풀어서 설명하면..!아래 두가지 방법 중 하나로, bash_profile을 열어서open ~/.bash_profilevi .bash_profile 아래 라인을 추가해주고 저장해줘도 export PAT..