* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

안녕하세요,

2주차 과제 진행 중인데요, 메인화면 제작에서 막혀서 질문 남깁니다.

1. Flexible이 역할을 하지 않아요.

검색을 통해서 Flexible을 이용하면 적당하게 비율에 맞춰서 배치하기에 좋다는 것을 알게되었는데요,

그런데 지정을 해봐도 적당히 분배되지 않고, 모든 위젯들이 다닥다닥 붙어서 나왔습니다.

Text, IconButton 위젯들을 Container로 감싸도 보고, flex 수치를 바꿔도 보았는데도 위치 변동이 전혀 없었습니다.

어떻게 해야 flexible을 제대로 사용할 수 있을까요?

2. IconButton 색깔지정이 먹히지 않아요.

IconButton에 배경색을 넣기 위해서 검색하다가

https://api.flutter.dev/flutter/material/IconButton-class.html#material.IconButton.3

공식문서에서 `style: IconButton.styleFrom(backgroundColor: )`를 사용하는 것을 발견했는데요,

이 코드 바로 위의 #material.IconButton.2 에서는 Ink 위젯을 사용하라고했지만

#material.IconButton.3 에서는 다른 위젯 사용 안하고 style만으로 설정하고 있으니 저도 이 방법으로 하려고 했습니다.

그런데 `style: IconButton.styleFrom(backgroundColor: )` 이게 안먹히는건 물론이고,

IconButton이라면 당연히 설정할 수 있어야 하는

hoverColor, focusColor, highlightColor 도 안먹히고 있다는 것을 깨달았습니다.

공식문서에서 예시로 알려주는 style은 왜 안되고, 나머지 색깔 지정도 왜 안되는걸까요?ㅜㅜ

확인부탁드리겠습니다 감사합니다.

(사진이 너무 크게 들어가는데 크기 조정이 안되네요...)

// 두번째 페이지
class SecondTab extends StatelessWidget {
  const SecondTab({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          colors: [Colors.blue[300]!, Colors.blue[900]!],
        ),
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
          child: Column(
            children: [
              const Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    children: [
                      Icon(Icons.person, color: Colors.white),
                      Text('라이브러리', style: TextStyle(color: Colors.white))
                    ],
                  ), //라이브러리
                  Column(
                    children: [
                      Icon(Icons.show_chart, color: Colors.white),
                      Text('차트', style: TextStyle(color: Colors.white))
                    ],
                  ), //차트
                ],
              ),
              const Flexible(
                // 첫번째 질문 : Flexible이 역할을 하지 않아요
                flex: 2,
                child: Text(
                  'Shazam하려면 탭하세요',
                  style: TextStyle(color: Colors.white, fontSize: 20),
                ),
              ), // Shazam하려면 탭하세요
              Flexible(
                flex: 3,
                child: IconButton(
                  onPressed: () {},
                  iconSize: 100,
                  icon: Image.network(
                    "https://i.ibb.co/hxNbZ8p/shazam.png",
                    color: Colors.white,
                  ),
                  color: Colors.blue[300],
                ),
              ), // 큰 shazam 아이콘
              Flexible(
                flex: 2,
                child: IconButton(
                  // 두번째 질문 : style의 backgroundColor은 커녕,
                  iconSize: 50, // 나머지 hover, focus, highlightColor도 반영되지 않아요
                  color: Colors.white,
                  style: IconButton.styleFrom(backgroundColor: Colors.black),
                  hoverColor: Colors.yellow,
                  focusColor: Colors.red,
                  highlightColor: Colors.green,
                  onPressed: () {},
                  icon: const Icon(Icons.search),
                ),
              ), // search 아이콘
            ],
          ),
        ),
      ),
    );
  }
}