2020/11/1 Flutter : Extract Methodについて

//スタート時点コード
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  // TODO: Make a collection of cards (102)
  // TODO: Add a variable for Category (104)
  @override
  Widget build(BuildContext context) {
    // TODO: Return an AsymmetricView (104)
    // TODO: Pass Category variable to AsymmetricView (104)
    return Scaffold(
      appBar:AppBar(
        leading: IconButton(
          icon: Icon(
            Icons.menu,
            semanticLabel: 'menu',
          ),
          onPressed: () {
            print('Menu button');
          },
        ),
        title: Text('SHRINE'),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              Icons.search,
              semanticLabel: 'search',
            ),
            onPressed: () {
              print('Search button');
            },
          ),
          IconButton(
            icon: Icon(
              Icons.tune,
              semanticLabel: 'filter',
            ),
            onPressed: () {
              print('Filter button');
            },
          ),
        ],
      ),
      body: GridView.count(
        crossAxisCount: 2,
        padding: EdgeInsets.all(16.0),
        childAspectRatio: 8.0 / 9.0,
        // TODO: Build a grid of cards (102)
        children: <Widget>[
          Card(
            clipBehavior: Clip.antiAlias,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                AspectRatio(
                  aspectRatio: 18.0 / 11.0,
                  child: Image.asset('assets/diamond.png'),
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(16.0,12.0, 16.0, 8.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text('Title'),
                      SizedBox(height: 8.0),
                      Text('Secondary Text'),
                    ],
                  ),
                ),
              ],
            ),
          )
        ],
      ),
      //↓(3)popで追加。
      resizeToAvoidBottomInset: false,
    );
  }
}

上記コードではネストが深くなりすぎるので、その対策として49行目から73行目までのList<Card>型のウィジェット生成部分を抜き出して、関数定義する、ということをやっていました。

http://okutaro.com/2020/10/31/2020-10-31-mdc-1…ut-flutterの訳パート4/

具体的な方法として、

(1)関数_buildGridCardsを自分で定義する。

(2)対応部分(49行目から73行目)を

_buildGridCards(10);

に置き換える。

ということをやっていました。それでもいいんですが、Extract Methodという方法を使うと少しスピーディーに終わらせることができます。

Extract methodの方法

(1)抜き出したい部分の先頭(スタート時点コードの49行目)にカーソルを合わせる。

(2)command+option+Mを押す(mac)。

command+option+Mを押すと上図のように抜き出したい箇所が自動的に選択され、メソッド(関数)名を指定するダイアログが出てきますので、関数名を指定して[ Refactor ]ボタンを押します。(今回は_buildGridCards)

//Extract Widget実行後
//(対応箇所のみ表示)

      body: GridView.count(
        crossAxisCount: 2,
        padding: EdgeInsets.all(16.0),
        childAspectRatio: 8.0 / 9.0,
        // TODO: Build a grid of cards (102)
        //↓ここが自動的に生成された関数に置き換えられている。
        children: _buildGridCards(), 
      ),
      //↓(3)popで追加。
      resizeToAvoidBottomInset: false,
    );
  }

//↓指定した関数名で関数が自動生成された。
//返り値の型はList<Card>と修正した方が良いです。
  List<Widget> _buildGridCards() {
    return <Widget>[
        Card(
          clipBehavior: Clip.antiAlias,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              AspectRatio(
                aspectRatio: 18.0 / 11.0,
                child: Image.asset('assets/diamond.png'),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(16.0,12.0, 16.0, 8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('Title'),
                    SizedBox(height: 8.0),
                    Text('Secondary Text'),
                  ],
                ),
              ),
            ],
          ),
        )
      ];
  }
}

スタート時点コードと見比べていただくとわかりますが、抜き出したWidgetを返り値として返す関数

_buildGridCards()

が自動的に定義されて、該当箇所でその関数を呼び出すコードが生成されています。

ただ抜き出したいだけならこれだけで終わりです。

しかし今回のサンプルではただ抜き出すだけではなく、カード(Card)を複数生成する関数を作りましょう、という話だったので、_buildGridCards()の中身を少し修正する必要があります。(修正は自分でやるしかない。)

2020/10/31 MDC-102 Flutter: Material Structure and Layout (Flutter)の訳パート4

修正したら↑の一番目のコードになります。

以上です。非常に便利な機能ですので、気に入った方はお使いください。