6단계 앱을 만들려면 알아야 하는 그 밖의 지식

6.1. 앱 만들기 프로세스

기획 → UI 구상하기 → 구현하기 → 테스트 순으로 진행한다.

프로토타입용 프로그램

이름	간략 설명
피그마	UI 디자인에 특화돼 있는 프로그램으로, CSS나 플러터 코드로 받아볼 수 있는 기능을 제공한다.
어도비 XD	피그마와 사실상 똑같은 기능을 제공한다.
플러터 플로우	플러터에 특화된 UI 구현 툴이며 웹에서 UI를 디자인하면 플러터 앱을 통째로 반환해준다. 노코드 솔루션이다.

폴더구조

폴더명	설명
screen	스크린 전체에 해당되는 위젯들을 모아두는 폴더이다.
component	스크린을 구성하는데 공통으로 사용될 만한 요소의 위젯들을 모아두는 폴더이다.
model	모델들을 따로 모아두는 폴더이다.
const	상수들을 모아두는 폴더이다.

6.2. 플러그인 추가 방법

오픈소스 프로젝들을 불러와서 프로젝트에 추가하면 개발 속도를 올릴 수 있으므로, 플러그인을 사용하는 방법을 설명한다.

pubspec.yaml 파일에 원하는 플러그인을 추가하고 [pub get]버튼을 눌르주면 프로젝트에서 사용이 가능하다.

Visual Studio Code를 사용하면 PubSpec Assist를 이용하면 설치하면 pubspec.yaml에 알아서 설치가 된다.

control + shift +p를 눌러 pub이라고 입력 후 Add/update dependencies를 선택 후 설치하고자하는 플러그인을 입력하면 된다.

6.3. 주변 장치 종류

플러터 프레임워크는 다양한 하드웨어 기능을 제공해준다. 스마트폰에서 장치를 손쉽게 사용할 수 있다.

기능	설명	플러그인
센서	핸드폰의 움직이는 속도를 측정하는 Accelerometer, 핸드폰의 회전을 측정하는 Gyroscope, 자기장을 측정하는 Magnetometer 등을 사용할 수 있다.	sensor_plus
GPS	GPS 권한 관리, GPS 상의 핸드폰 위치 업데이트 받기, 위도 경도를 기반으로 거리 계산하기 등 위치 서비스 기능을 사용할 수 있다.	geolocator
카메라	카메라 권한을 관리하고, 카메라가 찍고 있는 화면을 핸드폰에 보여주고, 사진을 찍거나 영상을 촬영할 수있다.	camera
블루투스	주변 블루투스 기기를 탐색하고, 연결하고, 통신할 수 있다.	flutter_blue
와이파이	와이파이를 키거나 끄고, 연결 상태를 가져오고, 정보를 가져오고 특정 와이파이에 연결할 수 있다.	wifi_iot

플러터 개발시 추천 vsc 익스텐션들

https://willnfate.tistory.com/entry/VSCODE-Flutter-Extension-추가하기

6.4. 연습용 앱 만들기: 스플래시 스크린 앱

앱이 로딩되는 동안 보이는 스플래시 스크린을 간단하게 구현한다. 여기서는 Row 위젯과 Column 위젯을 사용한다.

6.4.1. 사용자 정의 위젯 만들기: Statless 위젯

위젯의 형태는 2가지로 나뉜다,

• Stateful 위젯 : 위젯의 내부에서 값이 변경되었을 때 위젯 자체에서 다시 렌더링을 실행시킬 수 있는 위젯
• Statless 위젯 : 위젯의 내부에서 값이 변경이 되어도 위젯 자체적으로 다시 렌더링할 수 없는 위젯

import 'package:flutter/material.dart';

