Flutter copyWith Method

---

* 개인적인 공부 내용을 기록하기 위해 작성한 포스팅이기에 잘못된 내용을 포함하고 있을 수 있습니다. 

* Flutter FrameWork의 copyWith 메서드와 사용법에 대한 내용에 대해 정리한 글입니다.

---

What is copyWith?

copyWith method는 주로 immutable object(불변객체)에서 사용되는 메서드로, 변경하고자 하는 객체를 복사해 특정 필드만 변경할 수 있도록 도와주는 메서드이다. 

플러터는 상태를 관리할 때 기존 객체를 직접 수정하는 방식이 아닌 새로운 객체를 생성한 뒤 객체의 필드를 수정하는 방식으로 동작한다.

이때 copyWith method를 사용하면 보다 편리하게 객체의 필드를 변경할 수 있다.  

 

copyWith method Usage Example Code

_Title Widget 내부에 nov, Dev 2개의 텍스트 위젯이 Row Widget에 선언되어있는 간단한 UI이다.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _Title(),
          ],
        ),
      ),
    );
  }
}

class _Title extends StatelessWidget {
  const _Title({super.key});

  @override
  Widget build(BuildContext context) {
    final textStyle = TextStyle(
      color: Colors.white,
      fontSize: 32.0,
      fontWeight: FontWeight.w300,
    );

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'nov',
          style: TextStyle(
            color: Colors.white,
            fontSize: 32.0,
            fontWeight: FontWeight.w300,
          ),
        ),
        Text(
          'Dev',
          style: TextStyle(
            color: Colors.white,
            fontSize: 32.0,
            fontWeight: FontWeight.w300,
          ),
        ),
      ],
    );
  }
}

 

위 화면에서 Dev 글자를 출력하는 Text Widget의 fontWeight를 700으로 변경하고 싶다면 다음과 같이 리팩토링을 진행하면 된다. 

1. TextStyle을 별도의 변수로 추출한다. 

2. Dev Text Widget에 copyWith 메서드를 사용해 텍스트 굵기를 700으로 변경한다. 

 

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _Title(),
          ],
        ),
      ),
    );
  }
}

class _Title extends StatelessWidget {
  const _Title({super.key});

  @override
  Widget build(BuildContext context) {

    final textStyle = TextStyle(
      color: Colors.white,
      fontSize: 32.0,
      fontWeight: FontWeight.w300,
    );

    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'nov',
          style: textStyle,
        ),
        Text(
          'Dev',
          style: textStyle.copyWith(
            fontWeight: FontWeight.w700,
          ),
        ),
      ],
    );
  }
}