쌤닷컴

- 모든 변수는 기본적으로 non-nullable임, 즉 null을 할당 할 수 없음

- 모든 변수는 non-nullable이므로 null check가 필요없음(과거 if문으로 null일 경우 이렇게 해라 등)

- class 내의 변수 역시 non-nullable이므로 초기화가 필요하다.

1. Nullable type

 - Null이 올 수도 있다.

 - type뒤에 ? 표기

2. late 키워드

 - 잠시 후 초기화 할 거다.

 - type 앞에 late 표기

3. Exclamation or Bang   - !

 - 원래 Nullable변수는 non-Nullable변수에 대입할 수 없지만 이 변수는 절대 null 값을 가지지 않는 다는 것을 명시해서 대입가능하게 함

 - 대입하려는 변수 뒤에 ! 표기

4. named argument 형식에서 사용 (우리가 사용하는 Scaffold, Center등의 클래스가 named argument형식)

void main(){
  print(add(a:4, b:2));
}

int add({required int a, required int b}){
  int sum = a+b;
  return sum;
}

named argument는 선택적이라 null이 할당될 우려가 있음.

그래서 required 키워드를 붙여서 무조건 매개변수 값을 넘겨주도록 하거나

아니면 Nullable Type( ? )으로 변수를 선언하는 방법으로 회피하는데 함수 내에서 여전히 null값으로 남게되면 if문을 사용해서 null체크하라는 에러메시지를 띄운다.

5. lazy initialization (late 키워드 보충 - late 변수는 언제 초기화 되나?) 

class Person{
  late int age = calculation();
  void printAge(){
    print('age');
  }
}

int calculation(){
  print('calculate');
  return 30;
}

void main(){
  Person p = Person();
  p.printAge();
  print(p.age);
}

만약 age변수가 late키워드가 없었다면 출력은

calculate -> age -> 30으로 출력 될 것이다.

하지만 late키워드가 있기 때문에

age -> calculate -> 30 순으로 출력된다.

여기서 우리는 late키워드가 있으면 해당 변수(여기서는 age)가 참조될 때 실행된다는 것을 알 수 있다.

6. 이전버전 null-safety버전으로 마이그레이팅하기

https://www.youtube.com/watch?v=SjJ6pxYuqwg&list=PLQt_pzi-LLfpx8x6YEMvUwfJHZIEk2L6J&index=3

출처: https://www.youtube.com/watch?v=QP0THWoDeag&list=PLQt_pzi-LLfpx8x6YEMvUwfJHZIEk2L6J&index=2

[완성 화면]

[주요 개념]

- 이미지 import

- 위젯간의 간격은 Sizedbox로 조정

- padding

padding: EdgeInsets.fromLTRB(30, 40, 0, 0)

- Debug표시 없애기

debugShowCheckedModeBanner: false,

- 써클 아바타

CircleAvatar(
  backgroundImage: AssetImage('assets/charizard-mega-y.png'),
  radius: 60,
  backgroundColor: Colors.amber[600],
)

[완성 전체 코드]

import 'package:flutter/material.dart';
import 'package:mild_5/1.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'BBANTO',
      home: Grade()
    );
  }
}

class Grade extends StatelessWidget {
  const Grade({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[600],
      appBar: AppBar(
        title: Text('BBANTO'),
        backgroundColor: Colors.amber[700],
        centerTitle: true,
        elevation: 0,
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30, 40, 0, 0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/charizard.gif'),
                radius: 60.0,
                backgroundColor: Colors.black,
              ),
            ),
            Divider(
              height: 60.0, // 가로선 기준 위아래 간격이 30씩
              color: Colors.grey[850],
              thickness: 1,
              endIndent: 30.0,
            ),
            Text('Name',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2.0,
            ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text('BBANTO',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2,
              fontSize: 28,
              fontWeight: FontWeight.bold
            ),),
            SizedBox(
              height: 30,
            ),
            Text('BBANTO POWER LEVEL',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text('14',
              style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2,
                  fontSize: 28,
                  fontWeight: FontWeight.bold
              ),),
            SizedBox(
              height:25
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10,
                ),
                Text('using lighsaber',
                  style: TextStyle(
                    fontSize: 16,
                    letterSpacing: 1
                  ),
                )
              ],
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10,
                ),
                Text('face hero tattoo',
                  style: TextStyle(
                      fontSize: 16,
                      letterSpacing: 1
                  ),
                )
              ],
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                  width: 10,
                ),
                Text('fire flames',
                  style: TextStyle(
                      fontSize: 16,
                      letterSpacing: 1
                  ),
                )
              ],
            ),
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/charizard-mega-y.png'),
                radius: 60,
                backgroundColor: Colors.amber[600],
              )
            )
          ],
        ),
      ),

    );
  }
}

pubspec.yaml 파일 띄워쓰기 2칸 중요

아래와 같이 사용

import 'package:flutter/material.dart'; //flutter/material.dart 불러오기

void main() => runApp(MyApp());  //최상단 MyApp실행하기

class MyApp extends StatelessWidget {  //MyApp 설계
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(  //MyApp에서 가장 기본인 MaterialApp 설정하기
      title:'My First App', //보통 타이틀, 테마, 홈으로 구성
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),  // home이 중요한데 가장 먼저 열리는 페이지 실행
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(  //페이지에서 가장 기본인 Scaffold로 시작
        appBar: AppBar( //scaffold의 구성은 appBar와 body가 기본
          title: Text('My App'),
        ),
        body: Center( //body는 보통 center에 column넣고 시작
          child: Column(
            children: [
              Text("Hello"),
              Text("Hello"),
              Text("Hello"),
              Text("Hello"),
            ],
          ),
        )
    );
  }
}

플러터는 객체 기반 언어

커스텀 위젯도 모두 클래스로 구현

stful, stless로 불러쓸 수 있음

사용 예시

개발환경 구성은 아래 링크

https://www.youtube.com/watch?v=usE9IKaogDU&list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C 

초보때는 린트 꺼주는게 나을 수도?

analysis_options.yaml 파일에 rules에 추가하기

rules:
  prefer_typing_uninitialized_variables : false
  prefer_const_constructors : false
  prefer_const_constructors_in_immutables : false
  prefer_const_literals_to_create_immutables : false
  avoid_print : false

애셋 폴더 경로지정(이미지 같은거 사용)

- 이미지 저장용 assets폴더 만들기

- 이미지, 아이콘 등 폴더에 넣기

- 이미지 등록하기 pubspec.yaml 파일에

- 아래 이미지처럼 써주기

 - 사용할 때는 image.assets('경로')

5강 플렉서블, 익스팬디드

1. 플렉서블(비율적으로 배치)

2. 익스팬디드(플렉스 1과 같음) - 나머지 꽉 채울 때