일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- FLUTTER
- error
- jQuery
- release Apk
- Android Apk 이름 변경
- Exception
- R프로그래밍
- android fragment
- html
- Android
- Kotlin
- android error
- MySQL
- 안드로이드
- CSS사용법
- Firebase
- Android Apk
- JavaScript
- Program type already present
- release unsigned
- tomcat
- java error
- Eclipse
- apache gzip
- fragment
- Android Apk 이름
- spring
- DataTable
- css
- Java
- Today
- Total
selfstarter
Flutter 기본사항 정리 본문
Flutter 구조 정리
VSCode 단축키
새 프로젝트 생성 : ctrl+shipt+p 하고 newProject 선택
파일열기 : ctrl+p
StatefulWidget
StatelessWidget : 화면이 변화하지 않을 때 사용. build가 한번만 호출됨
StatefulWidget : setState 함수에 의해 상태가 변화될 때 다시 그린다. build는 다시 그릴 때 마다 호출됨
Virtual Device 실행
1) VSCode 메뉴에서 Terminal선택
2) Terminal에서 flutter create flutter_dev 명령어 실행
3) cd flutter_dev 실행
4) android studio의 virtualDevice 실행(만약 없다면 만들어줘야함)
5) 해당 코드가 있는 VSCode Project에서 Terminal 열고 flutter run 명령어 실행
Flutter Tutorials
Tutorials
Basic Code
1) ctrl+shipt+p로 새로운 프로젝트를 생성한다
2) 전부 삭제하고 아래의 코드를 작성한다
3) 코드를 작성할 때 반드시 material.dart는 꼭 import해야한다. flutter를 사용하기 위한 기본적인 widget이나 function은 다 여기 들어있다
4) import를 삭제하면 runApp, Center가 전부 에러가 나는 것을 확인할 수 있다
5) new 키워드 없이 객체 생성이 가능하고 생성자에 멤버변수 이름과 값을 초기화 할 수 있다(이름을 생략할 수도 있다) ex. User(id: "id", pass: "1234") , 즉 아래코드에서 Text()는 Text객체를 생성하는 것이고 첫번째 인자로 'Hello, world'라는 String, 두번째는 textDirection 멤버변수에 TextDirection.ltr 값을 넣는것이다.
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Text(
'Hello, world!',
//The text flows from left to right (e.g., English, French).
textDirection: TextDirection.ltr,
),
),
);
}
Basic Widget
widget이란 화면을 구성하는 요소를 말한다
눈에 보이지 않든, 보이든 전부다 위젯이고 위젯안에 위젯이 있는 식으로 flutter 화면이 구성된다
Text : 화면에 text를 표시한다.
child: Text(
'Hello, world!',
//The text flows from left to right (e.g., English, French).
textDirection: TextDirection.ltr,
)
Row, Column : 화면의 행과 열을 구성
Container : 사각형의 ui를 구성하고 그 사각형 box의 배경, 선굵기, 그림자를 꾸밀 수 있다.또 margin과 padding을 줄수도 있다.또 자식을 구성하고 꾸밀 수 있다.
margin에서 EdgeInsets는 내부 패딩을 의미한다. 또한 Center를 지워버리면 네모난 사각형은 화면 전체를 차지한다
import 'package:flutter/material.dart';
void main() {
runApp(
Center(
child: Container(
margin: const EdgeInsets.all(100.0),
color: Colors.amber[900],
width: 20.0,
height: 40.0,
),
),
);
}
SafeArea : media query로 화면에 content를 보호해주는 영역
Scaffold : Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar등 화면에 기본적인 요소를 쉽게 그리도록 지원한다
'App > Android' 카테고리의 다른 글
Android Spinner 사용법 (0) | 2020.07.17 |
---|---|
에러해결 Android toolchain - develop for Android devices (Android SDK version 29.0.3) (0) | 2020.07.04 |
Flutter SDK, Android, VSCode 설치 (0) | 2020.06.29 |
Dart 기본 문법 정리(Dart Basic Grammar) (0) | 2020.06.27 |
How to make Simple CustomDialog in Android (0) | 2020.06.27 |