12일

67강. 생활 Widget

Widgets

• stack
  • 위젯을 쌓고 싶을 때 사용, Positioned 위젯과 함께 사용
• Divider
  • 구분선을 넣고 싶을 때 사용
• AnimatedOpacity
  • (불투명도 애니메이션)Opacity 값을 바꿔주면 사이값을 자동으로 애니메이션 효과 적용
• AnimatedContainer
  • 캐치되는 속성값을 감지하는 애니메이션
• AspectRatio
  • 자식 위젯의 사이즈 비율을 정확히 맞춰야 할 때(보통 비디오를 넣어야할 때 4:3, 정사각형을 보여줄 때 1:1)
• Wrap
  • Row는 화면에 벗어나면 안되지만, Wrap은 다음 줄로 넘어가도록 하게 함

Packages

• url_launcher
  • 전화걸기, 메세지보내기, 특정 URL웹으로 이동, (카카오톡 채널로 이동)
• cahed_network_image
  • 이미지를 캐싱할 수 있도록 함
• intl
  • 화폐표시, 시간 표시

68강. shared_preferences

데이터를 어디에 둘 것인가?(로컬 vs 서버)

앱 내에서 데이터를 잠깐 저장해야할 때가 있음, 어플은 꺼지면 내용이 초기화됨

앱 내에서 데이터를 저장할 수 있는 경우 저장해주는 것이 좋음(앱 내에서도 사용될 중요하지 않은 가벼운 데이터)

어떠한 데이터들이 앱 내에 저장되어야할까?

로컬기반 어플, 자동로그인, 장바구니, 동영상 시청기록

앱을 종료해도 불러와서 사용할 수 있는 데이터

앱 내에 저장하는 데이터, 흔히 앱 데이터 라고 하며  언제든 저장하고 불러와서 사용 가능

기본 순서는 아래와 같음

1. 앱 데이터 접근 "객체" 초기화
2. 내용 저장
3. 내용 불러오기

앱 내 데이터를 구현하는 패키지를 이용하면 구현 가능

69강. 키오스크 앱 업그레이드 - 2

생략

70강. class

객체지향의 꽃

class는 제작서(레시피), 건물로 치면 설계도

내가 만들고 싶은 게 무엇인지 정의

클래스(제작서)를 통해 생성된 결과물이 객체(Object) or 인스턴스(instance)라고 불림

하나의 클래스로 여러 개의 결과물을 만들 수 있음

71강. constructor

클래스는 크게 3개로 나뉨

• 멤버변수
  • (클래스)객체 내에서 사용할 수 있는 변수들
• 멤버함수
  • (클래스)객체 내에서 사용할 수 있는 함수들
• 생성자
  • 객체를 생성할 수 있는 생성함수

클래스 생성자(Constructor)

객체를 생성해주는 핵심 함수이며, 생성자 함수라고 불리움

생성자가 없으면 객체를 생성해서 변수에 넣어주지 못함

클래스명을 넣고 필수 멤버 변수를 괄호 안에 다 넣어주면 됨

//방식1.이름없는 생성자(Unnamed constructor)
class User{
    //멤버 변수
    final name;
    
    //생성자 함수
    User(this.name);
}

void main(){
    var user1=User("teddy");
    var user2=User("Zzang-yeah");
}

//방식2.이름있는 생성자(Named constructor)
class User{
    //멤버 변수
    String name;
    
    //생성자 함수
    User.withName(String inputName) :
        name=inputName;
}

void main(){
    var user1=User.withName("teddy");
    var user2=User.withName("Zzang-yeah");
}

속성값도 명확히 나타내고 싶다면?

=>선택 매개변수

curly bracket({})로 감싼다

class User{
    //멤버 변수
    String name;
    
    //생성자 함수
    User.withName({required this.name});
}

void main(){
    var user1=User.withName(name:"teddy");
    var user2=User.withName(name:"Zzang-yeah");
}

이 때, 주의할 점은 name은 선택 매개변수이기때문에 무조건 값이 들어와야한다는 의미인 required키워드를 사용

why?name에는 String이 들어와야하는데 "선택"을 안 하고 매개변수를 입력하지 않으면 곧 NULL이기 때문

플러터에서 required의 값이 의미하는 바가 아래와 같음 

Dart : 소중한 매개변수들을 선택해서 넣겠다고?그러면 필수 키워드라도 붙여주셈 null값은 노인정

