라티의 작은 일기장

오늘은 Flutter에서 화면 전환(페이지 또는 뷰의 전환)이 어떻게 이루어질 수 있는지 알아보려 한다. Flutter에서는 크게 3가지 방식을 활용할 수 있다. - 상태를 활용 - Navigator 객체 활용 - 외부 라이브러리 GoRouter 활용 일단 첫 번째부터 알아보자. Scaffold에는 appBar, body 말고도 bottomNavigationBar라는 것이 있다. items, currentIndex, onTap 3개의 인자를 가지며, 각 인자의 역할에 대한 설명은 아래와 같다. - items: BottomNavigationBarItem 생성자를 통해 만들어지는 인스턴스를 요소로하는 배열이다. - BottomNavigationBarItem 생성자는 icon과 label을 인자로 요구한다. ..

오늘은 Flutter 프로젝트에서 일종의 환경 설정 파일로 사용되는 pubspec.yaml 파일에 대해 알아보고, Flutter에서 외부 라이브러리와 로컬 데이터를 활용하는 방법에 대해 알아보려 한다. 웹 개발 프로젝트에서 외부 라이브러리를 사용하는 경우, 패키지 매니저를 사용하게 되는데 npm의 경우 package.json이라는 파일에서 해당 프로젝트의 이름, 저자, 버전 정보 또는 외부 라이브러리(의존성)의 버전 정보를 관리하게 된다. Flutter에서도 이 package.json 파일과 같은 역할을 하는 pubspec.yaml 파일이 있다. (진짜 웹 개발이랑 여러모로 비슷하다;;) 여기서도 프로젝트의 이름, 상세 설명과 프로젝트 버전 등이 관리되고 있고, sdk 버전도 관리하고 있는 것을 확인할 ..

오늘은 Flutter에서 지원하는 다양한 입력 위젯, 콜백과 Gesture에 대해 알아보려 한다. 일단 입력이 제대로 실행되는지 알기 위해 상태를 지원하는 Stateful 위젯을 활용해서 만들어보자. 처음으로 구현해볼 위젯은 Checkbox이다. class _TestCheckBoxState extends State { late List values; @override void initState() { super.initState(); values = [false, false, false]; } @override Widget build(BuildContext context) { return Row( children: [ Checkbox(value: values[0], onChanged: (value) =>..

오늘 다뤄볼 내용은 Flutter 위젯의 Lifecycle(생명주기)과 아키텍처이다. 위젯은 웹 개발에서 컴포넌트에 해당하는 개념이라고 얘기했었는데, 그렇다보니 생명주기 또한 존재한다. 여기서 생명주기란, 위젯이 생성되고 동작을 수행한 뒤에 프로그램 내에서 정리되는 과정을 의미한다. 우선 Stateless 위젯의 생명주기는 단순하게 아래의 순서로 흘러간다. - Create - build() - dispose 한번 빌드되면 변화할 필요가 없는 위젯이다보니 이렇게 단순한 생명주기를 갖는다. 그래서 많이 사용해도 메모리 사용 최적화를 위한 별도의 노력을 요구하지 않는다. 그럼 Stateful 위젯은 어떨까? Stateful 위젯의 생명주기는 그림으로 도식화해서 나타내보았다. 처음 보면 조금 복잡해보일 수 있지..

어제 공부한 내용에 이어서 위젯을 겹쳐서 보여주고 싶을 때 활용할 수 있는 Stack 위젯과 Constraint에 대한 학습을 진행하고 레이아웃 구성에 대한 감을 잡게 되었다. 짤막한 후기를 덧붙이자면 Flutter에는 특정 기능을 갖는 위젯이 진짜진짜 많다. CSS 속성같은 느낌이 나서 이걸 일일이 외우기보다는 실제로 UI를 구성해보면서 자주 사용하는 것들은 그냥 자연스럽게 손에 익히는 식으로 공부하는게 좋은 것 같다. 오늘 이어서 다뤄보려는 내용은 이제 Flutter의 State에 관한 내용이다. 내가 지금까지 레이아웃 구성 실습에 활용했던 위젯들은 모두 Stateless 위젯이다. 위젯이 상태에 따라 로직을 수행하거나 모습을 변경할 필요가 없는 위젯인 것이다. 반대 개념의 위젯은 Stateful 위..

오늘은 어제 공부했던 내용을 잠깐 짚고 다음 내용으로 넘어가려한다. 어제는 다수의 요소를 수평 / 수직으로 나열할 수 있는 Row / Column 위젯에 대해 알아보았는데, 실습 코드부터 살펴보자. /// ... class CustomContainer extends StatelessWidget { const CustomContainer({super.key}); @override Widget build(BuildContext context) { return Container( child: Row( children: [ Container( width: 100, height: 80, child: Center(child: Text('Hello Container')), decoration: BoxDecoratio..

오늘은 Container, Center 위젯과 더불어 레이아웃의 기본 개념에 대해 알아보려한다. 일단 Container는 이름 그대로 어떤 위젯들을 내부에 포함시키기 위한 위젯이다. Child 위젯을 하나 가질 수 있고, width와 height, color 등 스타일과 관련된 속성도 지정할 수 있다. 아래는 너비와 높이가 100px이고 배경색이 지정된 채로 Text 위젯을 하나 child로 가진 Container 위젯을 만든 결과이다. 코드는 다음과 같다. import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Practicing Container..

오늘은 Flutter 개발에 있어 중요한 개념들 중 Hot restart와 Hot reload, 그리고 디자인 가이드에 대해서 알아보려 한다. 앞서 Flutter는 두 가지 컴파일러(AOT, JIT)를 활용한다고 소개한 바가 있다. 이 중 JIT 컴파일러의 특성을 통해 컴파일 과정을 거치지 않고도 코드의 변경사항을 즉시 반영할 수 있는 Hot reload를 사용할 수 있다. 일단 둘의 정확한 의미와 차이점에 대해 알아보자. - Hot restart: 앱의 상태가 초기화되고 재시작되며, 코드의 변경 사항을 확인할 수 있음 - Hot reload: 앱의 상태가 유지되고 재시작되지도 않지만, 코드의 변경사항을 확인할 수 있음 둘 다 코드의 변경 사항을 확인할 수 있다는 공통점이 있으나, 상태와 재시작 여부에 ..