“Hello, World!" 거긴 어떤월드냐?

[Flutter] Expanded 위젯 설명 및 사용 방법

Flutter에서 레이아웃을 구성할 때 Expanded 위젯은 Row, Column, Flex 위젯 내에서 자식 위젯들이 남은 공간을 차지하도록 확장할 수 있게 해주는 중요한 위젯입니다. Expanded는 주어진 공간을 유연하게 배분하며, 레이아웃을 동적으로 조정하는 데 유용합니다.Expanded 위젯이란?Expanded 위젯은 부모 위젯(Row, Column, Flex)이 갖고 있는 남은 공간을 차지하도록 자식 위젯을 확장하는 역할을 합니다. 즉, Expanded로 감싼 위젯은 가능한 최대 크기로 확장되며, 여러 개의 Expanded 위젯이 있을 경우 비율을 조정할 수도 있습니다.📌 주요 특징Row, Column, Flex 위젯 내에서만 사용할 수 있음자식 위젯이 가용 가능한 공간을 최대로 차지하도록..

Flutter Hive_ce & Hive_ce_flutter 소개 및 사용법1. Hive_ce & Hive_ce_flutter란?hive_ce와 hive_ce_flutter는 Flutter에서 사용 가능한 경량 로컬 데이터베이스입니다.특히 Hive_ce는 NoSQL 방식으로 데이터를 저장하며, 빠른 속도와 쉬운 사용법이 장점입니다.📌 주요 특징:Key-Value 기반의 로컬 데이터 저장SQL 없이 사용 가능 (NoSQL)Flutter와 완벽한 호환 (hive_ce_flutter 사용)파일 기반 스토리지 (데이터가 파일로 저장됨)안드로이드 & iOS 지원Flutter 웹에서도 사용 가능2. Hive_ce & Hive_ce_flutter 설치flutter pub add hive_ce hive_ce_flut..

Flutter에서 화면 아래에서 위로 올라오는 팝업을 만들려면 showModalBottomSheet 또는 showBottomSheet을 사용하면 됩니다.1️⃣ showModalBottomSheet (모달 바텀시트)• 화면을 덮는 반투명 배경이 추가됨 (다른 영역 클릭 시 닫힘)• 닫을 때는 Navigator.pop(context) 사용 🔧 예제: showModalBottomSheet 사용import 'package:flutter/material.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext..

1️⃣ page_object.dart 파일 생성 및 버튼 클래스 추가 프로젝트 구조 예시:lib/ ├── main.dart ├── pages/ │ ├── home_page.dart (버튼을 사용하는 페이지) │ ├── login_page.dart (버튼을 사용하는 페이지) ├── widgets/ │ ├── page_object.dart (공통 버튼 정의) 🔧 lib/widgets/page_object.dartimport 'package:flutter/material.dart';/// 구글 로그인 버튼class GoogleSignInBtn extends StatelessWidget { final VoidCallback onPressed; const GoogleSignInBtn({s..

1️⃣ assets 폴더에 이미지 추가1. 프로젝트의 assets 폴더에 다운로드한 PNG 이미지를 넣습니다.• 예: assets/images/google_signin_button.png2. pubspec.yaml에서 assets 경로를 추가합니다. ✅ pubspec.yaml 수정flutter: assets: - assets/images/google_signin_button.png ⚠️ 주의:• assets: 들여쓰기(공백 2칸) 유지• flutter clean && flutter pub get 실행하여 변경 사항 반영2️⃣ 구글 로그인 버튼 추가 🔧 방법 1: GestureDetector로 터치 이벤트 감지import 'package:flutter/material.dart';class Goog..

ThemeData({ Brightness? brightness, // 앱의 밝기 (light 또는 dark) MaterialColor? primarySwatch, // 기본 색상 팔레트 Color? primaryColor, // 기본 색상 Color? primaryColorLight, // 밝은 기본 색상 Color? primaryColorDark, // 어두운 기본 색상 Color? accentColor, // 강조 색상 (deprecated, 대신 colorScheme.secondary 사용) Color? scaffoldBackgroundColor, // Scaffold의 배경 색상 Color? backgroundColor, // 배경 색상 Color? canvasColor, // Material 위..

Flutter에서 상태 관리는 필수적인 요소이며, 다양한 방법이 존재합니다. 그중에서도 BLoC (Business Logic Component) 패턴은 명확한 구조와 유지보수성을 제공하는 강력한 패턴입니다. 이번 글에서는 BLoC 패턴이 무엇인지, 어떻게 동작하는지, 그리고 실습 예제를 통해 사용법을 익혀보겠습니다.1. BLoC 패턴이란?BLoC 패턴은 Flutter에서 상태를 관리하는 방법 중 하나로, 비즈니스 로직을 UI와 분리하여 관리합니다. flutter_bloc 패키지를 활용하면 간단하게 상태를 관리할 수 있으며, 이벤트(Event)와 상태(State)의 흐름을 명확하게 정의할 수 있습니다.BLoC 패턴의 핵심 개념Event (이벤트): 사용자 입력이나 특정 동작에 의해 발생하는 트리거 (예: ..

Brew를 통해 설치한 Flutter는 brew upgrade 명령어로 업데이트할 수 있습니다. 1️⃣ Homebrew 및 Flutter 최신 상태로 업데이트brew update # Homebrew 업데이트brew upgrade flutter # Flutter 최신 버전으로 업그레이드 2️⃣ Flutter 버전 확인 및 업그레이드 업그레이드 후 Flutter 버전을 확인하세요.flutter --version 최신 버전으로 업그레이드되지 않았다면 강제 업그레이드합니다.flutter upgrade --force 3️⃣ Flutter 캐시 정리 및 패키지 다시 받기 업그레이드 후 불필요한 캐시 파일을 삭제하고 패키지를 다시 다운로드하세요.flutter cleanflutter ..

웹 애플리케이션에서 사용자가 입력하는 데이터에서 공백을 방지해야 할 때가 있습니다. 특히 ID, 비밀번호, 특정 코드 입력란에서는 공백이 들어가지 않도록 제한하는 것이 필요할 수 있습니다. 이를 위해 JavaScript와 jQuery를 사용하여  태그에서 공백 입력을 방지하는 방법을 알아보겠습니다.1. JavaScript를 이용한 공백 입력 방지 설명keypress 이벤트를 사용하여 사용자가 입력하는 키를 감지합니다.입력된 키가 space (공백)일 경우 event.preventDefault();를 호출하여 입력을 차단합니다.2. jQuery를 이용한 공백 입력 방지$(document).ready(function() { $("#user-input").on("keypress", funct..

서버 운영이나 개발 과정에서 로그 파일을 분석하는 일은 매우 중요합니다. 특히 특정 오류 메시지나 이벤트를 찾기 위해 로그 파일에서 특정 문자열을 검색하는 경우가 많습니다. 이번 글에서는 cat과 more 명령어를 이용해 로그 파일에서 특정 문자열을 찾는 방법과 추가적으로 활용할 수 있는 다른 명령어들을 소개하겠습니다.1. cat 명령어로 특정 문자열 검색하기cat 명령어는 파일의 내용을 출력하는데 사용됩니다. 하지만 단순히 파일 내용을 보는 것만으로는 원하는 문자열을 찾기 어렵기 때문에 grep과 함께 사용하는 것이 일반적입니다.예제:cat access.log | grep "error" 위 명령어는 access.log 파일에서 "error"라는 단어가 포함된 줄을 출력합니다.옵션 설명:cat acces..