//スタート時点コード 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
修正したら↑の一番目のコードになります。
以上です。非常に便利な機能ですので、気に入った方はお使いください。