반응형 분류 전체보기129 #2 The Three Trees (세 가지 트리 구조) https://ch5c.tistory.com/147 [한국어 번역] How Flutter Works: The Three Trees #DecodingFlutter (2/6)https://www.youtube.com/watch?v=xiW3ahr4CRU.인트로 (Intro)0:00CRAIG LABENZ:“How Flutter Works” 에피소드 2에 다시 오신 것을 환영합니다.0:10이전 에피소드에서 저는 Flutter가 주로 세 가지 서로 다른 트리 구조에ch5c.tistory.com위젯이란 무엇인가플러터는 선언형 API를 제공하는데 각각의 위젯은 불변(immutable)이며 일회용(disposable) 임.즉, UI의 해당 부분이 변경될 필요가 있을 때마다 위젯은 버려지고 새로 생성되게 된다는 것인데 .. 2026. 1. 17. [한국어 번역] How Flutter Works: The Three Trees #DecodingFlutter (2/6) https://www.youtube.com/watch?v=xiW3ahr4CRU.인트로 (Intro)0:00CRAIG LABENZ:“How Flutter Works” 에피소드 2에 다시 오신 것을 환영합니다.0:10이전 에피소드에서 저는 Flutter가 주로 세 가지 서로 다른 트리 구조에 의해 동작한다고 살짝 언급했습니다.0:13하나는 우리가 Flutter 개발자로서 직접 작성하는 위젯(widget)으로 가득 찬 트리,0:17하나는 우리가 거의 직접 작성하지는 않지만 항상 상호작용하게 되는 엘리먼트(element)로 가득 찬 트리,0:21그리고 마지막 하나는 가끔씩 직접 작성하기도 하는 렌더 오브젝트(render object)로 이루어진 트리입니다.0:30위젯이 가장 눈에 띄는 개념이므로, 먼저 위젯부터.. 2026. 1. 17. #1 Architecture (아키텍처) https://ch5c.tistory.com/145 [한국어 번역] How Flutter Works: Architecture #DecodingFlutter (1/6)https://www.youtube.com/watch?v=0Xn1QhNtPkQ&t=2s소개 (Introduction)0:00CRAIG LABENZ:“How Flutter Works”의 첫 번째 에피소드에 오신 것을 환영합니다.이 시리즈는 총 6부작으로, 여러분이 작성한 Dart 코드가 Flutter라ch5c.tistory.comFlutter란 무엇인가Flutter는 선언형(declarative)이며 멀티 플랫폼을 지원하는 UI 프레임워크라고 설명하고 있는데 여기서 선언형이라는 것이 무엇일까? 선언형에 대해서 아래와 같이 설명하고 있다. 여러.. 2026. 1. 14. [한국어 번역] How Flutter Works: Architecture #DecodingFlutter (1/6) https://www.youtube.com/watch?v=0Xn1QhNtPkQ&t=2s소개 (Introduction)0:00CRAIG LABENZ:“How Flutter Works”의 첫 번째 에피소드에 오신 것을 환영합니다.이 시리즈는 총 6부작으로, 여러분이 작성한 Dart 코드가 Flutter라는 방대한 세계 속으로 배포된 이후 어떤 일이 벌어지는지를 탐구합니다.0:11이 에피소드들을 통해 다루는 정보는 가볍게 흥미로운 내용부터 모든 Flutter 개발자에게 꼭 필요한 핵심 지식까지 다양할 것입니다.0:18하지만 분명히 해두자면, 이 모든 내용은 Flutter 앱을 어떻게 작성하는지가 아니라, Flutter 자체가 어떻게 동작하는지에 관한 것입니다.🎵 (밝은 음악)0:32오늘은 Flutter의 아.. 2026. 1. 14. Clock_App / 타임 휠 제작 (타임 피커) 우선적으로 타임 라벨을 제작했으니 이제 그 밑에 있는 타임 피커. 휠을 제작할 차례다.맨 처음에는 CupertinoPicker로 구현하려고 했었다. 하지만 얘는 내가 원하는 애니메이션이라든가 크기 설정 같은 조율이 생각대로 되지 않아 사용하지 않았다. 그래서 ListWeelScrollView를 사용하였는데 지나가는 개발자가 코드를 야무지게 적어놓셔서 그대로 뺏겨서 사용했다.https://stackoverflow.com/questions/51118136/how-to-implement-cycle-wheel-scroll-list-widget How to implement cycle wheel scroll list widgetFlutter has ListWheelScrollView widget but I wan.. 2025. 12. 15. Clock_App / 타임 라벨 컴포넌트화 시키 일단 가장 먼저 타이머 화면을 만들기로 했다.그 타이머 화면에서도 첫 번째로 만들어야 할 것을 뽑아 보자면 제일 만만하고 위치 상으로도 첫 번째인 시간, 분, 초 텍스특가 되겠다.만들어주기 위해서 피그마에서 만들었던 것처럼 먼저 큰 틀을 잡고 그 안에 삽입해 주는 형식으로 해주었다.@overrideWidget build(BuildContext context) { return BaseScaffold( appBar: BaseAppBar( onTap: () {}, ), body: , // TODO );}현재 내 Timer 스크린의 코드는 위와 같은데 여기서 스택으로 바디를 먹여주고 그 스택 안에서 박스를 배치해 주겠다.@overrideWidget build(BuildContext .. 2025. 12. 11. Clock_App / 공통 도구(Utils) 제작 사이즈를 먹여주다가 MediaQuery.sizeOf(context).width를 사용하게 되었다. 근데 생각해 보니 이거를 사용할 때마다 계속 호출해야 하면 굉장히 비효율적인 것 같아 Utils디렉토리를 하나 만들고 거기다가 사이즈 관련 코드를 넣어 놓기로 하였다.Utils디렉토리를 만들고 그 아래에다가 파일을 만들어 주었다. 파일 이름은 사이즈와 관련된 도구(코드)들을 넣어 놓을 것이라 screen_size.dart로 지어줬다.안에서는 화면의 너비와 높이를 지정해 주었다.import 'package:flutter/material.dart';class ScreenSize { static double width(context) => MediaQuery.sizeOf(context).width; stati.. 2025. 12. 10. Clock_App / 폰트 삽입 생각해 보니 프로젝트를 만들 때 했어야 했던 것을 안 했던 것 같다.지금 내 Figma에서 넣은 텍스트는 모두 inter폰트로 구성되어 있는데 현재 내 프로젝트 파일에는 들어가있지 않다.https://fonts.google.com/specimen/Inter?query=inter Inter - Google FontsInter is a variable font family carefully crafted & designed for computer screens. Inter features a tall x-height to aid in readability of mixed-case and lower-fonts.google.com우선 구글 폰트에 들어가서 inter를 다운로드 받아주었다.그런 후 이제 이 다운로.. 2025. 12. 5. Clock_App / 타이머 화면 디자인 타이머 화면의 가장 중요한 타임 피커 부분을 먼저 만들어 줄 것이다.최대한 정렬을 맞추기 위해 큰 프레임을 만들어준 후 안에 삽입하는 방식으로 하였다.위의 앱바에서 24만큼 띄워준 곳에 440x374의 프레임을 만들어 주었다.440은 iPhon 16 Pro Max의 너비이다.그런 다음에 타임 피커 위에 시간, 분, 초를 표시해 줄 것인데 폰트는 inter, Medium, 14p, kGray로 맞춰줬다.이 친구들은 상단에서 16 띄어주었다.이제 그 아래에는 타임피커를 배치해줘야 하는데 마땅히 넣을만한 것을 찾지 못하여 직접 텍스트로 입력하여 넣어줬다.상하에 위치한 글자는 inter, Medium, 48p, kDial로 맞추어 주었고 중앙에 위치한 글자는 inter, Bold, 48p, kBlack으로 맞추.. 2025. 11. 28. Flutter / Hot Reload 단축키 지정하기 (키맵, 수정하기, 복구하기, 단축키 안됨, keymap) 우리가 플러터로 개발을 할 때 가장 좋은 편의 기능을 뽑으라고 한다면 무엇일까? 난 자신 있게 바로HotRestart / HotReload 기능이라고 할 것이다.그런데 안드로이드 스튜디오를 사용해서 개발을 하고 있다면 좀 불편함을 느끼는 사항이 있을 것인데 바로 Hot Reload에 지정되어 있는 단축키가 안 먹는다는 것이다. 아무리 코드 내에서 Ctrl + ₩를 눌러도 화면이 갱신되지 않을 것을 것이고 혹은 이상한 제미나이가 뜨는 사람도 있을 것이다.이는 제대로 안드로이드 스튜디오에서 키맵핑이 되지 않아서 발생하는 문제인데 그것을 해결해 볼 것이다.가장 먼저 Settings를 열어준다.그런 후 Keymap에 들어가서 검색창 옆에 있는 Find Shortcut을 클릭한다.저 창이 열렸다면 키보드로 아무거.. 2025. 11. 14. Clock_App / 공통 UI 제작하기 각 화면들이 공통적으로 가지고 있는 요소가 무엇이 있을까? 기본적으론 배경색, 내비게이션 바를 꼽을 수 있을 것이다.근데 여기에서 이제 내비게이션 바는 제작을 완료했으니 배경색을 다 적용해 주면 된다.허나 화면 하나하나 마다 배경색을 일일이 적용시키는 것은 상당히 비효율 적일 것이다. 그러므로 공통적으로 사용하는 기능이나 레이아웃을 묶어둔 기본 뼈대 클래스를 제작해 줄 것이다. 맨 처음 프로젝트 구조화를 했을 때 트리를 아래와 같이 만들어 놨었다.lib/ ├─ constant/ ├─ controllers/ ├─ screens/ │ ├─ components/ │ ├─ widgets/ └─ main.dart 여기에서 이제 widgets/안에 파일을 만들면 된다.Flutter에서 화면의 배.. 2025. 10. 24. Clock_App / 공통 사항 추가 디자인 위의 화면과 내가 만들어 놓은 프레임들에서 어디가 차이가 날까? 일단 나는 가장 먼저 배경색이 문제라고 생각했다.그래서 Styles로 만들어 놓은 kBackground를 사용해서 배경 색을 채워줬다.만들어놓은 Style은 이렇게 삽입하면 된다.그 다음은 또 뭐가 있을까? 내 눈에 띈 것은 스톱워치, 타이머 스크린에 있는 앱바였다. 근데 좀 위로 패딩이 많이 먹여져 있는 것 같아서 기본 앱바는 아니고 한 위로 패딩이 32정도 먹여져 있는 것 같았다. 그러므로 앱바 프레임은 88로 해줬다. 아이콘을 가운데에 배치되게 말이다. 2025. 10. 24. Clock_App / 색상 정의하기 사실 이전 글에서 했어야 했는데 깜빡하고 넘어가 버렸다. 디자인을 하려면 가장 필수로 있어야 하는 것이 당연지사 하게도 색, 컬러일 것이다.Flutter 내부에서 컬러를 어떻게 사용하는지 생각해 보자.그렇다 Color 위젯을 사용하여 16 진수 색상 코드로 Color(0xFF121212) 이런 식으로 색을 정의하거나 혹은 Colors.black 이런 식으로 색을 가져오게 될 것이다. 그렇다면 내가 고른 색을 사용하려면 내 프로젝트 내부에서 모든 컬러를 사용하는 부분에서 16진수로 길게 표현해야 할까? 답은 당연하게도 NO다. Flutter에서는 다른 언어들과 마찬가지로 어떠한 컬러를 선언한 후에 그것을 상수로써 사용할 수 있다.그럼 그 컬러 상수들을 어떤 파일에다 놓을까?이미 내가 만들어 놓았다. 맨 처.. 2025. 10. 24. Clock_App / bottomNavigationBar에TabBar를 사용하기 원래 디자인을 끝낸 다음에 개발에 착수하는 것이 맞지만 그냥 개발하고 싶을 때 개발하고 디자인하고 싶을 때 디자인 할 것이기 때문에 Figma에서 만든 탭바를 구현해 줄 것이다.이것들을 구현해 줄 것이다. 파일 이름은 MainTab으로 할 것인데 탭 동작을 관리하는 파일이므로 이렇게 명명해 줬다.원래 이제 바텀 내비게이션으로 구현할 땐 Scaffold의 body 파라미터에는 IndexedStack같은 위젯을 배치시켜 스크린들을 관리시키고 bottomnavigationBar같은 파라미터에는 BottomnavigationBar 같은 위젯을 배치시켜 만들게 될 것이다.또 IndexedStack과 BottomnavigationBar 위젯을 사용하기 때문에 인덱스를 관리할 currentIndex와 같은 인스턴스.. 2025. 10. 8. Clock_App / 프로젝트 구조화 프로젝트를 생성해서 가장 먼저 해야 하는 일이 무엇일까? 나는 무엇보다 구조화를 먼저 하는 것 같다.그리고 그 구조화한 트리는 아래와 같다. lib/ ├─ constant/ ├─ controllers/ ├─ screens/ │ ├─ components/ │ ├─ widgets/ └─ main.dart 가장 먼저 색깔 같은 상수를 넣은 파일들이 위치될 constant 폴더, UI 부분을 표시할 screens 폴더, 그리고 UI 부분을 제어하는 역할을 해줄 controllers 폴더, 그 외에 UI에서 사용될 components와 widgets 폴더. 이렇게 보통 만들어 놓는 것 같다.widgets/은 재사용성이 높고, 앱 어디서나 쓸 수 있는 공통 UI 위젯들을 모아두는 폴더이고, compon.. 2025. 10. 7. 이전 1 2 3 4 ··· 9 다음 반응형
