Flutter 15

Flutter 로 간단한 노트 앱을 만들어보자 ① - 노트 쓰기/조회 기능 구현

안녕하세요. Flutter 에 입문하여 앱을 출시해 보고자 간단한 노트 앱을 만들고 있습니다. 이번 글에서는 노트를 쓰고, 노트를 조회하는 간단한 기능을 Provider 패키지를 이용하여 구현해보겠습니다. 먼저 구현 결과물부터 보여드리겠습니다. 처음에는 노트를 작성할 수 있는 노트 쓰기 화면이 나타나고, 저장을 누르면 노트 목록 화면으로 이동합니다. 이때, 휴지통 아이콘을 누르면 노트를 지울 수 있습니다.  그럼 이제 프로젝트를 시작해 봅시다!  플러터 프로젝트 생성먼저 프로젝트를 생성해야겠죠. 처음에 프로젝트를 생성할 때 사용하는 명령어는 다음과 같습니다.flutter create {프로젝트 이름} 그런데 이 경우에는 프로젝트의 도메인 설정이 `com.example.{프로젝트 이름}` 으로 표시되더라고..

Flutter의 Wrap 위젯으로 동적 레이아웃 쉽게 구성하기

Flutter에서 Wrap 위젯 사용법Flutter로 앱을 개발할 때, 여러 개의 위젯을 한 줄에 배치해야 하거나 화면 크기에 맞춰 유동적으로 배치하고 싶을 때가 있습니다. 이럴 때 유용한 것이 바로 Wrap 위젯이죠. 오늘은 Wrap 위젯의 사용법과 장점에 대해 소개해보겠습니다.  Wrap 위젯이란?Wrap은 말 그대로 아이템을 감싸주는 레이아웃입니다. 보통 Row나 Column을 사용하면 아이템들이 한 방향으로만 배치돼서 화면 크기에 따라 넘쳐버리는 문제가 생기곤 하는데요. 반면, Wrap은 공간이 부족할 때 자동으로 줄바꿈을 해주기 때문에, 반응형 레이아웃을 쉽게 만들 수 있습니다.   기본 사용법Wrap 위젯의 기본적인 구조는 아래와 같습니다.Wrap( spacing: 20.0, // 열 사이의..

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()..

flutter _ WebView 위젯에서 홈으로 이동, 뒤로가기, 새로고침

웹뷰를 구현했을 때, 막상 홈버튼이나 뒤로 가기 버튼이 없을 때가 있다. (혹은 위 이미지 처럼 엉뚱한 페이지로 빠지기도 한다) 이럴 때는 WebViewController를 이용해 해당 WebView 위젯을 컨트롤할 수 있다. WebViewController 사용법 해당 HomeScreen 클래스 안에 null이 올 수 있는 controller라는 공용 변수를 선언한다. class HomeScreen extends StatelessWidget { WebViewController? controller; ... WebView 위젯 파라미터에 onWebViewCreated를 추가한다 이때 받은 controller을 앞서 생성해두었던 공용 변수 this.controller 에 할당한다. class HomeScr..

flutter _ webview_flutter 를 이용해 앱에서 웹페이지 불러오기

webview_flutter 사용법 webview_flutter 는 웹페이지를 앱 형태로 보여주기위해, WebView 위젯을 제공하는 Flutter 플러그인이다. 설치방법 pubspec.yaml 파일의 dependencies 에 'webview_flutter: {버전}' 을 추가한다. Pub get 하는 거 잊지 말긔. dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 webview_flutter: ^3.0.0