Flutter & Dart 독학

Flutter & Dart 개발화면

Udemy

A Complete Guide to the Flutter SDK & Flutter Framework for building native iOS and Android apps을 통해서 학습 中 

 

기본적인 것들은 설명안할거임.

내가 배웠는데 잘 이해안되는 부분, 꿀팁이다 싶은 부분, 외워야하는 부분 위주로 메모남길거임

 

일단 플러터 설치해주고 냅다 맨땅에 헤딩하면 아무것도 못함

 

flutter create new_app

이런식으로 원하는 폴더에다가 플러터 프로젝트를 생성해주고 모바일 가상머신 돌려서 켜보면 켜짐 기본 모양으로

근데 딱 프로젝트 생성하고 그 디렉토리 idle(난 vscode) 열어주면 폴더랑 파일이 진심 엄청 많고 뭘 만져야할지 몰라서 어안이 벙벙해짐

 

여기서 기본적인 어플 얘두라 나 앱 개발한당^^(사실 아무것도 아니지만^^)  만드는데에는 lib 폴더랑 펍스펙예뭴 pubspec.yaml 파일만 만져주면 된다.

 

객체지향언어 다뤄보신 분들은 훨신 수월하게 하실거임

난 객체지향언어에서 폴리모르피즘이랑 인헤리텐스할 때 어지럽길래 그래 순서 따라가는게 제일 중요하지라는 생각에 C언어만 후벼파다가 눈을 돌렸음. 

 

lib 폴더안에 main.dart 파일이 있을 거임.  그거 안에 코드 긴데 싹다 지워도 괜찮다.  한번 run without debugging해서 예시 화면 함 보고 싹다 지우고 인스탠스 죽이고 다시 시작해보면 화면에 싹 사라진 걸 볼 수 있음.  이제 준비완료 상태

 

매우 심플한 위젯 구성. . 

runApp()이 앱 시작하는 매쏘드,

MaterialApp 아직 정확하게 뭔지 모르는데 가장 기본 틀 같음

그 안에다가 넣을 수 있는 factor들이 많은데 그 중에 home해주고 주로 Scaffold 위젯을 사용함

 

Scaffold(발판, 골격, 단두대, 발판 재료, 조림된 무대, 조림된 스테이지, 조림된 스탠드) 위젯이란?

직역 그대로 골격임 골격 앱의 기본 백그라운드 색깔이나 뭐 엄청 많이 기반 설정 할 수 있음

 

Scaffold 안에는 home 써서 Column을 쓰면 위아래로 쭉 위젯들 집어넣을 수 있음! 이정도는 할 수 있잖아

 

lib폴더 안에 models 라는 폴더를 따로 만들어줘서 필요한 소스들을 필요에 따라 구성하기, 정리하기

소프트웨어 개발에서도 "Blueprint"라는 용어가 사용되기도 합니다. 여기서는 특정 애플리케이션, 웹사이트, 또는 서비스의 요구사항이나 설계를 기록한 문서나 다이어그램을 가리킵니다. 이러한 Blueprint는 개발자들이 협업하고 서로의 역할을 이해하며 개발 프로세스를 진행하는 데 도움이 됩니다.

 

uuid 패키기 import해서 Uuid();를 부를 수 있음 유틸리티 오브젝트임

import 'package:uuid/uuid.dart';

final uuid = Uuid();

class Expense {
  //하나의 비용에 대한 구조체
  Expense({
    required this.title,
    required this.amount,
    required this.date,
  }) : id = uuid.v4();

  final String id;
  final String title;
  final double amount;
  final DateTime date;
}

이 익스펜스 객체가 초기화 될때마다 고유 id 생성해냄

 

fixed set of allowed value => enum

객체 사이 값 던져주고 받고 할 때 string을 통해서 해주면 할 수는 있는데 코딩 와중에 오타 발생하면 에러 발생 안함, 왜냐 문자열 자체는 문제가 없는데 매칭되는게 없으니까 그저 값을 받아서 제대로 작동을 안할 뿐.  이러한 상황들을 고려해서 새로운 자료형을 정의할 수 있는데 그것이 enum!

 

enum Category { food, trabel, leisure, work }

이런식으로 써주면 안에 내용물들 텍스트로써도 사용가능

 

 

- 빌드 기능을 간소화하고 논리를 많이 부여하지 않는 것을 추구하도록

 

화면에 위아래로 여러가지 요소들 넣으려면 주로 Column을 썼는데,

만약에 내가 넣는 요소들의 개수나 길이를 모르는데, 양이 많을 것으로 예상이 될 때는 Column보다 ListView를 사용해야한다.

왜냐 Column은 인스턴스 만들어질 때 천개면 천개 만개면 만개 전부다 싹다 만들어놓는데 실제로 scrollable안에 넣어놓으면 보이는 것은 네다섯개 밖에 안되잖아? 그래서 퍼포먼스가 엄청 떨어지니까!

 

