lgvv98

SwiftUI Toast, popup 오픈소스를 활용해서, 팝업 및 토스트 UI를 처리하는 부분을 기술.직접 구현해도 크게 어렵지 않으나, 개인 앱 개발 시 오픈소스를 활용함으로써 본질에 더 집중할 수 있다는 이점. 히스토리2022.05.23. 15:36초기 포스팅 PopupView 2점대 버전2024.11.18. 02:23PopupView 예제 개선 및 3점대 버전으로 재정리주의: 해당 오픈소스를 확장 개발하기 위해 PR 및 이슈를 검토하던 중, 메인테이너 분이 바쁘셔서 문제점을 다른 작업자의 PR을 고스란히 넣어주고 있음하지만, 개인 앱 개발에서 크리티컬한 문제가 되지 않아서 재정리 오픈소스 링크https://github.com/exyte/PopupView GitHub - exyte/PopupView..

Dart에서 Future와 async/await 이해하기 1. Dart의 ThreadDart는 싱글 쓰레드 기반Event loop를 통해 비동기 작업 처리Android의 Looper와 유사한 개념 2. Future란?Future는 미래의 값을 나타내는 객체실행 순서:Dart가 Future 객체를 내부 배열에 등록관련 코드가 이벤트 큐에 등록불완전한 Future 객체 반환동기(Synchronous) 코드 먼저 실행Future 완료 시 실제 데이터 전달 예제: Future + thenFuture 실행은 비동기, then으로 결과 처리Future fetchData() { return Future.delayed(Duration(seconds: 2), () => "데이터 완료");}void main() { p..

Flutter Networking (api, json parsing) 실습 이번에는 Future를 통해서 통신 과정을 실습. await async가 웹이나 Swift Concurrency와도 비슷한데, 아직 이 개념이 익숙하지 않아서 Future를 이용 스크린샷 코드 샘플import 'package:flutter/material.dart';import 'package:futurejson/info.dart';import 'package:http/http.dart' as http;import 'dart:async';import 'dart:convert';void main() { runApp(MyApp( info: fetchInfo(), ));}class MyApp extends Stateless..

Flutter Future, async, await 이해하기 Flutter에서 비동기 처리(Future, async, await)는 RxSwift와 비슷한 흐름으로 이해할 수 있음.이번 시간에는 순차적 실행 → 지연 → 비동기 처리 → await 사용 순으로 발전하는 예제를 통해 학습 실습을 통해 하나하나 바꿔가면서 알아보자. 1. 기본 동기 실행 import 'dart:io';void main() { showData();}void showData() { startTask(); accessData(); fetchData();}void startTask() { String info1 = '요청 수행 시작'; print(info1);}void accessData() { String info2 ..

Flutter 로그인과 주사위 앱 실습 로그인 화면과 주사위 게임 화면을 만드는 방법에 대해서 정리새로 배우는 위젯, 디자인 패턴, 클린 코드 활용법이 많음.코드를 천천히 읽으면서 핵심 포인트를 짚어보기. 실습 스크린샷스크린샷 예제 main.dart// main.dartimport 'package:flutter/material.dart';import 'dice.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, ..

Flutter Navigator와 pushName 메소드 알아보기 특히 오타로 인한 슬래시(/)와 역슬래시(\) 문제 때문에 한참 헤맸던 경험이 있음.그리고 파일을 나눠서 작업하면서 import 관리의 중요성도 느낄 수 있었음. 생각할 점: import가 너무 많으면 관리가 불편하다.→ C/C++처럼 헤더 파일처럼 한 곳에서 모아서 관리할 수 있는 방법을 찾아보면 좋음.코드 샘플 main.dart// main.dart import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키import 'package:untitled/ScreenA.dart';import 'ScreenB.dart';import 'ScreenC..

Flutter Navigator 간단 정리 네비게이터 간단하게 정리 목차Route의 개념스마트폰에서 보여지는 하나의 페이지 화면 ! Navigator의 정의와 push, pop 함수, stack 자료구조stack ( FILO ) push 데이터를 넣기pop 데이터를 빼기Route(페이지)는 Navigator라는 위젯이 담당하고 그 구조는 스택 구조MaterialPageRoute위젯과 context화면전환할 때, 바로 class 입력해서 이동하는 것이 아니라 화면을 지정해주면서 이동페이지 이동 기능 구현 완성 코드 샘플import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키void main() => runA..

Flutter Column, Row 정리 이번 시간에는 Column 위젯과 Row 위젯에 대해 정리.이 두 위젯은 플러터 레이아웃의 기본 뼈대를 이루는 중요한 요소지만,개념 자체는 간단하다. 그러니 이번엔 쓱 보고 감각적으로 이해해보자 Flutter Layout Cheat Sheet 아래 사이트는 레이아웃을 바로 확인할 수 있는 사이트https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e Flutter Layout Cheat SheetDo you need simple layout samples for Flutter? I present you my set of Flutter layout code snippets. I wil..

Flutter 컨테이너(Container) 정리 이번 시간에는 Container 위젯을 다루며, 공식 문서에 나온 내용을 직접 실습.Container란?플러터 공식 문서에서 Container는 이렇게 정의“Containers with no children try to be as big as possible.”→ child가 없을 경우, 가능한 한 큰 영역을 차지한다. 즉, 컨테이너는 레이아웃 상의 빈 공간을 최대한 확장하여 채우는 위젯이다. https://flutter-ko.dev/docs/development/ui/widgets/layout#Single-child%20layout%20widgets https://flutter-ko.dev/docs/development/ui/widgets/layout#S..

Flutter에서 스낵바(SnackBar)와 토스트(Toast) 메시지 사용하기 이번 시간에는 스낵바(SnackBar) 와 토스트(Toast) 메시지에 대해 학습.이 두 가지는 사용자에게 간단한 알림이나 상태 변화를 알려줄 때 자주 사용ScaffoldMessenger로 스낵바 만들기 ScaffoldMessenger는 가장 가까운 Scaffold를 찾아서 메시지를 표시하는 역할을 한다.기존의 Scaffold.of(context) 방식은 deprecated 되었기 때문에ScaffoldMessenger.of(context) 로 대체해서 사용해야 한다. import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키voi..