본문 바로가기
Front-End

[Front-End] Flutter

by Judy 2024. 5. 15.

 

"open source"는 소프트웨어의 코드가 공개되어 있고, 누구나 해당 소프트웨어를 사용하거나 수정할 수 있는 형태를 가리킨다.
"Framwork"는 소프트웨어를 개발하기 위한 기본 구조와 함께 특정 작업이나 기능을 수행하기 위한 도구, 규칙 등의 집합체다.
"Native Compiled"는 안드로이드와 iOS코드로 직접 컴파일(코드변환)이 이루어진다는 것이다.
"Multi Platform"이란 여러개의 플랫폼(운영체제)에서 사용 가능하도록 개발 가능하다는 뜻이다.

 

 

Flutter의 경쟁자들

Flutter VS React-Native VS Kotlin

 

플러터는 개발 경험이 너무 좋기 떄문에 놀라울정도로 빠르게 성장했고, 앞으로 더욱 성장할 것이다.

 

Flutter Mac 설치 커맨드

Shell타입 확인 커맨드

echo $SHELL
 

Brew 환경변수에 등록하는 커멘드

> /bin/zsh

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> $HOME/.zshrc
eval "$(/opt/homebrew/bin/brew shellenv)"​

> /bin/bash

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> $HOME/.bashrc
eval "$(/opt/homebrew/bin/brew shellenv)"
 
Brew를 이용한 Flutter 설치
brew install --cask flutter
 
환경변수 추가 코드
export PATH="$PATH:$HOME/Documents/flutter/bin"
 
MacOS Xcode 설치 커맨드
sudo xcode-select --install
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
 
 
Android Home 환경변수 등록 코드
export ANDROID_HOME={경로}
 
 
Flutter Doctor Verbose 커맨드
flutter doctor -v
 
 
Android License 동의 커맨드
flutter doctor --android-licenses
 

 

위젯트리

플로터에서 위젯 트리는 UI를 렌더링(화면에 그리는)하는데 사용하는 계층 구조를 의미합니다.

void main() {
  // 플러터 앱을 실행한다.
  runApp(
    // materialApp은 항상 최상위에 위치한다.
    // scaffold는 바로 아래에 위치한다.
    // Wedget
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.black,
        body: Center(
          child: Text("Hello World!",
              style: TextStyle(
                color: Colors.white,
              )),
        ),
      ),
    ),
  );
}

 

Row

MainAxisAlignment: 가로

CrossAxisAlignment: 세로

 

Column

MainAxisAlignment: 세로

CrossAxisAlignment: 가로

 

MainAxisAlignment

MainAxisAlignment.start: 주축의 시작에 정렬한다.

MainAxisAlignment.end: 주축의 끝에 정렬한다.

MainAxisAlignment.center: 주축의 중앙에 정렬한다.

MainAxisAlignment.spaceBetween: 주축에서 위젯들 사이에 동일한 간격을 두고 정렬한다.

MainAxisAlignment.spaceAround: 주축에서 위젯들 주변에 동일한 간격을 두고 정렬한다.

MainAxisAlignemnt.spaceEvenly: 주축에서 위젯들 앞뒤 및 사이에 동일한 간격을 두고 정렬한다.

 

CrossAxisAlignment.start: 반대축의 시작에 정렬한다.

CrossAxisAlignemnt.end: 반대축의 끝에 정렬한다.

CrossAxisAlignemnt.center: 반대축의 중앙에 정렬한다.

CrossAxisAlignemnt.stretch: 반대축으로 위젯들을 최대로 확장한다.

CrossAxisAlignemnt.baseline: 텍스트 기준선을 기준으로 위젯을 정렬한다.

 

Semantic Versioning

[Major].[Minor].[Patch]

Major 버전: 하위 호환성을 깨뜨리는 중요한 변경이 있을 때 올린다. 주로 기존 API의 변경이나 기능의 큰 변화를 의미한다.

Minor 버전: 하위 호환성을 유지하면서 기능이 추가될 때 올린다. 주로 새로운 기능이 소개되지만, 기존 코드에 영향을 주지 않는 변경 사항이다.

