Flutter/튜토리얼 (9) 썸네일형 리스트형 Flutter 기본 레이아웃 종류 Row, Column children을 사용하여, 가로, 세로 배치 Container, SizedBox Container, 박스배치 (박스에 색칠을 한다던지, 크기를 설정하는 용도) ScrollView 스크롤뷰, 문자그대로 스크롤할 수 있음 ListView와 GridView는 ScrollView의 일종 ListView List로 항목들을 보여준다. Scroll을 상속받아서 작성되었기 때문에, 범위를 벗어나면 Scroll할 수 있음 GridView Grid로 m x n 의 화면 구성을 작성할 수 있다. PageView 슬라이드로 화면전환할 수 있음(Appbar와 BotoomNavigationBar는 변경되지 않는다.) BottomNaviagionBar 하단에 위치된 레이아웃, NavigationBar Flutter StatelessWidget과 StatefulWidget Flutter에서 기본생성해주는 예제를 살펴보면 버튼 클릭시 카운트를 올려주는 예제로 되어있다. 버튼을 stateless widget이고, 카운트가 올라가는 화면은 statefulWidget이다. 플러터 개발자는 그런 차이를 보여주려고 한 것으로 보인다. StatefulWidget은 state 객체를 가진다. 그리고 state가 수정되면 화면을 다시 렌더링한다. react와 비슷하게 setState로 화면에 그릴 값들을 수정할 수 있다. StateelssWidget은 한번 화면을 그린후, 다시 렌더링하지 않는다. dart 타입 검사 연산자/ 조건 표현식(null check) as: 형변환( 상위타입으로 변환가능) is: 객체가 특정타입이면 true, 상속관계(is-a)도 반영 is!: 객체가 특정타입이면 false 조건 표현식(null check) if( person != null){ return person.name; } else return null; // 단순화 person?.name 엘비스 연산자 if( person != null){ return person.name; } else return 'no name'; // 단순화 person.name ?? 'no name' Flutter Dart 함수 다트는 객체지향언어 다트 함수의 특징 - 변수가 함수를 참조할 수 있음 - 함수의 인자로 함수를 전달할 수 있음 - 이름있는 선택 매개변수 - 위치적 선택 매개 변수 - 익명 함수 및 람다 변수가 함수를 참조할 수 있음 var name = getName(){} 함수의 인자로 함수를 전달할 수 있음 getA(getB(), getC()){} 이름있는 선택 매개변수 String getter(String a, {String b, String c ='exmaple'}) { // b와 c를 선택매개변수로 지정, c는 default 값이 있음 return ''; } main(){ getter('a', b: 'b'); getter('a', b: 'b', c: 'c'); } 위치적 선택 매개 변수 String gette.. Flutter - Isolates / Thread 플러터의 언어인 다트의 특징은 다음과 같다. 1. 객체지향 2. Optional type 3. 메모리를 공유하는 thread 대신에 독립 메모리를 가지는 isolate 사용(궁금증) 4. 자바스크립트 호환 여기서 isolate가 무엇인지 살펴보자. Isolate는 자체 메모리 공간에서 이벤트를 지속적으로 처리하는 이벤트 루프가 있는 스레드. 실행가능한 이벤트가 있고, 대기가 없으면 스캔후 실행할 수 있다. dart에서는 isolate를 생성하여 multithread로 실행할 수 있다. 하나의 스레드가 자신의 메모리 공간을 가지고, 자신의 gc를 가진다. 예측이 가능하므로 효율적이다? 두 개의 isolate가 같이 작업하려면 메시지를 주고 받아야한다. 멀티스레드 사용시 주의해야 하는 공유자원에 대한 컨트롤.. Flutter Button 버튼의 종류 TextButton: 텍스트 버튼 IconButton: 아이콘 버튼 ElevatedButton: 예쁜 버튼 속성 child: Text같은거 지정 onPressed: 버튼이 눌렸을 때, 어떻게 동작하는가 style: 버튼의 스타일 예제 코드: import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBa.. 배치와 Scaffold 출처: https://www.youtube.com/watch?v=U6rLIFn59Kw MaterialApp -> google 스타일의 , 또는 커스텀 디자인의 (디자인 뿐만 아니라 기본세팅) Cupertino -> iphone 스타일의 애플리케이션 MaterialApp Scaffold -> 상단 중단 하단으로 구성되어있는 애플리케이션 개발용 appBar: (상단) body: (중단) bottomNavigationBar: (하단) 가로 배치: Row 세로 배치: Column 속성: mainAxisAlignment (Row의 경우 가로속성, Column의 경우 세로속성) crossAxisAlignment(Row의 경우 세로속성, Column의 경우 가로속성) Column 예시 Column( mainAxisA.. 기본 위젯 구현하기 안드로이드 스튜디오에서 New -> new flutter Project -> web을 추가하여 테스트 stless -> statelessWidget이 생성됨 text, icon, image, Text import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( home: Text('hello world'), ); } } Icon import 'package:flut.. Flutter 설치하기(Windows) 1. 안드로이드 스튜디오 설치 https://developer.android.com/studio 2. flutter sdk 설치 https://docs.flutter.dev/get-started/install/windows# 3. flutter sdk path 추가 flutter sdk 압축해제후 flutter/bin 경로 3. 안드로이드 스튜디오에서 Flutter 추가 File -> Settings -> Plugins -> Marketplace Flutter 검색후 설치-> Restart 4. 새 프로젝트 생성 File -> New -> New Flutter Project 이전 1 다음
