라티의 작은 일기장

오늘은 Flutter Theme에 대해 알아보고, 간단한 토이 프로젝트를 만들어본 후기를 남겨보려고 한다. 우선 Flutter Theme은 Flutter의 위젯에서 디자인과 가장 밀접한 관련이 있는 위젯으로, 활용 빈도가 매우 높다고 한다. Flutter Theme은 일단 다른 위젯에 덧씌워지는 형태로 사용되는 것 같다. 사용법을 익히기 위해 간단한 카운터 앱을 만들어보았다. 우측 하단에 있는 버튼을 누르면 카운터 값이 올라가는 간단한 앱이다. 여기에 Flutter Theme을 사용해보자. Scaffold에서 theme 프로퍼티를 통해 설정해줄 수 있다. ThemeData 생성자 내부에서 colorScheme, appBarTheme과 같이 앱에서 전반적으로 활용하는 색상 정보를 설정해줄 수 있는 프로퍼티..

오늘은 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..