728x90 dart6 [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. 이전 1 다음 728x90
