WhatTheCom

UI 배치를 효과적으로 하기 위해예시 코드import 'package:flutter/material.dart';void main(){ runApp(containerbox());}class containerbox extends StatelessWidget { @override Widget build(BuildContext context){ return MaterialApp( debugShowCheckedModeBanner: false, title: '컨테이너 박스', home: Scaffold( appBar:AppBar( title: Text('컨테이너 박스'), ), body: Container( de..

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

비동기 프로그래밍하나의 작업뿐만 아닌, 동시에 여러 작업을 수행할 수 있게 해주는 프로그래밍Dart에서는 Future, await, async, Stream을 사용해 비동기 프로그래밍을 한다. FutureFuture는 나중에 실행할 코드들을 정의할 때 사용한다.Future sendData() { return Future.delayed(Duration(seconds: 3), (){ return 'Send Your Data'; });}void main() { print('Data를 보내는 중...'); sendData().then((data) { print(data); });} Future를 사용한 sendData 함수는 3초 뒤 'Send Your Data'라는 문자열을 반환한다.Fut..

Dart의 클래스클래스 정의 및 인스턴스 생성 // 클래스 정의class Robot { String meterial; String name; int madeYear; // 생성자 Robot(this.meterial, this.name, this.madeYear); //메서드 void information() { print('이 로봇의 이름은 $name이고, $meterial로 이루어져 있으며, $madeYear에 만들어졌습니다.'); }}void main(){ var ironRobot = Robot('iron', 'ironRobot', 2024); ironRobot.information(); } Robot이라는 Class를 만들..

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

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 : 컴파일 시 ..

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

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에서 웹앱이 정상적으로 실행되는걸 확인할 수..

테스트 환경 선택Flutter로 만든 앱은 iOS, Android에서도 실행이 되면서 Chorme, Edge에서도 실행이 가능하다. 우리는 스마트폰 기기에서 사용할 앱을 만들거라, Android Studio에서 에뮬레이터를 실행시켜준다. 프로젝트 생성터미널을 열고 다음 명령어를 입력하자flutter create 프로젝트_이름 프로젝트_이름 이라는 폴더가 만들어지고 개발을 위한 환경들이 만들어졌다. cd 프로젝트_이름으로 만들었던 프로젝트 폴더에 들어간 후 flutter run으로 앱을 실행시킬 수 있다. 첫 실행시엔 조금의 시간이 걸린다. 이후에는 바로 작동이 된다.  아래 + 버튼을 누르면 숫자가 카운터되는 앱이 에뮬레이터에 실행되었다. 이건 Flutter에서 기본으로 만들어진 앱이다. 이렇게 Flut..

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