お急ぎの方はFlutter開発時の小技 #1からお読みください。
全集中・PGの呼吸 一ノ型 「ウィジェットのラッピング」
すみません。お疲れ様です。
Flutterで開発を進めていると、ウィジェットの構造が複雑になります。
親に新しいウィジェットを追加したいと思っても、括弧が間違っていたりちょっとしたミスが出てしまうことありませんか？（私です。。。）
そんな時に役に立つ小技を紹介したいと思います。
雑談にお付き合いさせてしまい申し訳ございませんでした。本題に入りたいと思います。
Flutter開発時の小技 #1
複雑に入り組んだウィジェットでも、後から簡単に新規ウィジェットでラッピングする方法
- ラッピングしたいウィジェットを選択
- 選択した行の右側に電球マークが出現するので、それをクリック
- 親に追加したいウィジェットを選択
以上です。（小技感MAX(꒪ཫ꒪; )ﾔﾊﾞｲ）
例
下記ソースのCenterウィジェットを任意のウィジェットで囲いたいとします。
先にBeforeとAfterの結果を示し、次に方法を示したいと思います。
結果
before.dart
// ↓ここCenter(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:<Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style:Theme.of(context).textTheme.display1,),],),),after.dart
// ↓ここContainer(child:Center(child:Column(mainAxisAlignment:MainAxisAlignment.center,children:<Widget>[Text('You have pushed the button this many times:',),Text('$_counter',style:Theme.of(context).textTheme.display1,),],),),),方法
Centerをクリックします。
画像1 ウィジェットの選択
上記の「画像1ウィジェットの選択」の様に電球マークが出てきますので、それをクリックします。
画像２ 電球マークの選択
親として追加したいウィジェットを選択します。以下の項目が選択可能です。
- widjet(選択項目以外で追加したい場合に使用)
- Column
- Container
- Padding
- Row
- StreamBuilder
- Parent
今回はContainerを選択します。
画像3 選択結果
上記の様に、囲うようにウィジェット が追加されました。
自ら追加するよりも、早くなりミスも少なくなると思うので是非試してみてください。
以上 ありがとうございました。
毎週、Flutter関連で情報発信するのでよろしくお願いします。
TO「先輩方」
ご意見ご鞭撻のほど、よろしくお願いいたします。
@kyota_kobayashi