Widgets 분신술

import 'package:flutter/material.dart';

class Button extends StatelessWidget {
  final String text;
  final Color bgColor;
  final Color textColor;

  const Button(
      {super.key,
      required this.text,
      required this.bgColor,
      required this.textColor});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: bgColor,
        borderRadius: BorderRadius.circular(45),
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
        child: Text(
          text,
          style: TextStyle(
            color: textColor,
            fontSize: 20,
          ),
        ),
      ),
    );
  }
}

widget 을 별도 class로 추출하여 재사용이 가능하도록 만드는 방법

위 코드는 간단한 button을 만들 수 있도록 작성된 코드이며,
이를 응용해서 Card 형식의 widget 상세 설정한 코드는 아래 깃허브에 있다.

(참고 : https://github.com/MoonhaloSUZ/Flutter/blob/main/webtoon/lib/widgets/currency_card.dart)

맛 보기 🫣

color: isInverted ? Colors.white : Colors.black

-> isInverted는 bool 이므로, 사용자에게 true, false 입력받아 색상 전환 가능

Transform.translate

-> Offset(dx, dy)로 x, y 좌표를 입력받아 위젯 움직이기

Transform.scale

-> icon만 크기 조절할 때 사용했는데, (위젯 안의 아이콘을 Transfrom 없이 키우면 위젯이 함께 커짐)
다른 응용법은 더 알아봐야한다.