생성자의 역할

객체를 생성할 수 있음

객체를 생성할 때 class에 정의해둔 레시피대로 만들어야 하기 때문에, 변수를 다 채워야함

• this.의 뜻은 나중에 변수명이 들어갈 공간이라고 생각
• var friend1=Human(...);라고 코드를 작성했을 떄, this.가 곧 friend1이 되기 위해 this라는 키워드가 붙음

class Human{
    //멤버 변수
    String name;
    double height;
    int cash;
    int age;
    Human? girlfriend;
    Human? boyfriend;
    List<human>? friends;
    
    //생성자 함수
    Human(this.name, this.heigth, this.cash, this.age, this.girlfriend, this.friends);
}

72강. Dart: Method, Flutter에서의 활용

멤버 함수(메소드)

이 클래스로 만든 객체들이 사용할 수 있는 능력들(함수들)

eat(String foodName){
    print("파오후파오후 $foodName주세요 현기증 난단말이예요");
    weight+=1;
}

workout(int hours){
    print("하기싫다 하지만 돈벌어야지,,,$hours만 빡집중해야지");
    weigth-=0.1;
}

getMoney(int amount){
    cash+=amount;
}

spendMoney(int amount){
    cash-=amount;
}

클래스 멤버 함수(메소드)

class Human {
    //멤버 변수
    String name;
    double weight;
    int cash;
    int age;
    Human? girlfriend;
    List<Human>? friends;
    
    //생성자 함수
    Human(this.name, this.weight, this.cash, this.age, this.girlfriend, this.friends);
    
    //멤버 함수(메서드)
    eat(String foodName){
        print("파오후파오후 $foodName주세요 현기증 난단말이예요");
        weight+=1;
    }

    workout(int hours){
        print("하기싫다 하지만 돈벌어야지,,,$hours만 빡집중해야지");
        weigth-=0.1;
    }

    getMoney(int amount){
        cash+=amount;
    }

    spendMoney(int amount){
        cash-=amount;
    }
}

class User{
    String userId;
    String profileImage;
    String nickname;
    DateTime vreated;
    DateTime updated;
    DateTime visited;
    List<User> followers;
    List<User> followings;
    List<User> blocked;
    List<Feed> feeds;
    
    User(this.userId, this.profileImage, this.nickname, this.created, this.updated, this.visited, this.followers, this.followings, this.blocked, this.feeds);
    
    Future<bool> addFollwer(User follower) async {
        var res=await dio.get("팔로워 넣기 url", {"userId":follwer.userId});
        if (res.status == 200){
            followers.add(follower);
            return true;
        }
    }
}

Flutter 73강. fromMap, toMap

생성자를 통한 객체 생성

//클래스 정의
class Word{
    String word;
    String meaning;
    String example;
}

//생성자 추가
Word){required this.word, required this.meaning, required this.example})

//객체 생성
void main(){
    var word = Word(word:"Apple",meaning:"사과",example:"애플로고")
}

매번 이렇게 넣어주긴 힘듦

네트워크의 데이터는 JSON타입

Dart에는 JSON타입과 비슷한 MAP데이터타입이 있음

내가 입력하지 않고도 Map자체를 전달하면 객체를 생성해주면??

Map<String, dynamic> word={
    "word":"Apple",
    "meaning":"사과",
    "example":"애플덕후인 것을 보니 사과농사를 잘 짓겠구나",
};

//생성자 하나 더 추가(이름있는 생성자, fromMap)
Word.fromMap(Map<String, dynamic> map):
    word=map["word"],
    meaning=map["meaning"],
    example=map["example"];

//fromMap을 통한 객체 생성
void main() {
    Map<String, dynamic> word={
        "word":"Apple",
        "meaning":"사과",
        "example":"애플제품이 많은 걸 보니 사과농사를 짓고 있구나",
    };
}

반대로 toMap은

서버에다가 해당 객체내용을 보내야할 때 주로 사용(백엔드 스펙에 따라 다름)

Map을 배출해주는(toMap) 멤버 함수 추가

Map<String, dynamic> toMap() =>{
    "word":word, 
    "meaning":meaning,
    "example":example,
};

Flutter 74강. toString,override

Flutter는 모든 게 다 위젯이다

Dart에서는 모든 것이 Object로 다뤄진다

@override:기존의 (부모)기능을 새로 재정의한다

 

본 후기는 유데미-스나이퍼팩토리 9주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.