Patch 버전: 하위 호환성을 유지하면서 기존 기능의 버그를 수정할 때 올린다. 새로운 기능이나 API 변경 없이 오로지 버그 수정 관련 업데이트다.

ex) ^4.3.2
4.3.3 버전이 출시될 경우 자동으로 최신버전을 다운받아 사용
4.4.0 버전이 출시될 경우 자동으로 최신버전을 다운받아 사용
5.0.0 버전이 출시될 경우 최신 버전을 다운받지 않는다.
Major버전이 4인 버전만 최신으로 업데이트 한다.

 

 

StatefulWidget

Widget Immutability (불변성)

위젯은 불변법칙을 따른다.

import 'package:flutter/material.dart';


class HomeScreen1 extends StatelessWidget {

  HomeScreen1({super.key});

  Color color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: () {
              if(color == Colors.blue) {
                color = Colors.red;
              } else {
                color = Colors.blue;
              }

              print('색상 변경 $color');
            }, child: Text('색상 변경')),
            SizedBox(
              height: 32.0,
            ),
            Container(
              width: 50.0,
              height: 50.0,
              color: color,
            )
          ],
        ),
      ),
    );
  }
}
import 'package:flutter/material.dart';


class HomeScreen1 extends StatefulWidget {
  @override
  State<HomeScreen1> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen1> {
  Color color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(onPressed: () {
              if(color == Colors.blue) {
                color = Colors.red;
              } else {
                color = Colors.blue;
              }

              print('색상 변경 $color');
              setState(() {});
            }, child: Text('색상 변경')),
            SizedBox(
              height: 32.0,
            ),
            Container(
              width: 50.0,
              height: 50.0,
              color: color,
            )
          ],
        ),
      ),
    );
  }
}

 

StatefulWidget로 색상 변경하기

 

StatefulWidget 라이프 사이클

 

class 인스턴스 생성자(constructor()) -> createState() 정의 ->

_CodeWidgetState 생성 -> initState() 1번만 실행함 -> didChangeDependencies() -> dirty -> build() -> clean -> deactivate() 화면에서 지워졌을 때 실행 -> dispose() 화면에서 지워졌을 때 실행

 

initState는 context 제공해주지 않지만, didChangeDependencies 에서 제공해줌 / State 의존성이 변경되었을 때 dispatch 된 것처럼 사용됨. 다시 실행 가능 (ex. Theme나 state 변경될 때 사용)

 

 

Timer

지정한 시간이 지난 뒤 한번 또는 주기적으로 무언가를 실행 할 수 있게 해준다.

플러터에 기본 제공되는 dart:async패키지를 불러오면 사용할 수 있다.

import 'dart:async';

void main() {
  Timer(
    Duration(seconds: 1),
      () {
        print("1초 뒤에 실행됩니다.");
      }
  );
}

 

DateTime, Duration

년, 월, 일, 시, 분, 초, 밀리 초, 마이크로 초에 해당되는 값들을 순서대로 입력하면 된다.

년도만 필수 입력이고 나머지는 옵셔널이다.

옵셔널 값을 입력 안할경우 월, 일은 기본 값이 1로 입력되고 나머지는 0이 입력된다.

final date = DateTime.utc(
    1994, // 년
    10, // 월
    20, // 일
    1, // 시
    23, // 분
    25, // 초
    30, // 밀리초
    5, // 마이크로 초
);

// 코드가 실행되는 순간의 시간!
void main() {
    final now = DateTime.now();
    print(now);
}

 

Route Stack (라우트 스택)

Stack -> LIFO(Last In First Out)

Queue -> FIFO(First In First Out)

 

 

'Front-End' 카테고리의 다른 글

[Front-End] FSD  (0) 2024.04.03
[Front-End] nvm(npm/node) 설치  (0) 2024.03.17
Next.js 13 버전과 14버전의 차이  (0) 2023.12.18
[Next.js] Next 13  (0) 2022.11.24
[Next.js] 최근 검색어 저장 (localStorage)  (0) 2022.05.24