공부하다 배운 Flutter 꿀팁 무작정 적어두기 (1)

Flexible : UI 비율에 기반해서 유연하게 위젯 생성. 하나의 박스가 얼마나 공간을 차지할지 비율을 결정할 수 있음

Widget build(BuildContext context)에서 context는 메인의 MaterialApp을 통해 선언한 ThemeData를 가져올 수 있다.
그래서 Theme.of(context).~ 형태로 테마를 통일할 수가 있음

이상하게 중앙에 배치된 위젯은 Row 위젯으로 감싸주는 방식으로 왼쪽으로 뺄 수가 있고, Expanded 위젯으로 컨테이너를 감싸서 비는 부분을 채울 수 있다.

Timer.periodic("duration", (timer) { "function"})
-> 매 duration마다 function을 실행하게 해주는 메소드

Future는 언젠가 발생할 일에 대한 것
API 호출해서 데이터가 오갈 때는 Future를 사용
async programming = 서버를 호출했을 때 응답할 때까지 프로그램을 기다리게하는 방식의 프로그래밍. 이럴 때 메소드명 옆에 async를, 기다리게 해야 하는 메소드 앞에 await을 붙여주는데, 가령 api를 호출해 받아온 데이터를 클라이언트단에 띄워준다고 할 때 await이 안 걸려있으면 데이터를 받아오기 전에 다음 코드가 실행되는 문제가 발생할 수도 있겠지?

---

Flutter에서 Model을 생성하는 방식
= named constructor를 생성한다고 함

class WebtoonModel {
  final String title, thumb, id;

  WebtoonModel.fromJson(Map<String, dynamic> json)
      : title = json['title'],
        thumb = json['thumb'],
        id = json['id'];
}
// named constructor

---

원래대로라면 Api를 통해 데이터를 fetch 하려면
StatefulWidget을 생성해야 하고,
initState와 async programming을 활용해서 데이터를 받아와야 함.
이 과정을 한번에 해주는 게 FutureBuilder
FutureBuilder는 아래와 같이 구성됨.

FutureBuilder (
  future: '데이터',
  builder: (context, snapshot) {

  }
)

여기서 snapshot은 future가 완료돼서 데이터가 잘 있는지, 아니면 에러가 있는지 등 future의 변화를 가늠할 수 있는 변수.

---

ListView.builder -> 더 최적화된 ListView로 아래와 같이 사용 

return ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                print(index);
                var webtoon = snapshot.data![index];
                return Text(webtoon.title);
              },
            );

ListView Builder를 활용하면 모든 데이터를 한번에 로드하는 것이 아니라, 필요한만큼만 그때그때 로드하고 삭제할 수 있음. 데이터 사용을 최적화하는 것

ListView.seperated는 ListView Builder의 기능을 그대로 유지하면서 return할 때 위젯을 리턴해줌. 그리고 그 위젯이 각 List 아이템을 구분하는 구분자가 됨. 아래와 같이 ListView Builder의 Property에 speratorBuilder 속성까지 추가됨.

return ListView.separated(
      scrollDirection: Axis.horizontal,
      itemCount: snapshot.data!.length,
      itemBuilder: (context, index) {
        var webtoon = snapshot.data![index];
        return Text(webtoon.title);
      },
      separatorBuilder: (context, index) => const SizedBox(width: 20),
    );

---

ListView는 height가 제한돼 있어서 Expand에 감싸서 사용하면 좋다는 꿀팁!

---

GestureDetector -> 스마트폰으로 할 수 있는 거의 모든 행동에 대한 처리와 관련한 메서드

---

화면 전환에 효과를 주고싶을 때, hero 위젯을 활용!
전환하는 두 화면에 같은 태그만 주면 됨!

---

SafeArea를 사용하면 그 안에 있는 모든 것은 특정 공간에 있도록 보장해줌.

---

어떤 내용을 하단부에 고정하고 싶을 때는
Scaffold의 속성인 bottomNavigationBar에서 BottomAppBar를 선언해주면 된다!

---

Navigator.of(context).push~는 기존 탭에 계속 탭을 쌓는 개념이라 반복되면 뒤로가기를 끝도 없이 해야 됨.
그래서 필요하지 않은 탭은 Navigator.of(context).pop()으로 닫아준다!

---

FractionallySizedBox -> 부모의 크기에 비례해서 크기를 정하게 해주는 위젯. widthFactor가 1일 경우 부모의 너비의 100%만큼 너비가 정해지는 것

---

font_awesome_flutter 라이브러리를 설치하면 애플, 구글 같은 로고 사용할 수 있음!

---

가운데 정렬을 해야 하는 상황에 따라 Row냐 Stack이냐를 정하면 됨.
Row는 위젯 옆에 위젯을 배치하게 되고, Stack은 위젯들을 위에다가 쌓을 수 있게 해줌.

가령 특정 컨테이너 안에 아이콘과 텍스트가 나란히 나오는데 가운데 정렬을 맞추면 텍스트가 아이콘에 밀려서 정중앙에 배치되지 않을 수 있음. 이럴 때는 Stack을 사용하는 게 정확한 정렬을 맞추기에 좋다!