코드팩토리의 플러터 프로그래밍 (책_플러터 실행 및 위젯)

‘Hello Code Factory’ 출력하기

import 'package:flutter/material.dart';

void main() {
  runApp(
      MaterialApp(
        home: Scaffold(
          body: Center(
            child: Text(
              'Hello Uri',
          ),
          ),
        ),
      )
  );
}

MaterialApp :  머터리얼 디자인 기반의 위젯들을 사용하게 해주는 위젯

Scaffold : MaterialApp 위젯 다음으로 위치하며 화면 전체를 차지하며 레이아웃을 도와주고 UI관련 특수 기능을 제공

알림과 같은 스낵바를 실행한다던가, 화면의 위에 앱바를 추가하거나 아래에 탭바를 추가하는 기능을 제공한다.

 

플러터는 마지막 매개변수의 끝에 ' , '기호를 추가하는 코딩 스탠다그가 있다. 기호가 ㅇ벗어도 에러가 나지는 않지만 코드 자동 정리를 실행했을 때 , 기호를 기준으로 나눔이 된다.

 

 

IOS 시뮬레이터 실행하기

위 그림처럼 눌른뒤 실행을 누르면 시뮬레이터가 실행된다.

 

 

실제 단말 테스트 환경 구축 

실행하려는 프로젝트의 터미널에서 xcode를 열어준다. 

open ios/Runner.xcworkspace

 

좌측에 Runner를 선택하고 Signing& Capabilities를 선택해서 내 아이폰 연결을 해준다. 

Bundle Identifier를 유니크한 값으로 변경해줘야한다. 나중에 앱을 출시할때 어떤앱과도 겹치면 안된다.

com.[본인 영어 이름].[복잡한 영어 단어]

 

 

위젯 

플러터에서 화면에 보여지는 UI와 관련된 모든 요소는 위젯으로 구성되어 있다. 

위젯은 현재 주어진 상태(데이터)를 기반으로 어떤 UI를 구현할지를 정의한다. 위젯의 상태가 변경되면 변경 사항에 알맞게 변경된 UI를 화면에 다시 그려준다. 

이때 플러터 프레임워크는 기존 상태의 위젯과 새로운 상태의 위젯을 비교해서 UI변화를 반영할 떄 필요한 최소한의 변경 사항을 산출해 화면을 그린다. 

위젯은 자식을 하나만 갖는 위젯과 자식을 여럿 갖는 위젯으로 나뉜다. 

자식을 하나만 갖는 대표적인 위젯들은 대체로 child 매개변수를 입력받는다.

• Container 위젯 : 자식을 담는 컨테이너 역할을 한다. 다만 단순하게 자식을 담는 역할을

하는 게 아니라 배경색, 너비와 높이, 테두리 등의 디자인을 지정할 수 있다.

• GestureDetector 위젯 : 플러터에서 제공하는 제스처 기능을 자식 위젯에서 인식하는 위

젯이다. 탭이나 드래그 그리고 더블 클릭 같은 제스처 기능이 자식 위젯에 인식됐을 때 함

수를 실행할 수 있다.

• SizedBox 위젯 : 높이와 너비를 지정하는 위젯이다. Container 위젯과 다르게 디자인적

요소는 적용할 수 없고 const 생성자로 선언할 수 있어서 퍼포먼스 측면에서 더 효율적이다.

 

다수의 자식을 입력할 수 있는 위젯은 children 매개변수를 입력받으며 리스트로 여러 위젯을 입력할 수 있다. 

• Column 위젯 : children 매개변수에 입력된 모든 위젯들을 세로로 배치한다.

• Row 위젯 : children 매개변수에 입력된 모든 위젯들을 가로로 배치한다.

• ListView 위젯 : 리스트를 구현할 때 사용합니다. 마찬가지로 children 매개변수에 다수의

위젯을 입력할 수 있으며 입력된 위젯이 화면을 벗어나게 되면 스크롤이 가능해진다.

child와 children 매개변수에 지속적으로 하위 위젯을 입력하면 크리스마스 트리처럼 위젯 계층이 정리된다.

Children와 Child의 차이점

플러터는 위젯 아래에 계속 위젝이 입력되는 형태로 '위젯 트리'를 구성하여 UI를 제작한다. 

child는 위젯을 하나만 추가할 수 있고 children은 여럿을 추가할 수 있다. 대부분 위젯은 child 또는 children 매개변수를 하나만 제공하고 동시에 입력받는 위젯은 존재하지 않는다. 

 

맨위에 있던 예제처럼 

child: Text(‘Code Factory’),

child 매개변수에는 단 하나의 위젯만 입력할 수 있다. Center위젯은 child매개변수에 입력된 위젯을 가운데 정렬해주는 기능을 갖고 있기 떄문에 Text위젯을 가운데 정렬해준다.

 

반면 children매개변수는 여러 위젯을 리스트에 입력할 수 있고, 입력된 순서대로 화면에 그려진다. 

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Code'),
              Text('Factory'),
            ],
          ),
        ),
      ),
    ),
  );
}

children매개변수는 리스트를 입력받고 리스트 안에는 원하는 만큼 위젯을 입력할 수 있다. 

'Code'라는 글자를 입력한 Text위젯이 먼저 입력됐고 이어서 'Factory'라는 글자가 입력된 위젯이 입력됐으니 2행에 걸쳐 글자가 화면에 그려진다.