selfstarter

Flutter 기본사항 정리 본문

App/Android

Flutter 기본사항 정리

selfstarter 2020. 6. 29. 23:04

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등 화면에 기본적인 요소를 쉽게 그리도록 지원한다

Comments