Flutter

Expanded, Flexible

나 같은 경우에는 위젯이 공간을 차지하게 해야 한다 라는 생각에 아래와 같이 가장 바깥을 Expanded로 감싸주었다.

// time_list.dart
Expanded(
      child: ShaderMask(
        shaderCallback: (bounds) {
          return LinearGradient(
            tileMode: TileMode.mirror,
            stops: const [0, 0.05, 0.95, 1],
            colors: [
              Colors.white,
              Colors.white.withOpacity(0),
              Colors.white.withOpacity(0),
              Colors.white,
            ],
          ).createShader(bounds);
        },
        blendMode: BlendMode.dstOut,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 12,
            ),
            child: Row(
              children: times.map((time) {
                return AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  padding: const EdgeInsets.symmetric(
                    horizontal: 8,
                  ),
                  child: TextButton(
                    onPressed: () => onTimeTap(time),
                    style: TextButton.styleFrom(
                      backgroundColor: selectedTime == time * 60
                          ? Theme.of(context).primaryColor
                          : null,
                    ),
                    child: Text(
                      "$time",
                      style: TextStyle(
                          fontSize: 24,
                          color:
                              selectedTime == time * 60 ? Colors.white : null),
                    ),
                  ),
                );
              }).toList(),
            ),
          ),
        ),
      ),
    );

// main_screen.dart

...

Flexible(
  flex: 1,
  child: TimeList(
  	onTimeTap: _onTimeTap,
    selectedTime: _selectedTime,
    ),
),

...

하지만 이렇게 했을 때, 화면이 깨지는 현상이 나타나는데 Flexible 위젯 안에서 Expanded 위젯을 사용했기 때문이다.
두 위젯 모두 특정 값이 아닌 비율로 공간을 차지하는 위젯이기 때문에 같은 자식 위젯에 사용하면 안된다고 한다.❌❌
(내 화면에선 딱히 에러가 안보였어서 몰랐다😂)

해결방법

간단하게 Expanded를 삭제해주면 된다! 그리고 줄어든 공간은 Padding을 추가해서 조정해주었다.