void main() {
  runApp(SplashScreen()); // SplashScreen 위젯을 첫 화면으로 지정
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 위젯의 UI 구현
    return (MaterialApp(
      // 최상단 위젯
      home: Scaffold(
          // 항상 두번째로 입력되는 위젯으로 뼈대라고 생각
          body: Center(
        // 중앙 정렬 위젯
        child: Text("Splash Screen"),
      )),
    ));
  }
}

Scaffold 위젯은 레이아웃을 정해준다고 생각하면될듯함.

6.4.2. 배경색 바꾸기: Container와 BoxDecoration 위젯

BoxDecoration 클래스는 배경색, 테두리 색상, 테두리 두께 등 컨테이너의 여러가지 UI 요소를 지정할 수 있다.

import 'package:flutter/material.dart';

void main() {
  runApp(SplashScreen()); 
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return (MaterialApp(
      home: Scaffold(
          body: Container(
				// 컨테이너를 디자인하는 클래스
        decoration: BoxDecoration(color: Colors.orange),
        child: Center(child: Text("Splash Screen")),
      )),
    ));
  }
}

6.4.3. 이미지 출력하기: Image 위젯

이미지 위젯은 다섯가지 생성자가 존재한다.

• 기본 Image 생성자 : ImageProvider라는 또 다른 위젯에서 이미지를 그린다.
• Image.asset 생성자 : 앱에 저장된 asset 파일로 이미지를 그린다.
• Image.network 생성자 : URL을 통해서 이미지를 그린다.
• Image.file 생성자 : 파일을 통해서 이미지를 그린다.
• Image.memory 생성자 : 메모리에서 직접 이미지를 그린다.

1. 루트 디렉토리에 assets을 만들고 logo.png 파일을 넣어준다.
2. pubspec.yaml 파일에 assets 폴더를 지정해준다.
3. 다음과 같이 주석을 해제하고 폴더 이름을 적어준다.

4. Pubspec Assist의 기능을 사용해 패키지를 업데이트한다. 혹은 flutter pub get 명령어를 입력한다.

이미지 에셋 적용

색상을 지정하기위해 0xFFF99231을 사용했는데 앞에0x는 16진수를 의미하고 FF는 불투명도 100%를 의미한다. F99231은 색상을 의미한다.

import 'package:flutter/material.dart';

void main() {
  runApp(SplashScreen()); // SplashScreen 위젯을 첫 화면으로 지정
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 위젯의 UI 구현
    return (MaterialApp(
      // 최상단 위젯
      home: Scaffold(
          body: Container(
        decoration: BoxDecoration(color: Color(0xFFF99231)),
        child: Center(child: Image.asset("assets/logo.png")),
      )),
    ));
  }
}

6.4.4. 위젯 정렬하기: Row & Column

플러터팀이 만들어 제공하는 애니메이션 위젯을 사용한다.

• LinearProgressIndicator : 일자 형태의 로딩
• CircularProgressIndicator : 동그라미 형태의 로딩

Row의 경우 가로는 최대한 크기를 차지하고 세로는 최소한의 크기를 차지한다.

Column의 경우 세로는 최대한의 크기를 차지하고 가로는 최소한의 크기를 차지한다.

import 'package:flutter/material.dart';

void main() {
  runApp(SplashScreen()); // SplashScreen 위젯을 첫 화면으로 지정
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 위젯의 UI 구현
    return (MaterialApp(
      // 최상단 위젯
      home: Scaffold(
          // 항상 두번째로 입력되는 위젯으로 뼈대라고 생각
          body: Container(
              decoration: BoxDecoration(color: Color(0xFFF99231)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset(
                        "assets/logo.png",
                        width: 200,
                      ),
                      CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation(Colors.white),
                      )
                    ],
                  ),
                ],
              ))),
    ));
  }
}

완성된 코드에서 Image.asset의 크기를 안주게되면 overflow 됬다는 화면이 나오게 되는데 아직 시작한지 얼마되지않아서 이유는 모르겠다… 혹시 이유를 아시는 분은 알려주세요…