728x90 모바일/Flutter8 [Flutter] 04 플러터 위젯 사용법 - 스캐폴드/머티리얼 디자인 머티리얼 디자인(material design) 구글에서 2014년부터 사용한 플랫 디자인(flat design) 지침 평면, 단색위주의 간결한 디자인을 바탕으로 앱의 용량을 줄이고 동시에 속도를 개선할 수 있다. 직관적이고 일관된 UI를 경험할 수 있다. 스캐폴드(Scaffold) 클래스 각종 위젯을 어티리얼 디자인 레이아웃으로 설계하는 것을 돕는 역할을 한다. 스캐폴드 클래스로 화면 구성하기(제목 줄, 버튼, 아이콘과 텍스트 출력) import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext contex.. 2023. 2. 16. [Flutter] 03 플러터 내부 구조 - 위젯의 생명주기 위젯의 생명주기 요약 순서 생명주기 내용 1 createState() 처음 스테이트풀을 시작할 때 호출 2 mounted == true createState() 함수가 호출되면 mounted는 true 3 initState() State에서 제일 먼서 실행되는 함수 State 생성 후 한 번만 호출 4 didChangeDependencies() initState() 호출 후에 호출되는 함수 5 build() 위젯을 렌더링하는 함수. 위젯을 반환 6 didUpdateWidget() 위젯을 변경해야 할 때 호출하는 함수 7 setState() 데이터가 변경되었음을 알리는 함수 변경된 데이터를 UI에 적용하기 위해 필요 8 deactivate() State가 제거될 때 호출 9 dispose() State가 .. 2023. 1. 31. [Flutter] 03 플러터 내부 구조 - 플러터 간단 실습 1. 데모 앱을 수정해 보자 안드로이드가 만들어준 플러터 프로젝트의 데모 앱을 변경해 보자. 하얀색 배경에 파란색 글씨로 hello Fultter를 출력해 보자. import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primaryS.. 2023. 1. 7. [Flutter] 03 플러터 내부 구조 - 플러터 프로젝트, 위젯 플러터 프로젝트의 폴더 주요 폴더 소개 폴더 내용 비고 android 안드로이드 프로젝트 관련 파일 안드로이드 스튜디오로 실행 가능 ios iOS 프로젝트 관련 파일 엑스코드로 실행 가능(맥 전용) lib 플러터 앱 개발을 위한 다트 파일 플러터 SDK 설치 필요 test 플러터 앱 개발 중 테스트 파일 테스트 편의성 제공 루트 안 파일 소개 파일 내용 비고 pubspec.yaml 패키지, 이미지, 폰트 설정 직접관리 README.md 프로젝트 소개 .gitignore 깃(git)에 커밋, 푸시 등 소스 코드를 업로드할 때 필요 없는 파일 기록 .metadata Flutter SDK 정보 자동 관리 .pakages Flutter SDK에 사용하는 기본 페이지 경로 first_flutter_app.imi .. 2023. 1. 6. [Dart] null 오류 해결 / not_initialized_non_nullable_variable [구현 코드] 자동차 클래스 구현 - BMW를 세번 할인하는 함수 호출, 가격 출력 void main() { Car bmw = Car(320, 100000, 'BMW'); Car benz = Car(250,70000, 'BENZ'); Car ford = Car(200, 80000, 'FORD'); bmw.saleCar(); bmw.saleCar(); bmw.saleCar(); print(bmw.price); } class Car { int maxSpeed; num price; String name; Car(int maxSpeed, num price, String name) { this.maxSpeed = maxSpeed; this.price = price; this.name = name; } num sa.. 2023. 1. 5. [Flutter] 02 다트 언어의 특징 다트 언어의 9가지 특징 1) main() 함수로 시작한다. 2) 어디에서나 변수를 선언하고 사용할 수 있다. 3) 모든 변수가 객체이다. 모든 객체는 Object 클래스를 상속받는다. 4) 자료형이 엄격한 언어이다. 변수에 지정한 자료형과 다른 유형의 값을 저장하면 오류가 발생한다. 여러 자료형을 허용하려면 dynamic 타입을 이용할 수 있다. 5) 제네릭 타입을 이용해 개발할 수 있다. List처럼 int를 넣을 수도 있고, List처럼 다양한 데이터를 넣을 수도 있다. 6) public, protected 같은 키워드가 없다. 외부로 노출하고싶지 않다면 변수나 함수 이름 앞에 언더스코어(_)를 이용해 표시할 수 있다. 7) 변수나 함수의 시작은 언더스코어 또는 문자열로 시작하고 그 이후에 숫자를 .. 2023. 1. 5. [Flutter] 01 플러터 시작하기 - 플러터가 주목받는 이유 플러터의 특징 플러터를 상징하는 대표적인 특징 3가지는 높은 개발 효율, 유연한 사용자인터페이스, 그리고 네이티브 앱 못지않게 빠른 속도이다. 1) 높은 개발 효율 iOS와 안드로이드 앱을 동시에 개발할 수가 있어서 효율적 어떤 운영체제에서도 똑같은 사용자 인터페이스와 사용자 경험(UX)을 제공 소스 수정 후 빌드 과정 없이 결과 화면에 바로 표시해주는 핫 리로드(hot reload) 기능으로 개발 시간을 줄임 2) 유연한 사용자인터페이스 역동적이면서 유연한 사용자 인터페이스 다양한 위젯을 제공해 사용자 맞춤형 앱을 쉽게 만들 수 있음 원하는 위젯이 없으면 선과 도형으로 직접 그려서 만들 수도 있음 강력한 애니메이션 기능을 사용하여 복잡한 계산식 없이 적은 노력으로 만족스러운 사용자경험을 줄 수 있음 i.. 2023. 1. 1. [Flutter] 01 플러터 시작하기 - 플러터의 등장 배경 플러터의 등장 배경 애플 : 오브젝티브-C → 스위프트(Swift) 구글 : 자바 → 코틀린(Kotlin) 오브젝티브-C나 스위프트로 iOS 앱을 개발하거나 자바나 코틀린으로 안드로이드 앱을 개발하는 것처럼 각 모바일 운영체제에 맞는 언어로 개발한 앱을 네이티브 앱(native apps)이라고 함 웹앱, 하이브리드 앱의 등장 더 많은 사용자가 앱을 사용하게 하기 위해서는 똑같은 앱을 iOS용과 안드로이드용으로 두번 개발해야 했기 때문에 하나의 소스로 iOS와 안드로이드에서 실행할 수 있도록 웹앱과 하이브리드 앱이 등장함 - 웹앱 : 웹 기술을 이용해서 만든 앱 앱의 화면을 나타내는 뷰를 모바일용 웹으로 만들어서 다양한 기종과 해상도에 대응하며 빠르게 개발 *프로그레시브 웹앱 : 네이티브 앱처럼 알림도 보.. 2022. 12. 31. 이전 1 다음 728x90
