Flutter Study- 1주차(Module Summary)

Module Summary

main.dart

• main.dart 파일은 엔트리 포인트로,다트 언어에 의해 컴파일 된 어플이 실행되는 공간
  파일 내 runApp() 호출하여 화면에 보여줄 것들을 불러온다.

import 'package:flutter/material.dart';
import 'package:first_app/gradient_container.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: GradientContainer.purple(),
      ),
    ),
  );
}

MaterialApp

• 앞으로 만들 하위페이지나 구성요소를 가장 최상단에서 담는 그릇
  home은 필수적인 옵션

Scaffold

• 페이지의 형태

pubspec.yaml

https://landroid.tistory.com/11
(너무나 잘 정리된 글이 있어서 대체...)

여튼 중요한 것은
1. 외부 패키지 추가(dependencies)
2. 이미지 등 에셋 추가(asset)
시 이 파일에 업데이트를 반드시 해주어야 된다는 것...!

function - code on demand

정의부(define)과 선언부(excution)으로 구분,
하나의 기능을 담당

widget

• Flutter, 위젯을 통해 UI를 구성
  • 위젯을 결합하거나 중첩시키는데 이를 Widget TREE라고 함
  • Ex. Material App - Scaffold - Row
• built-in 위젯도 있고, 커스텀도 가능하다

Flutter Widget Catalog: https://docs.flutter.dev/ui/widgets

class

• Flutter 의 모든 것은 Object(=> 데이터의 구조)
• Class는 이 Object의 blue Print.
• 클래스를 통한 객체의 생성

Building Custom Widget

• 클래스를 활용하여 생성,
• @override : 메소드를 재정의
  • 예를 들어, 강의에선 StatelessWidget를 재정의하여 StyledText을 구성
• build

Type: const & final & required

1. const
   const 변수를 활용하여 더 효율적인 성능을 낼 수 있다!

• Dart의 런타임 퍼포먼스를 최적화,
  • 코드로 생성된 것들이 메모리에 저장, const를 사용하여 동일 값을 동일 메모리에 저장된 값으로 재사용이 가능해짐

2. Final
   더 이상 새로운 값을 받지 않겠다는 의미

둘의 차이는... https://velog.io/@ruinak_4127/Dart-final%EA%B3%BC-const%EC%9D%98-%EC%B0%A8%EC%9D%B4

📚 const 왜 사용하는가?

https://80000coding.oopy.io/9fa8948a-f7f7-4518-9515-ba6301c67c28

메모리 최적화 관점에서 사용하는 것.
final로 하나로 통일해서 쓰면 편하겠지만, 메모리 성능에서의 차이가 발생함.
const로 정의시 컴파일 타임에 결정되기 때문에 앱을 생성할때 한번만 생성하게됨.
따라서 UI 업데이트를 통한 리렌더링시 항상 동일한 내용을 출력하는 경우에는 const를 활용하여 재생성을 막아 내부 리소스 낭비를 막아주는 목적

stateless vs stateful

1. Stateless

• 내부 데이터의 변경이 없음
• 부모 요소가 Re-Render 시 업데이트
• 기본 값의 개념
• 앱이 동작하면서 변치 않는 위젯(ex. Text, Row, Column, Image)

2. Statefull

• 내부 데이터의 변경이 존재
• state 변경시 위젯 자체가 Re-Render 및 UI Update
• setState() (useState와 비슷해서 났던 React의 향기... 반가워써...)
  • 아래 코드에선 currentDiceRoll의 상태를 randomizer 숫자가 변경될때마다 State를 Update한다

class DiceRoller extends StatefulWidget {
  const DiceRoller({super.key});

  @override
  State<DiceRoller> createState() {
    return _DiceRollerState();
  }
}

class _DiceRollerState extends State<DiceRoller> {
  var currentDiceRoll = 2;
  void rollDice() {
    setState(() {
      currentDiceRoll = randomizer.nextInt(6) + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Image.asset(
          'assets/images/dice-$currentDiceRoll.png',
          width: 200,
        ),
        const SizedBox(height: 20),
        TextButton(
          onPressed: rollDice,
          style: TextButton.styleFrom(
              // padding: const EdgeInsets.only(
              //   top: 20,
              // ),
              foregroundColor: Colors.white,
              textStyle: const TextStyle(fontSize: 28)),
          child: const Text('Roll Dice'),
        )
      ],
    );
  }
}