Flutter25 Flutter로 간단한 노트 앱을 만들어보자 ③ - GoRouter로 네비게이션 바 리팩터링 이번 글에서는 기존의 인덱스 방식의 화면 전환을 Enum 과 GoRouter 를 사용하여 리팩터링 해보겠습니다. GoRouter란?GoRouter는 Flutter의 네비게이션을 간편하게 관리할 수 있도록 도와주는 패키지입니다. URL 기반의 라우팅을 지원하며 화면 전환과 관련된 복잡한 과정을 간단히 처리할 수 있습니다. 리팩터링 이유기존의 탭 전환 방식에서는 네비게이션을 인덱스로 관리했는데, 이렇게 인덱스로 화면 전환을 관리하면 화면이 추가되거나 순서가 변경될 때 수정이 번거롭습니다. 배열 안에 정의된 화면의 순서를 모두 외우고 있어야 개발이 가능하죠. 그렇기 때문에 이번 글에서는 Enum 과 GoRouter 를 이용하여 각 화면을 명확히 구분하고, 경로 기반의 전환으로 더 명확하고 유지보수하기 쉬운.. 2024. 10. 31. Flutter로 간단한 노트 앱을 만들어보자 ② - 하단 네비게이션 바 구현 지난 글에서 Provider 패키지를 이용해 노트를 쓰고 저장하고, 목록을 조회하는 간단한 노트 앱을 만들었습니다. 하지만 노트를 쓰고 '노트 조회' 화면으로 이동하면 다시 '노트 쓰기' 화면으로 돌아갈 수 없었죠. 이번 글에서는 하단 네비게이션 바를 추가하여, '노트 쓰기', '노트 조회', '설정' 화면을 언제든지 이동할 수 있도록 구현해 보겠습니다. 아래 이미지는 네비게이션 바를 추가한 결과 화면입니다. 이런 네비게이션 바를 어떻게 만들 수 있는지, 구현 과정을 하나씩 살펴보겠습니다. 1. 하단 네비게이션 바 컴포넌트 구성네비게이션 바는 앱의 공통 UI 요소이므로 어느 하나의 view 에 속하지 않고. lib/components/bottom_navbar.dart 파일에 별도의 컴포넌트로 정.. 2024. 10. 30. Flutter 로 간단한 노트 앱을 만들어보자 ① - 노트 쓰기/조회 기능 구현 안녕하세요. Flutter 에 입문하여 앱을 출시해 보고자 간단한 노트 앱을 만들고 있습니다. 이번 글에서는 노트를 쓰고, 노트를 조회하는 간단한 기능을 Provider 패키지를 이용하여 구현해보겠습니다. 먼저 구현 결과물부터 보여드리겠습니다. 처음에는 노트를 작성할 수 있는 노트 쓰기 화면이 나타나고, 저장을 누르면 노트 목록 화면으로 이동합니다. 이때, 휴지통 아이콘을 누르면 노트를 지울 수 있습니다. 그럼 이제 프로젝트를 시작해 봅시다! 플러터 프로젝트 생성먼저 프로젝트를 생성해야겠죠. 처음에 프로젝트를 생성할 때 사용하는 명령어는 다음과 같습니다.flutter create {프로젝트 이름} 그런데 이 경우에는 프로젝트의 도메인 설정이 `com.example.{프로젝트 이름}` 으로 표시되더라고.. 2024. 10. 21. Flutter의 Wrap 위젯으로 동적 레이아웃 쉽게 구성하기 Flutter에서 Wrap 위젯 사용법Flutter로 앱을 개발할 때, 여러 개의 위젯을 한 줄에 배치해야 하거나 화면 크기에 맞춰 유동적으로 배치하고 싶을 때가 있습니다. 이럴 때 유용한 것이 바로 Wrap 위젯이죠. 오늘은 Wrap 위젯의 사용법과 장점에 대해 소개해보겠습니다. Wrap 위젯이란?Wrap은 말 그대로 아이템을 감싸주는 레이아웃입니다. 보통 Row나 Column을 사용하면 아이템들이 한 방향으로만 배치돼서 화면 크기에 따라 넘쳐버리는 문제가 생기곤 하는데요. 반면, Wrap은 공간이 부족할 때 자동으로 줄바꿈을 해주기 때문에, 반응형 레이아웃을 쉽게 만들 수 있습니다. 기본 사용법Wrap 위젯의 기본적인 구조는 아래와 같습니다.Wrap( spacing: 20.0, // 열 사이의.. 2024. 9. 6. flutter _ PageView 와 PageController, Timer 사용방법 main import 'package:flutter/material.dart'; import 'package:image_carousel/screen/home_screen.dart'; void main() { runApp( MaterialApp( home: HomeScreen(), ), ); } 설명은 생략 HomeScreen StatefulWidget class _HomeScreenState extends State { Timer? timer; PageController controller = PageController( initialPage: 0, ); State에 Timer 와 PageController 선언 initialPage는 인덱스니까 당연히 0 @override void initState().. 2023. 1. 1. flutter _ WebView 위젯에서 홈으로 이동, 뒤로가기, 새로고침 웹뷰를 구현했을 때, 막상 홈버튼이나 뒤로 가기 버튼이 없을 때가 있다. (혹은 위 이미지 처럼 엉뚱한 페이지로 빠지기도 한다) 이럴 때는 WebViewController를 이용해 해당 WebView 위젯을 컨트롤할 수 있다. WebViewController 사용법 해당 HomeScreen 클래스 안에 null이 올 수 있는 controller라는 공용 변수를 선언한다. class HomeScreen extends StatelessWidget { WebViewController? controller; ... WebView 위젯 파라미터에 onWebViewCreated를 추가한다 이때 받은 controller을 앞서 생성해두었던 공용 변수 this.controller 에 할당한다. class HomeScr.. 2022. 12. 19. 이전 1 2 3 4 5 다음
