본문 바로가기

플러터로 앱만들기14

플러터로 SNS어플 만들기 5. font 적용하기 오늘은 너무나도 딱딱한 글씨체를 좀 바꿔줄꺼에요. 그래서 메인페이지의 앱바에 텍스트로 레터링 로고를 넣으려고합니다. 이렇게 바꿔줄꺼에요. 오늘 작업할 내용 1. 구글폰트 다운로드 2. font 폴더만들기 3. yaml파일설정 4. 적용 5. 전체테마 글씨체변경 1. 구글폰트 다운로드 우선 저는 구글 폰트를 다운받았는데, 제일만만한게 구글폰트입니다. 구글에 그냥 검색어에 구글폰트 라고 치시고 여기로 들어갑니다. 자기가 원하는 글자를 여기 빨간 동그라미 부분에 치시고 원하는 미리보기를 한번 찾아보세요. 사각형으로 뜨는거는 영어전용인가? 한글은 지원안하나봐요. 그리고 원하는걸 클릭합니다. 저기 Download family 누르면 다운로드가 진행되요. 그리고 압축을 풀어주세요. 그리고 압축이 풀리면 ttf 파일.. 2021. 5. 13.
플러터로 SNS어플 만들기 4. 실제 단말기연결,앱 아이콘 만들기 이번시간에는 휴대폰에서 빌드하기 와 앱 아이콘을 만들어볼거에요. 플러터로 만든 기본앱을 에뮬레이터나 실제 단말기에 깔면 빨강색으로 동그라미 친거처럼 아이콘이 저렇게 나와요. 근데 이걸 아이콘을 바꿔주면 파란색으로 동그라미 친거처럼 저렇게 바뀌죠. 사진이 정사각형이 원안에 그냥 저렇게 들어가잇는데. 안드로이드 에뮬레이터의 구글 픽셀폰이라서 저렇고 일반적인 안드로이드 폰은 사각형 그림파일있으면 아래처럼 이쁘게 둥그스름하게 만들어줘요 오늘 작업할 내용입니다. 1. 단말기 설정하기 2. 단말기에 깔기 3. 런쳐아이콘 사진정하기 4. flutter_launcher_icons 라이브러리 적용하기 5. 라벨 변경하기 1. 단말기 설정하기 우선 자기 단말기를 꺼내 톱니바퀴 모양의 설정을 눌러들어간다음 개발자 옵션에서 .. 2021. 5. 11.
플러터로 SNS어플 만들기 3. 메인페이지 제작(BottomNavigation) 이번 시간에는 BottomNavigation 을 통한 메인페이지를 만들어 볼겁니다. 보통 앱들을 보면 밑에 이런것들이 많은데 이걸 우리는 BottomNavigationBar 라고 합니다. 기본적인 원리는 int 값을 같은 변수를 한개 지정해두고 (ex int selectedIndex) 밑에 아이콘을 클릭하면 setState가 되면서 인덱스값이 변경되게 해두고, (여기서 setState는 상태를 새로 불러온다는건데 쉽게 그냥 새로 빌드하는겁니다.) 그 인덱스값에 맞춰서 페이지와 BottomNavigationBar의 아이콘들이 반응하게 하면됩니다. 오늘 할 작업의 목록은 1. BottomNavigationBar 위젯생성 2. BottomNavigationBarItem 생성 3. 페이지 연결 4. 아이콘 바꾸.. 2021. 5. 9.
플러터로 SNS어플 만들기 2. 메인페이지로 넘어가기 저번시간에 랜딩페이지까지 만들었습니다. 앱을 실행하면 여기서 끝나는거죠. 그러면 앱이라고 할수가 없을겁니다. 그래서 오늘은 랜딩페이지에서 메인페이지로 넘어가는것을 할거구요 다음 글에서는 bottomNavigation 을 활용한 메인페이지를 만들어볼겁니다. 오늘의 작업내용은 1. GetX 라이브러리 적용 2. 일단 메인페이지 다트파일 작성 3. Timer 함수로 메인화면으로 이동 1. GetX 라이브러리 적용 우선 flutter getX라고 구글에 검색하셔서 들어간다음 Pubspec.yaml 파일에 적용해줍니다. 4.1.4 버전이네요. 첫 라이브러리 적용이네요. 그림과 같이 적어주시고 pub get 눌러주세요. 이제 요런 라이브러리 적용하는건 너무 기초적이니까 생략하겠습니다. GetX는 플러터 사용하는 사.. 2021. 5. 7.