🚪 Closed

🙆‍♀️ different Color of status bar and system navigation bar

before	after

before 사진을 보면 아래쪽 빨간상자부분이 흰색이 되어야 한다.

이 부분이 잘 안되었던 이유는 SafeArea라고 기기별로 화면 밖으로 넘치지 않도록 안전한 공간 내에서 작업할 수 있도록 알아서 줄여주는 것 때문이었다. 이걸 사용하면 맨 위의 상태바와 맨 아래(빨간상자부분)부분은 제외된다.

내가 해야하는 건, SafeArea 바깥의 윗부분은 배경색, 아랫부분은 흰색으로 지정하는 일이었다.

Container(
color: EmotionColor.getNormalColorFor(playingEmotion), // background color
child: SafeArea(
    child: Column(
        ...,
        Container(
            color: Colors.white, // bottom color
            ...,
        )
    )
 )
);

기존의 코드는 위와 같아서 배경색을 SafeArea아래에 깔았고 그래서 UnSafeArea 둘 다 배경색이 되었다.

✔️ Solved

AnnotatedRegion<SystemUiOverlayStyle> 이런 것도 있긴 했는데 어째서인지 내 코드에서는 잘 되지 않았고, 결국 정말 간단히, 코드 한 줄로 해결했다.

Container(
color: EmotionColor.getNormalColorFor(playingEmotion),
child: SafeArea(
    bottom: false, // ADD THIS
        child: Column(
        ...,
        Container(
            color: Colors.white,
            ...,
        )
    )
);

SafeArea의 bottom: false를 하면 아래 부분은 적용되지 않는다. 따라서 하위 Container의 흰색이 아랫부분까지 뻗게 된다.

🙆‍♀️ add shadow of image

before	after

사진에 입체감을 주고 나머지 요소와 어울리는 느낌을 주기 위해 앨범사진 뒤에 그림자를 넣고자 했다.

Expanded(
    /// gesture
    child: GestureDetector(
        onPanUpdate: (dis) {...},
        child: Stack(children: [
          /// artwork
          Container(
            margin: EdgeInsets.symmetric(
                horizontal: 32.0, vertical: 16.0),
            decoration: BoxDecoration( //ADD THIS
              boxShadow: [ 
                BoxShadow(
                  color: Colors.black45,
                  spreadRadius: 1,
                  blurRadius: 5,
                ),
              ],
            ),
            child: Image.network(
              (songMeta == null ||
                      songMeta.artwork == null)
                  ? 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'
                  : songMeta.artwork,
              width: 480,
              height: 480,
              fit: BoxFit.contain,
            ),
          ),
          ...

기본 구조를 소개하자면,
앨범 사진과 물결을 겹치도록 하기 위해 Stack으로 묶었고 여기에는 GestureDetector으로 사용자의 제스쳐에 반응한다.
다른 요소 외에는 앨범 사진과 물결을 꽉차게 하기 위해 Expanded로 감쌌다.

여기에 그림자 효과를 위해,
decoration으로 그림자 효과를 준 Container로 Image를 감쌌다.

그런데...

그림자가 분리됐다. 해결방법은 또 의외로 한 줄이었다.

✔️ Solved

Expanded(
    /// gesture
    child: GestureDetector(
        onPanUpdate: (dis) {...},
        child: Stack(children: [
          /// artwork
          Container(
            margin: EdgeInsets.symmetric(
                horizontal: 32.0, vertical: 16.0),
            decoration: BoxDecoration(
              boxShadow: [ 
                BoxShadow(
                  color: Colors.black45,
                  spreadRadius: 1,
                  blurRadius: 5,
                ),
              ],
            ),
            child: Image.network(
              (songMeta == null ||
                      songMeta.artwork == null)
                  ? 'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'
                  : songMeta.artwork,
              width: 480,
              // height: 480, // AS A COMMENTS ON THIS..
              fit: BoxFit.contain,
            ),
          ),
          ...

Image 내의 height를 주석처리한다.

Expanded 때문에 늘어나서 인가 싶기도 하고,
아니면 height가 고정 길이를 주니까 그런가, 아니면 둘 다 영향이었나?

정확한 이유는 잘 모르겠다만 오늘도 해결해보료따~.

🙆‍♀️ default music player page

✔️ Solved

1. 사용하는 변수의 기본 값을 넣어준다.

AudioMetadata songMeta; // '2.`null` 처리'에서 다룸
String playingEmotion = "default";

2. null 처리
   2.1. StreamBuilder에서 값이 있을 때에만 값을 사용하도록 한다.
   재생 가능한 곡의 데이터가 없어서 null이 되는 경우를 고려하였다.

StreamBuilder<SequenceState>(
stream: AudioManager.instance.player.sequenceStateStream,
builder: (context, snapshot) {
  if (snapshot.hasData) {
  ...
  }

2.2. 마찬가지로 2.1.에서 파생되는 값들이 null일 때 처리

Text(                                            
  (songMeta == null || songMeta.title == null)   
      ? "재생 중인 곡이 없습니다"                          
      : songMeta.title,                          
)

쨔쟌~~ 결과 화면 ~!!

기본 이미지로 쓸 수 있는게 없다... So sad 🥲

🙆‍♀️ remove IconButton padding

좋아요 버튼과 숫자를 넣어줬더니 IconButton의 기본 padding 값 때문에 더욱 붕뜬다.

✔️ Solved

padding과 constraints를 넣어준다.
나의 경우는 숫자와의 간격 때문에 오른쪽에 4.0을 넣어줬다.

IconButton(                         
    padding: // ADD THIS
        EdgeInsets.only(right: 4.0),
    constraints: BoxConstraints(),  //ADD THIS
)

훨 났쥬?

🙆‍♀️ Modify UI - Color of emotion selection

색깔이 어색하다.

✔️ Solved

색깔만 좀 바꿔줬다.

1. happy bg

happy	angry	calm	sad	fear

2. angry bg

happy	angry	calm	sad	fear

3. calm bg

happy	angry	calm	sad	fear

4. sad bg

happy	angry	calm	sad	fear

5. fear bg

happy	angry	calm	sad	fear

사진이 좀 작아져서 아쉽지만 어쨌든 그러하다.

📬 Open

🙆‍♀️ 🙅‍♀️ sync bottom player

머리 위로 동글뱅이랑 엑스 둘 다 있는 건 반은 되고 반은 안돼서다. 세모임.

원래 아래 하단바는 현재 재생중인 곡과 연동이 되지 않았다.

기존에 했던 걸 반복하는 거라 코드까지 첨부할 필요는 없는 것 같고, 원래 플레이어 화면에서 했듯이 StreamBuilder<SequenceState>를 추가해서 연동했다.

✔️ Solved and ❌ Failed

곡 정보는 성공(곡 명, 색깔)!
하지만 듣고 있는 곡의 시간에 따라 색의 비율이 달라지는 LinearProgressIndicator는 연동이 안된다. 분명 될 것 같아서 바꿨는데 왜 안되는지 모르는 상태다.

플레이어 페이지에도 이와 관련해서 약간의 오류가 있긴 한데, 아직 내가 코드에 대한 해석이 덜 된 것 같다.

도움이 된 링크

• How can I add shadow to the widget in flutter? - stack overflow
• How do I remove Flutter IconButton big padding? - stack overflow

---

오늘은 개발 일지 중 처음으로 에러와 해결이 아니라 해야할 일을 해낸 것에 대해 적었다. 많이 발전했네.