[Flutter] shopping mall - 새로 배운 개념 정리

// 제품 리스트 페이지 만들기

1. named constructor 이름이 있는 생성자

아래 예제는 이름이 fromJson인 생성자이다.

ex) Product. fromJson(Map<String, dynamic>){}

 

2. useMaterial3 (디자인)- https://flutter.github.io/samples/web/material_3_demo/

material_3_demo

3.ColorScheme.fromSeed -   ColorScheme.fromSeed can be used as a simpler way to create a full color scheme derived from a single seed color.

 

4. gridView

 

5. picsum - 픽숨은 더미 이미지가 필요할때 다운로드받지않고 url로 이미지를 얻을 수 있는 사이트
기본 url은 https://picsum.photos  

- 기본url 뒤에 /id/{image id값} 를 추가하면 원하는 이미지를 불러올 수 있음

ex) https://picsum.photos/id/237
- 기본 url뒤에 이미지 크기를 추가하면 랜덤으로 이미지를 불러올 수 있음

  가로 200px, 세로 300px인 랜덤 이미지 불러오는 예시
ex) https://picsum.photos/200/300

참고 블로그 https://wooncloud.tistory.com/100

 

6. NumberFormat - 숫자를 다양한 형식으로 표현하기 위해 사용하는 클래스. 이 클래스는 주로 intl 패키지에 포함되어 있으며, 숫자를 현지화된 형식으로 포맷할 때 유용하다. NumberFormat을 사용하면 숫자를 통화, 소수점, 퍼센트 등 다양한 방식으로 쉽게 표현할 수 있다.

 

7. cachedNetworkImage 위젯 (cashed아님 ㅋㅋ)

 

8. BoxedFit.cover - 비율이 변경되지 않고 설정한 크기를 모두 덮는다. 그래서 이미지가 잘릴수있다

 

9. placeholder - 이미지를 로드하는 동안 사용자에게 임시로 표시할 위젯, 이미지가 완전히 로드되기 전까지 빈화면이 아 로딩 스피너, 프로그레스 인디케이터(로딩 표시)등을 placeholder로 사용할 수 있다.

 

10. CircularProgressIndicator()

 

 

// 제품 상세 페이지 만들기

1. 변수 뒤에 ! 붙이는 건 이 변수값이 null이 아님을 확신할 경우, 컴파일러에게 말해주는 것.

 

2. initState () 오버라이드 

(아래에서 다시 설명)

 

3. GestureDetector - onTap() 
탭했을 때 어떤 함수를 실행한다.

 

4. Navigator.of(context).push()
플러터에서 화면간의 전환을 관리하는 데 사용되는 클래스이다. Navigator는 여러 페이지를 stack구조로 관리한다.
push() 메서드를 사용하여 stack에 새로운 페이지를 추가한다.
pop()메서드를 사용하여 현재 페이지를 제거한다.

 

5. MaterialPageRoute
새로운 페이지로의 전환을 정의하는 클래스이다.

페이지 전환시 자동으로 material 디자인의 애니메이션을 적용한다.

* builder: (context){return ItemDetailPage()}

builder 속성은 새로운 페이지를 생성하는 함수를 정의한다.

 

6. 인자를 매개변수로 전달받았을 때, Stateful 위젯에서 그 변수값을 사용하려면 widget.productName이런식으로 써야함.

* 왜 widget이 필요한가?

StatefulWidget의 설계 구조에서 widget은 State 클래스 내에서 상태를 유지하면서도 부모 StatefulWidget의 최신 데이터를 접근할 수 있게 해 줍니다. 이러한 구조는 위젯 트리에서 상태를 효율적으로 관리하고, Flutter의 반응형 패턴을 효과적으로 구현하는 데 기여합니다.

따라서, StatefulWidget에서 인자를 사용할 때는 반드시 widget을 통해 접근해야 오류 없이 올바르게 작동합니다.

 

7. bottomNavigationBar :

Scaffold 위젯에서 사용하는 속성이다. 맨 아랫부분에 네비게이션바를 정의한다.

이는 앱의 주요 화면 전환을 관리하는 데 사용되며, 일반적으로 화면 하단에 위치하여 사용자가 쉽게 다른 페이지로 이동할 수 있도록 한다.

 

8.

- FilledButton

Flutter의 최신버튼이다. 

배경이 채워진 버튼.