그래서 Column대신에 listview를 쓰는데, listview는 원래 scrollable임. 

여기서 ListView.builder() builder 라는 constructor function 을 주게되면 생성을 보이는 것만 하고 나머지 것들은 보이기 직전에 생성하게 명령하는 것임!

final List<Expense> expenses;
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: expenses.length,
      itemBuilder: (context, index) => Text(expenses[index].title),
    );
  }

그래서 보면 여기서 ListView를 리턴해주잖아.  여기 매개변수로 itemCount, itemBuilder들어가 있음.

itemBuilder 는 위젯을 반환하는 함수가 들어가야함.

context, index는 플러터가 자동으로 값을 넣어줌.

(context, index)를 변수로 넣어줬을 때 바로 리턴값을 지정해주는 행위가 => 이 표시임. 

 

뭐 표시할지 알려줘야될거아냐? 그거 정보주기 위한 행위

itemCount = 렌더링 될 아이템 개수를 알려주는 매개변수임

이거 값에 따라 itemBuilder안에 든 함수가 몇번시행될지 결정되는 것임. 

 

길이(itemCount) 가 2면 안에 함수((context, index))가 2번 시행되겠지. 

 

- 이렇게 하고 나면 Column안에 ListView가 들어가있는 형태에 직면하는데,

ListView도 일종의 Column이기 때문에 Column안에 Column이 들어가있는 형상임.

이렇게 되면 다트입장에서 사이즈 조절이나 배열 어째할지나 여러종류의 문제가 있어서 딱히 에러가 발생하지는 않아도 화면에 표현이 안됨.

그래서 내부 칼럽이나 column-lke widget을 사용해서 문제를 해결해야함 Expanded 위젯!

 

 ExpensesList(expenses: _registeredExpenses)

 

 Expanded(child: ExpensesList(expenses: _registeredExpenses))

 

Card(); 카드 위젯, 이름처럼 카드에 내용물 넣어서 조금더 화면 앞으로 나온 것처럼 그림자도 넣고 등등 해줌. 

padding이 매개변수로 없으니까 안에 child를 padding 위젯으로 리팩터링해서 조정하기!

 

margin(outer) vs padding(internal)

 

toStringAsFixed(n) 더블을 스트링으로 바꾸는데 소숫점아래는 자르고 싶을 때 n에 자를 자리 숫자로 넣어주면 됨

 

\$이렇게 해야 달러사인 화면에 표시됨

텍스트 안에 값 넣을 때 값을 부르는 방식이 단순변수명이아니라 복잡해서 묶어줘야할 때는 중괄호로!

 

Spacer(), 스페이서 위젯은 위젯사이에 공간을 차지하라는 것임.  남은 공간을 싹다 가져가는 위젯! (row column에서 주로 쓰나봐)

 

 

 

---

enum Category { food, trabel, leisure, work }

const categoryIcons = {
  Category.food: Icons.lunch_dining,
  Category.leisure: Icons.movie,
  Category.trabel: Icons.flight_takeoff,
  Category.work: Icons.work,
};

이런 식으로 이넘에 대해 매핑해서 아이콘 같은 것들 지정해줄 수 있음

 

 

---

import 'package:intl/intl.dart'; //intl 패키지 안에 시간 관련 여러가지 기능이 존재
import 'package:uuid/uuid.dart';

final formatter = DateFormat.yMd(); //이것으로 포매터의 형식을 지정해주는 것 DateFormat안에는 여러종류의 형식이 존재

String get formattedDate {
  return formatter.format(date);
}

이런식으로 매쏘드를 새로 만들어내지 않고 get을 사용할 수 있음

 

- 패키지 다운로드는 flutter pub add intl 이렇게 하며 자동으로 다운로드 되고 야멜파일에 추가해줌.  개꿀

 

3.  Expense_Tracker

8월 8월 끝냄

 

 

앱의 성능을 좋게 만들기 위해서는

StatefulWidget이 호출되는 것을 최소화시켜줘야한다.

StatefulWidget이 호출되는 것을 확인하기 위해서는 build 매쏘드 바로 아래에다가 print문을 넣어서 빌드가 언제 어떻게 호출되는지를 파악하고 최적화해주는 방향으로 나아가면 된다.  

 

 

 

 

 

 

 

 

 

 

 

 

Udemy 강의 링크

https://www.udemy.com/share/1013o43@S1tSU2QOELHEkUJT3TXNJYt8nw3iGw8VSZJ6sU2sb2PZ789c511B2Wn5t7oApiuFSg==/

 

Flutter 공식 홈페이지

https://docs.flutter.dev/

Flutter documentation

 

Flame 관련

https://velog.io/@foggydat/Flutter-skia-engine