FractionallySizedBox

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:tiktok_clone/constants/sizes.dart';

class AuthButton extends StatelessWidget {
  final String text;
  final FaIcon icon;

  const AuthButton({
    super.key,
    required this.text,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
      widthFactor: 1,
      child: Container(
        padding: const EdgeInsets.all(Sizes.size14),
        decoration: BoxDecoration(
          border: Border.all(
            color: Colors.grey.shade300,
            width: Sizes.size1,
          ),
        ),
        child: Stack(
          alignment: Alignment.center,
          children: [
            Align(
              alignment: Alignment.centerLeft,
              child: icon,
            ),
            Text(
              text,
              style: const TextStyle(
                fontSize: Sizes.size16,
                fontWeight: FontWeight.w600,
              ),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

---

Flutter 코드 분석

1. FractionallySizedBox의 역할

• FractionallySizedBox는 widthFactor 속성을 사용하여 부모 위젯의 너비에 대한 자식 위젯의 너비 비율을 정의합니다. widthFactor가 1로 설정되어 있으므로, AuthButton의 너비는 부모 위젯의 전체 너비와 같게 됩니다. 이를 통해 버튼은 배치된 공간의 전체 너비를 채우도록 확장됩니다.
• FractionallySizedBox의 사용으로 버튼은 다양한 화면 크기에 자동으로 적응하며, 반응형 레이아웃을 제공합니다.

2. 기본 버튼 예시 (FractionallySizedBox 없음)

Container(
  child: ElevatedButton(
    onPressed: () {},
    child: Text('Click Me'),
  ),
)

• 이 기본 예시에서 버튼의 크기는 내용의 크기에 따라 결정되며, 부모의 너비에 맞게 확장되지 않습니다.

3. FractionallySizedBox를 포함한 예시

FractionallySizedBox(
  widthFactor: 1, // 부모의 너비의 100%
  child: Container(
    child: ElevatedButton(
      onPressed: () {},
      child: Text('Click Me'),
    ),
  ),
)

• 여기서 FractionallySizedBox의 widthFactor: 1은 버튼이 부모 컨테이너의 전체 너비를 차지하도록 합니다.

4. 다양한 widthFactor 값을 사용한 예시

Column(
  children: [
    FractionallySizedBox(
      widthFactor: 0.75, // 부모의 너비의 75%
      child: ElevatedButton(
        onPressed: () {},
        child: Text('75% Width'),
      ),
    ),
    FractionallySizedBox(
      widthFactor: 0.5, // 부모의 너비의 50%
      child: ElevatedButton(
        onPressed: () {},
        child: Text('50% Width'),
      ),
    ),
  ],
)

• 첫 번째 버튼은 부모의 너비의 75%를, 두 번째 버튼은 50%를 차지합니다.

5. 결론

• FractionallySizedBox는 Flutter에서 반응형 디자인을 위해 자식 위젯의 크기를 부모의 크기에 상대적으로 조정하는 다용도 위젯입니다. AuthButton 클래스에서 이를 사용하면 버튼은 반응형이 되어 다양한 장치에서 시각적으로 일관성을 유지할 수 있습니다.

---