[Flutter] Flutter & Dart Basics 1

ref : Flutter & Dart - The Complete Guide [2023 Edition]

23-24 GDSC HUFS 플러터 스터디를 진행하며 수강한 강의를 정리한 포스팅입니다.

---

Flutter 프로젝트 생성

터미널의 원하는 경로에서 다음을 입력

flutter create [프로젝트이름]

또는 VSCode 를 사용할 경우 cmd + shift + p 로 팔레트 열어서

flutter new project 를 선택해도 됨

---

Understanding Types

다트는 type-safe 언어이다.

다른 말로는 type-safety(타입 안전성)을 가진 프로그래밍 언어라고 할 수 있다.

 

여기서 타입 안전성이란?

프로그램이 컴파일 시간에 타입 오류를 감지하고 실행시간에 타입 관련 문제를 방지하는 개념

 

Dart 가 어떻게 타입 안전성을 제공하는가?

Dart 는 '정적 타입 언어' 로서 타입을 컴파일 시간에 명확하게 알 수 있도록 한다.

이것은 변수가 어떤 타입의 데이터를 저장할 수 있는 지 미리 정의하고, 해당 타입에 맞지 않으면 오류를 발생시킨다.

Core Types

Dart의 기본적인 데이터 타입을 알아보자

 

먼저 int 는 정수를 나타내는 데이터 타입이다.

양의 정수, 음의 정수, 0 을 모두 표현할 수 있으며 예시는 아래와 같다

int myNumber = 42;

double 은 부동 소수점 수를 나타내는 데이터 타입으로 실수를 표현할 때 사용된다.

double myDouble = 3.14159;

String 은 문자열을 나타내는 데이터 타입이다

String greeting = "Hello, Dart!";

bool은 True False 를 표현하는 데이터 타입이다

조건문, 논리연산 등에 쓰인다

bool isDartFun = true;

List 는 여러개의 값을 순서대로 저장하는 데이터 타입이다

리스트 안의 요소들은 index 를 통해 접근할 수 있다.

List<int> numbers = [1, 2, 3, 4, 5];

Map 은 키와 값(key, value)쌍을 저장하는 데이터 타입이다

키를 이용해서 값을 검색할 수 있다

Map<String, int> scores = {'Alice': 95, 'Bob': 89, 'Charlie': 78};

num은 숫자 데이터를 나타내는 데이터 타입이다.

int 와 double 을 모두 포함한다(정수 또는 부동 소수점 수)

 

대신 num 을 사용하면 타입 안전성이 약간 감소할 수 있다.

num myNumber1 = 42;
num myNumber2 = 3.14159;

Object 는 모든 Dart 객체의 상위 클래스이다.

객체의 일반적인 특성을 다루거나 필요에 따라 다양한 타입의 객체를 동일하게 처리할 때 사용된다.

Object myObject = 'Hello, Dart!';

---

사용할 수 있는 다양한 인수 확인하기

Scaffold 위젯 안에 넣을 수 있는 argument 를 확인하려면 ctrl + space 를 누르면 된다

그러면 위와 같이 사용가능한 속성들이 나온다.

---

그라데이션 배경 추가하기

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.deepPurple, Color.fromARGB(255, 201, 189, 223)],
            ),
          ),
          child: const Center(
            child: Text('Hello World'),
          ),
        ),
      ),
    ),
  );
}

위 코드에서는 Container 위젯의 decoration 속성을 통해서 설정했다.

그 중에서도 LinearGradient 를 사용하여 Container 의 배경을 설정해보자

 

LinearGradient 객체는 선형 그라데이션을 생성하는데 사용되며

LinearGradient의 colors 속성에는 색상 배열이 들어간다.

 

결과는 아래와 같다.

 

Understanding Generic Types

Dart 의 generic 타입은 코드 재사용성과 안전성(type safety)를 높이기 위한 기능이다

클래스, 함수, 메서드 타입을 매개변수화해서 다양한 데이터 타입에 대해서 동작하도록 만든다.

 

generic 타입을 정의할 때에는 꺾쇠 괄호(< >)를 쓴다.

 

말로만 들으니 이해가 잘 안된다. 예시를 들어보자.

class Box<T> {
  T value;

  Box(this.value);
}

위와 같이 Box라는 클래스가 있다고 해보자.

여기서 <T>는 타입 매개변수로 사용되고, Box 라는 클래스가 어떤 종류의 데이터 타입을 다룰 것인지를 나타낸다.

<T>는 일종의 placeholder 이다!

-> 클래스를 실제로 사용할 때는 'T' 자리에 실제 데이터 타입이 들어간다.

 

var intBox = Box<int>(42);
var stringBox = Box<String>('Hello');

위는 Box 클래스를 사용하는 예제이다.

intBox는 Box<int> 타입이므로 value 속성은 정수 타입만 저장할 수 있다

또한 stringBox는 Box<String> 타입이므로 value 속성은 문자열 타입만 저장할 수 있다.

 

이렇게 <T>를 사용하면 코드를 재사용할 수 있게 만들 수 있다.

그리고 타입 안전성을 제공해서 잘못된 데이터 타입이 Box 에 저장되는 걸 막는다.

 

🤔 왜 <T> 를 사용할까?

<T> 대신 다신 이름을 사용할 수 있다
가령 <E> 나 <Type> 등등..

하지만 <T>는 일반적으로 타입(Type)을 나타내는 관습적인 이름이다.

---

그라데이션 방향 바꾸기

그라데이션의 방향을 바꾸려면 LinearGradient 클래스의 begin과 end 속성을 조정하면 된다

begin은 그라데이션의 시작점을 나타내고

end 는 그라데이션의 끝점을 나타낸다

 

그라데이션의 방향을 대각선으로 변경해보자

	decoration: const BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.deepPurple, Color.fromARGB(255, 201, 189, 223)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),

begin 은 Alignment.topLeft 로 설정해서 시작점을 화면의 왼쪽 위로 이동시키고

end는 Alignment.bottomRight 으로 설정해서 화면의 오른쪽 아래로 이동시켰다.

 

결과는 아래와 같다

---

Text 스타일링하기

이번에는 텍스트 스타일링을 해보자

Text 위젯 안에서 style 속성을 사용하여 스타일을 설정할 수 있다.

  child: const Center(
            child: Text(
              'Hello World',
              style: TextStyle(fontSize: 28, color: Colors.white),
            ),
          ),

• style 속성 안에서 TextStyle 객체를 이용하여 텍스트 스타일을 지정한다
• TextStyle 객체 : 다양한 스타일 소것ㅇ을 설정할 수 있는 클래스이다. 여기서 두가지 속성을 설정한다
  • fontSize: 텍스트 글꼴 크기 설정
  • color: 텍스트 색상 설정

결과는 아래와 같다.

---

Understanding Classes

Dart 는 OOP 언어(객체지향 프로그래밍 언어) 중 하나로 객체지향 개념을 중심으로 설계되었다.

OOP는 코드를 객체 단위로 구성하고,

객체는 데이터와 해당 데이터를 조작하는 함수로 이루어져있다.

 

Dart 에서 모든 것은 객체이다.

객체는 클래스를 기반으로 생성되며, 이것은 객체가 클래스의 인스턴스라는 것을 의미한다.

클래스는 속성과 메서드를 정의하고, 이러한 속성과 메서드를 통해 객체의 상태와 행동을 지정할 수 있다.