Flutter 67

[Flutter] MaterialApp의 주요 property와 사용법

theme: 앱의 전체 테마, 색상 구성 등이 포함 (예, theme: ThemeData(primarySwatch: Colors.red))home: 앱이 시작할 때 보여질 기본 경로 또는 위젯  Scaffold 위젯 사용법과 주요 property MaterialApp 내에서 머티리얼 디자인의 기본 레이아웃 구조를 제공하는 위젯주요 propertyappBar: 화면의 상단에 있는 앱 바.보통 value로 AppBar(title: const Text('FunCoding'))와 같이 AppBar 위젯을 넣는 경우가 많음body: 화면의 기본 내용, 일반적으로 위젯의 목록.floatingActionButton: 인터페이스에 위치한 추가 버튼.floatingActionButtonLocation: 부가 버튼의 위치..

Flutter 2024.11.06

[Flutter] 기초적인 Flutter 화면을 구성하는 패턴

'package:flutter/material.dart' 임포트MaterialApp으로 메인 위젯 트리 감싸기title과 theme과 같은 속성 설정home : 속성을 주 페이지로 정의Scaffold:앱의 시각적 레이아웃에 대한 기본 구조 제공appBar 및 body와 같은 속성 설정레이아웃 요소 제공 (예: AppBar, Drawer, BottomNavigationBar)각 구성요소는 또 다른 위젯으로 각각의 사용법은 이후에 정리하기로 함body에 실제 화면 관련 위젯 정의import 'package:flutter/material.dart';void main(){ runApp(MyApp());}// 상태 기반 UIclass MyApp extends StatelessWidget { const MyAp..

Flutter 2024.11.06

[Flutter] Basic Widget 살펴 보기

플러터에 공식적인 용어가 정립이 안되어 있음 layout 위젯visible 위젯을 원하는 위치에 배치하기 위해, layout 위젯을 선택간단하고 기본적인 layout 위젯은 Container와 Center 위젯전체 layout 위젯 리스트: https://docs.flutter.dev/development/ui/widgets/layoutvisible 위젯간단하고 기본적인 visible 위젯은 다음과 같음 Text 위젯Text('Hello World') Image 위젯Image.asset('images/lake.jpg') Icon 위젯Icon(Icons.home) 3. visible 위젯을 layout 위젯 안에 넣음 모든 layout 위젯은 하나의 자식을 가질 수 있는 위젯과 여러 자식을 가질 수 있는 ..

Flutter 2024.11.05

[Flutter] Flutter 프로젝트 구조 이해하기

Flutter 프로젝트를 효과적으로 개발하기 위해서는 기본 구조를 이해하는 것이 중요합니다. 다음은 주요 구성 요소들입니다 프로젝트 폴더 구조플랫폼별 폴더 (android, ios, linux, macos, web, windows): 각 플랫폼에 필요한 네이티브 코드 포함lib 폴더: 주요 Dart 코드가 위치하는 곳pubspec.yaml: 프로젝트 설정, 의존성, 리소스 등을 관리하는 파일시작점 (Entry Point)lib/main.dart 파일의 main() 함수가 앱의 시작점새 프로젝트 시작 시 기본 예제 코드는 삭제하고 시작하는 것이 일반적  패키지와 임포트패키지: Flutter와 커뮤니티에서(다른 개발자들) 제공하는 재사용 가능한 코드 모듈import 문으로 필요한 패키지와 위젯을 프로젝트에 ..

Flutter 2024.11.05

[Flutter] 나만의 Flutter 위젯 분류

위젯들을 이해하고 활용하는 것이 Flutter 개발의 핵심입니다. 위젯의 종류Flutter는 풍부한 UI 위젯을 제공합니다. 자세한 내용은 공식 문서에서 확인할 수 있습니다.위젯들을 이해하기 쉽게 직접 나누어 봅시다(공식적인 분류는 아직 존재하지 않는 것 같음)1. 플랫폼별 위젯Material (Android) 위젯Google의 Material Design 가이드라인을 따르는 위젯들입니다.Cupertino (iOS) 위젯Apple의 Human Interface Guidelines를 기반으로 한 iOS 스타일 위젯들입니다.대부분의 경우 Material 위젯을 사용하지만, 플랫폼별 특성을 살리고 싶다면 각각의 위젯을 적절히 활용할 수 있습니다.2. 기본 위젯 (Basic Widgets)Text: 다양한 스타..

Flutter 2024.11.05

[Flutter] 플러터 기본기 다지기 - 1

"Everything is a Widget" — Flutter의 핵심 철학Flutter는 위젯 기반의 UI 프레임워크로, 모든 UI 요소를 위젯으로 표현합니다. 이는 개발의 일관성과 효율성을 크게 높여줍니다.  선언적 UI 구성Flutter는 React에서 영감을 받은 선언적 프로그래밍 방식을 채택했습니다. 개발자는 원하는 UI 상태를 직접 선언하며, 프레임워크가 이를 효율적으로 렌더링합니다.  명령형 UI 어떠한 상태가 되도록 명령한다.ViewA a = ViewA(); ViewB b = ViewB();a.setColor(red) // 빨간색이 되어라b.setColor(yello) // 노란색이 되어라a.add(b) // b는 a의 child가 되어라  선언형 UI 어떠한 최종 상태를 선언한다// 빨간색..

Flutter 2024.11.05

[Flutter] Flutter UI 프레임워크

chat gpt 프롬프트 시작 문구💡 Since now, you act as th best IT lecturer for beginners having no idea about flutter and programming. Plz add detail comments to the following code line by line. 위젯 속성 값 확인 프롬프트 문구💡 plz explain properties and to use of [ → IconButton ←] in Flutter. 영어 결과 출력 후 한글 변환 요청💡 plz translate the avobe answer in korean. 안드로이드 스튜디오 맞춤법 지적 끄기1. 왼쪽 위 상단에 File -> 2. Settings -> 3. Edit..

Flutter 2024.11.05

[Flutter] 원, 직사각형에 면적을 구하는 코드

✨ 공식▶️ 원 면적 구하기원에 면적 : 파이(3.14) * 반지름 * 반지름▶️ 직사각형 면적 구하기작사각형 면적 : 가로 * 세로 void main(){ // 문제 1 호출 print(calculateCircleArea(5.0)); // 문제 2 호출 print(calculateRectArea(3.0, 4.0));}// 1. 원 면적을 구하는 코드를 작성하시오// 2.직사각형을 면적을 구하는 코드를 작성하시오// 문제 1 - 함수 선언double calculateCircleArea(double radius){ // 원에 면적 : 파이(3.14) * 반지름 * 반지름 return 3.14 * radius * radius;}// 문제 2 - 함수 선언double calculateRectArea..

Flutter 2024.09.06

[Flutter] 간단한 이자를 계산하는 함수를 만들어 보자

▶️ 이자율 계산 공식이자 = 원금 * 이자율 * 시간 void main(){ calculateInterest(5000, 10, 1);}// 간단한 이자를 계산하는 함수를 만들어 보자// 이자 = 원금 * 이자율 * 시간void calculateInterest(double principal, double rate, double year){ double interest = (principal * rate * year) / 100; print("이자율 : ${interest}");}void calculateInterest(double principal, double rate, double year){ double interest = (principal * rate * year) / 100; pri..

Flutter 2024.09.06