Flutter 7

Flutter로 앱 만들기 - 10. MaterialApp의 위젯 정리

MaterialAppFlutter 앱의 뼈대가 되는 위젯Application의 제목이나 테마, 시작될 때 표시되는 위젯(home) 등을 설정할 수 있고 route와 navigater를 이용해 다른 맵으로 갈 수 도 있는 기능을 하는 Widget이다.Scaffold화면을 사용할 수 있게 해주는 Widget이다.상단, 하단, 중단을 나눠서 사용할 수도 있고 다양한 영역에 Widget을 포함 시킬 수 있다.AppBar화면의 상단에 위치title이나 Toggle 메뉴 등을 넣을 수 있다.Body앱의 콘텐츠를 표시Center, Column, Row 등 다양한 위젯을 포함 FloatingActionButton화면 하단 우측에 위치한 버튼새 항목을 추가하는 등의 액션 버튼 BottomNavigationBar화면 하단..

Dart/Flutter 2024.06.22

Flutter로 앱 만들기 - 7. Dart의 함수

Dart의 함수함수 정의와 호출void main(){ //함수 정의 int add(int a, int b){ return a + b; } //함수에 인자 전달 int result = add(5,7); print(result); // 12 출력} 매개변수의 2가지매개변수에는 위치와 이름 매개변수가 있다. 위치 매개변수(Positional Parameters)인자를 전달받을 때 같은 위치에 값을 매핑하는 매개변수void main(){ void people(String name, int age){ print('이름 : $name, 나이 : $age'); } people('minsu', 12);} 결과: 함수를 호출할 때 같은 위치에 인자를 전달하기에 첫번째 m..

Dart/Flutter 2024.06.20

Flutter로 앱 만들기 - 6. Dart의 기본 문법 정리

Flutter에서 사용되는 Dart 언어Flutter로 앱을 만들기 위해서는 Google에서 개발한 Dart 언어를 사용해야한다. Dart를 테스트하기 위한 환경은 DartPad에서 가능하다. 기본 문법변수와 데이터 타입선언 : var, final, const타입 : int, double, string, bool, List, Map 변수 선언 후 출력 예시 :void main(){ var i; //변수 선언, var로 선언된 변수는 실행 시 자료형 추측 i = 3; //변수 안에 값 할당 print(i); // 3출력 print('i는 $i 입니다.'); // 'i는 3입니다.' 출력} var : 추측가능한 변수를 선언final : 변경 불가능 변수const : 컴파일 시 ..

Dart/Flutter 2024.06.20

Flutter로 앱 만들기 - 5. main.dart의 기초 구조

main.dartmain.dart는 Flutter로 앱을 작성하는 파일로 거의 모든 코드들을 여기에 작성한다. 기초 구조를 알아보기 전 먼저 Empty Application을 만들어보자 VS Code에서 Flutter New Project1. Ctrl + Shift + P를 사용하여 Flutter의 새로운 프로젝트를 생성  2. Emplty Aplication 선택 3. 경로 지정 후 Project 이름 작성 4. main.dart에 생성된 코드 확인import 'package:flutter/material.dart';void main() { runApp(const MainApp());}class MainApp extends StatelessWidget { const MainApp({super.key..

Dart/Flutter 2024.06.17

Flutter로 앱 만들기 - 4. VS Code에서 테스트하기

VS Code에서 프로젝트 만들고 테스트하기1. VS Code에서 Ctrl + shifr + p를 눌려 fullter를 검색한다.  2. New Project를 선택  3. 테스트를 위해 Application을 선택실제 개발을 시작할 땐 Empty Application을 선택해 비어있는 Project를 만들어야함4. 폴더를 지정하고 프로젝트 이름 작성 5. 새로운 프로젝트가 생성되었다.main.dart에는 기본적으로 생성되는 예제의 코드들이다. 6. F5를 눌려 테스트 환경을 선택 할 수 있다.에뮬레이터가 깔려 있다면 Chrome, Edge, Window 밑에 mobile emulator를 선택할 수 있다. 일단 Chrome을 선택해서 테스트해보자  Chrome에서 웹앱이 정상적으로 실행되는걸 확인할 수..

Dart/Flutter 2024.06.17

Flutter로 앱 만들기 - 2. Flutter란?

Flutter구글에서 개발된 UI 툴킷, 하나의 코드 베이스로 iOS, Android, 웹 및 데스크톱 앱을 제작할 수 있는 개발프레임워크다.Dart 프로그래밍 언어를 기반으로, 위젯(Widget)을 사용하여 UI를 구성, Hot Reload를 통해 빠르게 UI 변경사항을 반영할 수 있다. Flutter를 사용해야 하는 이유1. 크로스 플랫폼- 하나의 코드로 iOS, Android 동시 호환이 되는 애플리케이션을 개발할 수 있다.- 플랫폼 별 별도의 UI 개발이 필요없다. 2. 빠른 개발 속도- Hot Reload 기능으로 코드 수정 후 바로 결과를 확인할 수 있다. 3. Widget 기반 UI 설계- 유연하고 반응성 있는 사용자 인터페이스 구현 가능- 다양한 스타일 지원 4. 성능 최적화- 네이티브 앱..

Dart/Flutter 2024.06.16

Flutter로 앱 만들기 - 1. 설치하기 및 개발 환경 만들기

Flutter 설치하기1. Flutter 공식 홈페이지에서 flutter SDK 압축파일을 다운로드한다. 2. 압축 해제한 폴더안 Flutter 폴더를 특수문자, 한글 등이 포함되지 않은 폴더에 넣는다.ex) C:\Users\[사용자] 폴더 안VS code 설치하기1. VS Code 공식 홈페이지에서 VS code를 설치해준다.   2. Extension Tab에서 Flutter를 검색 후 설치해준다. 3. Ctrl + Shift + P를 입력해 Flutter를 검색한다. 4. New Project를 클릭하면 오른쪽 아래 SDK 관련 오류 문구가 뜬다.5. Location SDK를 클릭해 flutter 폴더 안으로 지정 환경 변수에 경로 추가하기1. Windows + R을 눌려 sysdm.cpl을 입력 ..

Dart/Flutter 2024.06.16