[Flutter] Stack과 Align 같이 사용하기 [기록]

위 와 같이 Container안에 왼쪽에는 아이콘 가운데에는 글자를 넣어야하는 상황이 많이 오게 되는데
할 수 있는 방법은 여러가지 있지만 그 중 가장 쉽게 텍스트의 가운데를 확실하게 잡아주는 것 같아서 기록해두려고 한다.

import 'package:flutter/material.dart';
import 'package:tiktok_clone/constants/sizes.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.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.symmetric(
            vertical: Sizes.size14, horizontal: Sizes.size10),
        decoration: BoxDecoration(
            border:
                Border.all(color: Colors.grey.shade200, width: Sizes.size2)),
        child: Stack(alignment: Alignment.center, children: [
          Align(alignment: Alignment.centerLeft, child: icon),
          Expanded(
            child: Text(
              text,
              textAlign: TextAlign.center,
              style: const TextStyle(
                  fontSize: Sizes.size16, fontWeight: FontWeight.bold),
            ),
          ),
        ]),
      ),
    );
  }
}