【Flutter】 copyWithとは？オブジェクトのコピー生成について解説

今回は、Flutterのオブジェクトのコピーを生成できる「copyWith」メソッドについて解説します。

名前は見たことがあるけど使い方がいまいちわからないといった方には必見の内容です。

ぜひ最後までご覧ください。

copyWithとは？
copyWithメソッドを利用すると便利な場面
おわりに

copyWithとは？

まず初めに「copyWith」メソッドを用いるとどのようなことができるかを解説していきます。

簡単にお伝えすると、「copyWith」メソッドを使うことでオブジェクトのコピーを生成することができます。

例えば以下のような「Container」が用意されているとします。

Container container1 = Container(
  width: 100, height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.red,
  ),
);

こちらと同じ横幅と縦幅、デザインを持つcontainer2という変数を定義をする場合、以下のような方法で定義することができます。

Container container2 = Container(
  width: 100, height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.red,
  ),
);

この記述だと冗長になってしまうため、「copyWith」メソッドを活用しdecorationプロパティの内容を端的に記述していきます。

こちらを用いると以下のような記述に変更することができます。

BoxDecoration boxDecoration = BoxDecoration(
  shape: BoxShape.circle,
  color: Colors.red,
);

Container container1 = Container(
  width: 100, height: 100,
  decoration: boxDecoration,
);

Container container2 = Container(
  width: 100, height: 100,
  decoration: boxDecoration.copyWith()
);

ただこれだとcontainer1とcontainer2のdecorationプロパティにboxDecoration変数を適用すればいいと思います。

この場面では特別利用する必要性は感じられないと思います。

次項で具体的に利用すると便利な場面をご紹介していきます。

copyWithメソッドを利用すると便利な場面

copyWithメソッドを利用すると便利な場面としては、同じようなUIだけど少しデザインを変更したいときになります。

例えば以下のようなUIがあったとします。

コードは以下です。

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('copyWithSample'),),
      body: Column(
        children: [
          Container(
            width: 100, height: 100,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.red,
            ),
          ),
          Container(
            width: 100, height: 100,
            decoration: BoxDecoration(
              shape: BoxShape.rectangle,
              color: Colors.blue,
            ),
          )
        ],
      ),
    );
  }
}

こちらの「Column」ウィジェットの「children」プロパティに適用している2つの「Container」ウィジェットを見ると同じような内容を記述していることがわかるかと思います。

記述の内容が違うのは、Containerのデザイン部分である「decoration」プロパティの内容です。

このように同じWidgetを用いていて、プロパティの適用内容が少し違うような場合は「copyWith」を用いることでわかりやすく管理することができます。

「CopyWithSample」クラスのbuildメソッドを修正します。

内容を修正したコードは以下です。

@override
Widget build(BuildContext context) {
  BoxDecoration boxDecoration = BoxDecoration(
    color: Colors.red,
    shape: BoxShape.circle
  );

  return Scaffold(
    appBar: AppBar(title: const Text('copyWithSample'),),
    body: Column(
      children: [
        Container(
          width: 100, height: 100,
          decoration: boxDecoration,
        ),
        Container(
          width: 100, height: 100,
          decoration: boxDecoration.copyWith(
            color: Colors.blue,
          ),
        )
      ],
    ),
  );
}

このようにcopyWithを用いてBoxDecorationのコピーを生成することで記述をわかりやすくすることができます。

一部だけデザインを変えたい場合（今回は色を変更）には、copyWIthを活用すると記述がまとまってわかりやすくなります。