Study 2주차 :: Flutter 공부하기 (2) - Flutter 기초

김모디·2023년 3월 24일
0

Flutter Study

목록 보기
3/3

시작하기

windows에 설치하기

  • chocolatey를 이용해 다음 순서대로 실행한다.
  1. 아래 주소로 가서 chocolatey를 다운로드한다.

  2. powerShell을 관리자 권한을 이용해 실행한다.

  3. Get-ExecutionPolicy을 입력한다.

    • 넘어가지 않고 restricted 라는 결과가 반환된다면 chocolatey에 있는대로 Set-ExecutionPolicy AllSigned 혹은 Set-ExecutionPolicy Bypass -Scope Process를 입력한다.
  4. 이후 다음 명령어를 입력한다.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Dart Pad 접속하기

실행하기

기본 코드


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
	// (1) runApp
  runApp(App());
}

// (2) widget
class App extends StatelessWidget {
  @override
  (3) build
  Widget build(BuildContext context) {
  	(4) 디자인 시스템
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(S
        title: Text('Hello Flutter!'),
      ),
      body: Center(
        child: Text('Hello World'),
      ),
    ));
  }
}

코드 해설

(1) runApp

runApp은 내장 패키지 함수로 반환값이 없고, widget을 받는다.

(2) Widget

widget

  • widget은 화면을 구성하는 요소로 화면을 구성하는 모든 요소를 widget이라고 한다.
  • widget을 조합하여 화면을 구성하고, widget을 조합하여 화면을 구성하는 것을 widget tree라고 한다.

statelessWidget

  • stateless widget은 상태를 가지지 않는 core widget으로, 기본적인 widget이다.

Scaffold

  • Scaffold는 우리 화면의 기본 구조를 제공하는 widget이다.
  • Scaffold는 AppBar, Body, BottomNavigationBar, FloatingActionButton, Drawer 등을 제공한다.
  • 모바일앱은 대부분 Scaffold를 사용하여 화면을 구성한다.

center

  • child를 가운데 정렬해주는 Widget
  • 상단에서는 child로 Text 위젯을 줬다.
    	```
    Center (
    child : Text("중앙정렬할 텍스트")
    ),

(3) build 메소드

  • widget에는 build 메소드가 있고, 이를 이용해 다른 Widget 혹은 Widget tree를 반환한다.

(4) MaterialApp, cupertinoApp

디자인 시스템

  • Material과 Cupertino는 모두 위젯 트리의 최상단에 위치해야 한다.
  • 두 디자인 시스템 모두 'home' 속성을 가지며, 화면에 표시할 위젯을 지정한다.

Material App

  • Material은 구글에서 제공하는 디자인 시스템이다.
  • Material App은 Material 디자인을 사용하는 앱을 만들 때 사용하는 위젯이다.
    	```
    return MaterialApp(
    home: Text('Hello World'),
    );

Cupertino App

  • Cupertino은 애플에서 제공하는 디자인 시스템이다.
  • Cupertino App은 Cupertino 디자인을 사용하는 앱을 만들 때 사용하는 위젯이다.

나만의 디자인 시스템

  • 나만의 디자인 시스템을 갖고 싶더라도 일단은 테마를 선택해야 한다.
  • 즉, 앱의 시작점을 만들어서 기본 UI 설정과 재료를 넣어야 한다.
  • Flutter는 구글이 만들었기에 Material이 기본이 더 어울릴 것이다.
  • 그래서 많은 강의에서 Material을 사용한다.
profile
안녕하세요. 1년차 (실상은 병아리 n개월차) 웹 프론트엔드 개발자입니다. tistory와 oopy를 거쳐 새로운 블로그에 공부한 내용을 기록해보고자 합니다.

0개의 댓글