ElevatedButton과 다른점은 Filled버튼은 그림자가 없음.

 

 

- ElevatedButton

ElevatedButton은 Flutter에서 가장 일반적으로 사용되는 버튼 중 하나로, 물리적인 깊이와 그림자를 제공합니다. 이 버튼은 일반적으로 배경이 채워진 형태를 가지며, 버튼을 눌렀을 때 깊이감을 나타내는 그림자가 표시됩니다.

 

9.

- EdgeInsets.all(20)

상하좌우 모든 방향으로 20만큼 동일한 간격 설정하기

일반적으로 Padding위젯과 Container위젯안의 padding 속성에서 사용된다.

 

- EdgeInsets.symmetric({double vertical, double horizontal})

수직 방향과 수평 방향에 각각 다른 값을 설정할 수 있다.

 

- EdgeInsets.only({double left, double top, double right, double bottom})

각 방향별로 개별적인 패딩 값을 설정할 수 있다.

 

// 장바구니 상세페이지 

1. 총금액 계산할 때 initState 재정의하는 이유 

initState 메서드를 재정의하는 이유는 StatefulWidget에서 상태 초기화 작업을 수행할 필요가 있을 때입니다. initState는 위젯이 생성된 직후, 즉 상태가 처음 생성될 때 한 번만 호출됩니다. 이 메서드를 사용하여 초기 데이터 설정, 변수 초기화, 비동기 작업의 시작 등을 할 수 있습니다.

initState의 역할

1. 초기 데이터 설정: initState는 위젯의 상태가 생성된 후 한 번만 호출되므로, 상태 초기화 작업을 수행하기에 적합한 곳입니다. 예를 들어, 상태 변수에 초기값을 설정하거나, API 호출을 시작하여 데이터를 가져오는 작업 등을 수행할 수 있습니다.
2. 비동기 작업 시작: 데이터 로딩 또는 다른 비동기 작업이 필요할 때 initState에서 비동기 함수(예: Future를 반환하는 함수)를 호출할 수 있습니다. 이로 인해 위젯이 빌드되기 전에 필요한 데이터가 준비될 수 있습니다.
3. 리소스 초기화: 위젯이 필요로 하는 리소스나 객체를 초기화하는 데 사용할 수 있습니다. 예를 들어, 데이터베이스 연결 설정, 네트워크 요청 준비 등과 같은 작업이 여기에 해당합니다.

 

2. ListView.builder

나는 처음에 하나하나 basketContainer을 적었는데 ListView.builder를 활용하니 

매우 유용하다 ! ㅎ

ListView.builder

ListView.builder는 효율적인 목록 표시를 위해 사용됩니다. 이 위젯은 화면에 표시될 아이템만 렌더링하여 성능을 최적화합니다.

주요 속성

• itemCount: 목록에 표시할 아이템의 총 개수를 지정합니다. 여기서는 basketList.length를 사용하여 목록의 길이만큼 아이템을 렌더링합니다.
• itemBuilder: 각 아이템을 어떻게 렌더링할지 정의하는 콜백입니다. 이 콜백은 두 개의 매개변수를 받습니다:
  • context: 위젯의 BuildContext를 제공하며, 위젯 트리의 위치를 나타냅니다.
  • index: 현재 아이템의 인덱스입니다. 이 인덱스를 사용하여 리스트에서 해당 아이템을 가져옵니다.
• basketContainer: 각 아이템을 표시하는 커스텀 위젯입니다. 이 위젯에 여러 매개변수를 전달하여 상품의 정보를 표시합니다.

3. shrinkwrap : true

ListView 나 Gridview는 일반적으로 부모가 제공하 사용가능한 공간을 꽉 채우려고 한다.

shrinkwrap : true를 사용하면 필요한 공간만 차지하도록 한다.

 

4. Expanded

 

5. TextFormField

 

6. kpostal 패키지

앱 이랑 웹이랑 달라서 헷갈렸지만 성공 !

앱은 kpostal 패키지, 

https://pub.dev/packages/kpostal

웹은 kpostal_web패키지이다.

https://pub.dev/packages/kpostal_web

둘의 사용법이 약간 달라서 참고해서 코딩하기 !

 

7. TextEditingcontroller

편집이 가능한 TextField에 입력된 값을 가져오거나 TextField에 입력된 값이 변경될 때 사용하는 클래스