오늘의 공부 내용(24.05.30)

✨ CustomScrollView

  ✏️ sliver란 스크롤 영역을 이루는 조각 하나하나를 의미함  ✏️  sliver들이 여러개 뭉쳐진 걸 slivers라 하고 이는 스크롤 영역이라고 할 수 있음  ✏️  ListView와 SliverList가 같고 GridView와 SliverGrid가 같은데 차이점은 SliverList와 SliverGrid가 위젯이 아니라는 점  ✏️  sliver는 정말 다양함(SliverAppBar, SliverList, SliverGrid, SliverToBoxAdpater 등)        ➡️ 그만큼 스크롤 영역을 구성하는 요소를 다양하게 할 수 있음  ✏️  SliverAppBar를 사용해보니까 CoordinatorLayout과 비슷하다는 느낌을 받음

  ✏️  SliverToBoxAdapter를 이용해 GridView를 만들 때는 GridView.builder를 사용함

        ➡️ gridDelegate, itemCount, itemBuilder는 필수적이고 스크롤에 관련된 부분을 설정하기 위해 primary와                                  shrinkWrap 속성을 조절함

  ✏️  이미지를 네트워크 상에서 랜덤으로 불러오고 싶다면 아래 코드를 추가하면 됨

Image.network(
  'https://source.unsplash.com/random?sig=$index',
)

 

✨ Material 3

  ✏️ Color Scheme : 색상 구성표

        ➡️이 Color Scheme을 통해 앱에서 사용될 특정 색상들이 정해짐

  ✏️ Baseline Color Scheme는 사용자가 선택한 단일 소스 컬러를 기반으로 색상, 채도, 명도가 조절되어 목적에 맞는 5가지의          key color를 생성됨

        ➡️생성된 key color의 톤을 13개로 확장하여 최종적으로 tonal palette가 만들어짐

        ➡️toal palette에서 각각의 역할에 맞게 색상들이 앱 구성요소를 채움

  ✏️ 코드에 적용시킬 때는 ThemeData 안에 useMaterial3: true를 입력하고 colorScheme 속성 값의                                              ColorScheme.fromSeed 내부의 seedColor 값을 변경함으로써 원하는 색상으로 앱의 전반적인 색상을 결정할 수 있음

theme: ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.blue,
    brightness: Brightness.light,
  ),
  useMaterial3: true,
),

  ✏️  다크모드에 대한 설정은 darkTheme 속성에다가 값을 넣어주면됨

darkTheme: ThemeData(
  useMaterial3: true,
  brightness: Brightness.dark
),

  ✏️  모드에 대한 설정을 시스템에 맡기는 방법은 themeMode 속성을 이용하는 것

themeMode: ThemeMode.system,