Flutterの教科書 プログラムのリファクタリングで、新たにクラスを作るときの方法

Flutterにおいて、プログラムのリファクタリングを行う際に便利に使えるのが、Extra Widgetです。

まず、リファクタリングを行いたいWidgetを選択します。

そして次に、右クリックをクリックします。

そうすると、写真のようなリストが出て来ますので、そこで”Extract Widget...”を選択します。

そして、クラス名を命名します。

Refactorを押下すると、次のようにリファクタリングされます。

あとは、引数などを変更して完成です。

最終的には以下のようなコードにリファクタリングされました。

class RoundedButton extends StatelessWidget {

  RoundedButton({this.title, this.colour, @required this.onPress});

  final Color  colour;
  final String title;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 16.0),
      child: Material(
        elevation: 5.0,
        color: colour,
        borderRadius: BorderRadius.circular(30.0),
        child: MaterialButton(
          onPressed: onPress;
          minWidth: 200.0,
          height: 42.0,
          child: Text(
            title,
          ),
        ),
      ),
    );
  }
}

このリファクタリングしたクラスを使用する場合は、次のように記述していきます。

RoundedButton(
  title: 'Log in',
  colour: Colors.lightBlueAccent,
  onPress: (){},
),

そしてリファクタリングしたコードを、別のファイルへ移動させれば、より見易くなります。

import 'package:flutter/material.dart';

class RoundedButton extends StatelessWidget {

  RoundedButton({this.title, this.colour, @required this.onPress});

  final Color  colour;
  final String title;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 16.0),
      child: Material(
        elevation: 5.0,
        color: colour,
        borderRadius: BorderRadius.circular(30.0),
        child: MaterialButton(
          onPressed: onPress,
          minWidth: 200.0,
          height: 42.0,
          child: Text(
            title,
          ),
        ),
      ),
    );
  }
}

簡単ですが、以上です！