Flutter のコード簡略化方法（Widgetの抽出「Extract」）

コードの肥大化を防ごう！

アプリを作っている時に似たような構成のWidgetが複数出来上がってしまうことがあると思います。
上記のような似たWidgetを一つずつ書いたままにしているとコードが肥大化してしまい、後々コードを見直すと作成者でもコード構成の把握までに時間を要してしまいます。

そのような時にWidgetの抽出（Extract）を利用すると、Widgetの再利用が可能になるため、
コードの肥大化を防ぐことができ、コードの可読性が向上します。

※作業環境
VScode

Widgetの抽出方法（Extract）

下記の手順でWidgetの抽出を行います。
①抽出化したいWidgetを選択して、「command」＋「.」を押す

②「Extract Widget」を押して、VScode上部のテキストエディタにWidgetの名前をつけてあげる（好きな名前をつける）

③ ①②を実行したDartファイルの下部に名前をつけたWidgetが登録される

抽出したWidgetの使い方

使用したい箇所に下記画像のように使っていきます。
引数にtextやcolorなどを指定すれば、状況に応じて表示する文字列や文字色等の変換が適宜行える為便利ですね。

まとめ

コードが汚いと後々後悔しますよね。