[ 2025.08.20 ] 01. setState / Counter

흔히 보이는 Counter를 예시로 들겠습니다. 위에 변수 counter를 넣습니다. IconButton을 누르면 onPress 이벤트로 위에서 정의한 add 함수가 실행됩니다. 그런데 아마 안되실겁니다. 왜 그럴까요?일단 플러스 버튼을 딸각하면 add 함수가 호출되고 counter 변수가 증가 합니다. 하지만 Flutter 즉 화면에는 변화가 없습니다. Flutter에서 setState 로 이 변수가 변했다는걸 알려줘야 합니다.즉! State안에서 상태값이 바뀌었으니. UI를 다시 그려라! 리빌드 해라! 라는걸 의미하게 됩니다. 이렇게 하여 + 버튼을 누르게 되면 리빌드 되면서 ui 반영이 되는 모습입니다.

[ 2025.08.19 ] StatefulWidget

( 저는 제가 최대한 쉽게 이해할려했기 때문에.. 주관적 이라는 점 참고 바랍니다. ) 기본적으로 Flutter를 처음 접하게 되면 StatelessWidget 을 접하게 됩니다. 간단하게 말하면 Stateless 즉 상태 관리가 필요 없는..그럼 오늘 제가 배웠던 Stateful Widget 에 대해 설명해볼까 합니다.Stateful Widget 은 Stateless와는 반대로 상태관리를 할 수 있고, 화면에 즉각적으로 반응형 으로 반응이 됩니다. StatelessWidget StatefulWidget 일단 _MainAppState 라고 class가 따로 떨어져 나갔습니다. MainApp에서 _MainAppState 호출하여 State를 만들게 되고 _MainAppState 에서는 build로 화면을..

[ 2025. 07. 27 ] ✨ Flutter 기본 레이아웃 연습: Wrap으로 박스형 UI 구현

이번 실습에서는 Flutter를 이용해 간단한 박스형 UI 그리드 를 구현해보았습니다. `Wrap` 위젯을 활용해 A~H 알파벳 박스를 자동 줄바꿈 형태로 배치했으며,각 박스는 파스텔톤 배경을 적용하여 부드럽고 깔끔한 느낌의 레이아웃 을 구성했습니다. 구현된 요소는 다음과 같습니다: - `AppBar`: 상단 고정 헤더, 앱 타이틀 "App" 표시 - `Wrap`: 알파벳 박스를 유연하게 나열하고 줄바꿈 처리 - `AlphabetBox`: 재사용 가능한 커스텀 박스 위젯, 알파벳과 배경색 주입 가능 - `Scaffold`: 전체 레이아웃의 기본 구조 제공 Flutter의 기본 구조인 `StatelessWidget`, `Scaffold`, `MaterialApp` 등 핵심 위젯에 익숙해질 수 있는 연습..

[ 2025. 07. 26 ] ✨ Flutter 앱 UI 기본 구성 연습

이번 프로젝트에서는 Flutter의 기본 위젯인 `Scaffold`, `AppBar`, `BottomAppBar`, `Center`, `Icon` 등을 사용하여 심플한 앱 UI를 구성해보았습니다. - `AppBar`는 상단에 "Start App"이라는 타이틀을 표시하며, 파란색 배경으로 지정하였습니다. - 중앙에는 노란색 원 안에 별(`star`) 아이콘이 들어간 커스텀 배지를 배치하여 포인트 요소를 추가했습니다. - 하단에는 `BottomAppBar`를 사용하여 전화, 메시지, 주소록 아이콘을 가로로 나열하여 하단 네비게이션 바처럼 구현했습니다. https://github.com/GangOn0215/study/commit/ca31df925466735b1a14628ddd5a8f560bdbfbc3

[ 설치 ] 개발 환경 구축

pc방에서도 개발 하고 싶어서 어떻게 하면 어떤 환경 에서든 쉽게 접근해서 개발 할 수 있을까 고민하다가,막상 생각나는게 없어서 일단 블로그에 설치 리스트업을 올리기로 했습니다. 1. flutter_windows_3.??-stable.zip 다운로드 https://docs.flutter.dev/get-started/install/windows/desktop 2. 다운받은 zip 파일을 C 드라이버 원하는 곳에 압축풀기 3. 환경 변수 편집 4. 환경 편집 완료 후, cmd (command) 창에서 flutter를 작성 5. flutter doctor 6. Android Studio 설치 설치 후. 체크가 모두 되어 있다면, 시작 할 준비가 되었습니다!

[ 2025.07.25 ] 다시 시작 하는 Flutter