Stack, Alignment, Align

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,
            ),
          ],
        ),
      ),
    );
  }
}

--

Stack 위젯

Stack(
  alignment: Alignment.center,
  children: [
    // 자식 위젯들이 여기에 위치합니다
  ],
)

• 목적: Stack 위젯은 여러 위젯들을 서로 겹쳐서 배치할 수 있게 해줍니다. 여기서는 아이콘과 텍스트를 버튼 안에서 겹쳐서 표시하는 데 사용됩니다.
• alignment: Stack의 alignment 속성은 Alignment.center로 설정되어 있습니다. 이는 Stack이 그 안의 자식들을 중앙에 맞춰서 정렬한다는 것을 의미합니다. 자식 위젯들의 크기가 다를 경우, 이들은 서로 위에 중앙에 위치하게 됩니다.

Stack의 자식 위젯들

Stack 안에는 두 개의 자식 위젯이 있습니다:

1. 아이콘을 포함한 Align 위젯

   Align(
     alignment: Alignment.centerLeft,
     child: icon,
   ),

   • 목적: Align 위젯은 Stack 안에서 icon을 위치시키는 데 사용됩니다.
   • alignment: 이 Align 위젯의 alignment 속성은 Alignment.centerLeft로 설정되어 있어, 아이콘이 Stack의 중앙-왼쪽에 위치하게 됩니다. 즉, 버튼 안에서 아이콘은 수직 방향으로는 가운데에, 수평 방향으로는 왼쪽에 위치하게 됩니다.
   • child: 이 Align 위젯의 child는 버튼에 표시하려는 FontAwesome 아이콘인 FaIcon 객체입니다.

2. 텍스트 위젯

   • Stack의 두 번째 자식은 버튼의 text를 표시하기 위한 Text 위젯입니다. Stack의 정렬이 중앙으로 설정되어 있고, Text 위젯에 별도의 정렬이 주어지지 않았기 때문에, 이 텍스트도 Stack 안에서 수직 및 수평으로 중앙에 위치하게 됩니다.

전체 레이아웃

이러한 위젯들이 Stack 안에서 겹쳐질 때:

• 아이콘은 버튼의 중앙-왼쪽에 위치합니다.
• 텍스트는 버튼의 중앙에 위치합니다.
• 이들은 겹치지만, 서로 다르게 정렬되어 있어서, 아이콘이 왼쪽에, 텍스트가 버튼 중앙에 오는 레이아웃이 생성됩니다.

Stack, Align 및 직접적인 자식 위젯들의 조합은 아이콘과 텍스트를 특정한 배치로 표시하고자 할 때 매우 유연한 방법을 제공합니다.