인프런 커뮤니티 질문&답변

강사님 안녕하세요?

강의 너무 잘 듣고 있습니다.

코드 정리 관련하여 질문이 있습니다!

(전공자(또는 현업 개발자)가 아니라 질문이 이상해도 양해의 말씀 부탁 드립니다.)

코드정리 시 StatelessWidget 클래스로 정리하는 것(아래 코드 중 #2)과 Return 타입을 Widget으로 하는 함수로 정리하는 것(아래 코드 중 #3)의 차이가 궁금합니다.

#1

class _HomeScreenState extends State<HomeScreen> {
  List<int> numbers = [123, 456, 789];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: PRIMARY_COLOR,
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            header(),
            middle(numbers: numbers.toList()),
            bottom(context, onCreateNumbers),
          ],
        ),
      ),
    );
  }

#2

class header extends StatelessWidget {
  const header({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      const Text(
        '랜덤숫자 생성기',
        style: TextStyle(
          color: Colors.white,
          fontSize: 40,
        ),
      ),
      IconButton(
        icon: const Icon(Icons.settings),
        color: RED_COLOR,
        onPressed: () {},
      ),
    ],
  );
  }
}

#3

Widget header() {
  return Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      const Text(
        '랜덤숫자 생성기',
        style: TextStyle(
          color: Colors.white,
          fontSize: 40,
        ),
      ),
      IconButton(
        icon: const Icon(Icons.settings),
        color: RED_COLOR,
        onPressed: () {},
      ),
    ],
  );
}