<p>Flutter海外勢の動画を見ていると、VSCodeを使っている人がやたら多い...!!<br>
VSCode何がそんなに便利やねんと思いつつ調べていくと、拡張機能がかなり充実している様子。</p>
<p>知っているか知っていないかで<br>
アプリ開発初期、UI構築時の開発スピードがかなり変わりそう🧐</p>
<p>情報をまとめておきます！</p>
<h1 id="flutter-tree">
<a class="header-anchor-link" href="#flutter-tree" aria-hidden="true"></a> Flutter Tree</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7d95c8d78b691" src="https://embed.zenn.studio/card#zenn-embedded__7d95c8d78b691" data-content="https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dmarcelovelasquez.flutter-tree" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://marketplace.visualstudio.com/items?itemName=marcelovelasquez.flutter-tree</a><br style="display:none">
<img src="https://storage.googleapis.com/zenn-user-upload/iltyhou78ohjbo99zdimydqx4jro" alt loading="lazy" class="md-img"></p>
<p>これめちゃくちゃ便利です。<br>
コードを書く前にUIの実装イメージが固まっているのが前提ですが、<br>
わずか1行で複雑なレイアウトを一気に書けます。</p>
<h1 id="flutter-widget-snippets">
<a class="header-anchor-link" href="#flutter-widget-snippets" aria-hidden="true"></a> Flutter Widget Snippets</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__55431d0321ee4" src="https://embed.zenn.studio/card#zenn-embedded__55431d0321ee4" data-content="https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dalexisvt.flutter-snippets" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets</a><br style="display:none">
Widgetに特化したSnippets！よく使うWidgetが爆速で入力できる<br>
<code>Column</code>とか<code>Row</code>ってよく使うけど<code>children</code>まで書くの面倒だな～と思ってたのは僕だけ？<br>
<img src="https://storage.googleapis.com/zenn-user-upload/54x090w7sufzm3qo03m10j1eqq2h" alt loading="lazy" class="md-img"></p>
<table>
<thead>
<tr>
<th>対応するWidget</th>
<th>記法</th>
<th>特記</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column</td>
<td>fcol</td>
<td></td>
</tr>
<tr>
<td>Row</td>
<td>frow</td>
<td></td>
</tr>
<tr>
<td>Container</td>
<td>fcont</td>
<td></td>
</tr>
<tr>
<td>Text</td>
<td>ftxt</td>
<td></td>
</tr>
<tr>
<td>SizedBox</td>
<td>fszb</td>
<td>
<code>fszbh</code>はheight, <code>fszbw</code>はwidthプロパティ付き</td>
</tr>
<tr>
<td>EdgeInsets</td>
<td>fedg</td>
<td>
<code>fedgall</code> , <code>fedgonly</code>, <code>fedgesym</code>, <code>fedgesymh</code>, <code>fedgesymv</code>
</td>
</tr>
</tbody>
</table>
<h1 id="awesome-flutter-snippets">
<a class="header-anchor-link" href="#awesome-flutter-snippets" aria-hidden="true"></a> Awesome Flutter Snippets</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a9b8cb02dc155" src="https://embed.zenn.studio/card#zenn-embedded__a9b8cb02dc155" data-content="https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3DNash.awesome-flutter-snippets" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets</a><br style="display:none">
FlutterのSnippetsと言ったら定番はこれ！って感じの有名なSnippets。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/spxxs33nwgvq5cyg4yt67mo6mmet" alt loading="lazy" class="md-img"></p>
<p>個人的にはFutureBuilderが一瞬で入力できるのがお気に入り。<br>
<code>@override</code>でアノテーションが必要なinitStateも<code>initS</code>で書けるので便利。</p>
<p>よく使うSnippets<br>
| 対応するWidgetなど | 記法 |<br>
| ---- | ---- | ---- |<br>
| Stateless Widget | statelessW |<br>
| Stateful Widget | statefulW |<br>
| ListView.builder | listViewB|<br>
| initState | inisS |<br>
| material package|　importM |</p>
<h1 id="flutter-auto-import">
<a class="header-anchor-link" href="#flutter-auto-import" aria-hidden="true"></a> Flutter-Auto-Import</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__68985928c7e2f" src="https://embed.zenn.studio/card#zenn-embedded__68985928c7e2f" data-content="https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Ddavidwoo.flutter-auto-import" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://marketplace.visualstudio.com/items?itemName=davidwoo.flutter-auto-import" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://marketplace.visualstudio.com/items?itemName=davidwoo.flutter-auto-import</a><br style="display:none">
importが必要なコードを書いた際に、自動でimport文を追記してくれる拡張機能。<br>
この拡張のあるなしでVSCodeの書き心地が随分と楽になります。</p>
<p>VSCodeでFlutter書くなら必須の拡張機能！</p>
<h1 id="error-lens">
<a class="header-anchor-link" href="#error-lens" aria-hidden="true"></a> Error Lens</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e07baa42b6b1c" src="https://embed.zenn.studio/card#zenn-embedded__e07baa42b6b1c" data-content="https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dusernamehw.errorlens" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens</a></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>マーケットプレイスで探すといくつか出てくるので注意。<br>
Alexander氏の作成した拡張の方が使いやすい。</p>
</div></aside>
<p>エラーメッセージをインラインで出力してくれる拡張。</p>
<p>標準だとエラーは波線表示されますが、何がダメなのかいちいち確認するのは面倒ですよね。<br>
インラインで表示してくれるので、パパっとコードを修正できるのは快適ですよ！</p>
<h1 id="flutter-color">
<a class="header-anchor-link" href="#flutter-color" aria-hidden="true"></a> Flutter Color</h1>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__6c5f7b800ccaa" src="https://embed.zenn.studio/card#zenn-embedded__6c5f7b800ccaa" data-content="https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dcirclecodesolution.ccs-flutter-color" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://marketplace.visualstudio.com/items?itemName=circlecodesolution.ccs-flutter-color" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://marketplace.visualstudio.com/items?itemName=circlecodesolution.ccs-flutter-color</a><br style="display:none">
<img src="https://storage.googleapis.com/zenn-user-upload/ggfu3qz5dr0cme5tfyjpd9xfmfv0" alt loading="lazy" class="md-img"></p>
<p>ARGBカラーコードに自動でカラーボックスを付けてくれる拡張機能。<br>
ボックスにカーソルを合わせるとグリグリ動かせるので楽しい。</p>
<p>AndroidStudioは自動で表示されるんですが、VSCodeは標準でサポートされていないようなので、入れておくのがベターかな。</p>
<h1 id="2021%2F03%2F20">
<a class="header-anchor-link" href="#2021%2F03%2F20" aria-hidden="true"></a> 2021/03/20</h1>
<p>Flutter-Auto-Importが便利すぎて追記しちゃいました。<br>
おかげで5つの拡張と言いつつも、6つの拡張機能になっちゃったZE...</p>
<h1 id="pr">
<a class="header-anchor-link" href="#pr" aria-hidden="true"></a> PR</h1>
<p>Flutterと薬剤師っぽい話題を半々くらいでつぶやいてます。<br>
ぼくと友達になってよ。<br>
<a href="https://twitter.com/hagakun_yakuzai" target="_blank" rel="nofollow noopener noreferrer"><img src="https://storage.googleapis.com/zenn-user-upload/qwllww8unz8r8jqmgjhm3j8bc2y1" alt width="300" loading="lazy" class="md-img"></a></p>
<p>はじめてのアプリをリリースしました🎉<br>
良かったら使ってみてくださいな～！</p>
<h3 id="%E2%9C%85%EF%BC%9A%E8%96%AC%E5%89%A4%E5%B8%AB%E5%90%91%E3%81%91%E9%9B%BB%E5%8D%93%E3%82%A2%E3%83%97%E3%83%AA---phalc">
<a class="header-anchor-link" href="#%E2%9C%85%EF%BC%9A%E8%96%AC%E5%89%A4%E5%B8%AB%E5%90%91%E3%81%91%E9%9B%BB%E5%8D%93%E3%82%A2%E3%83%97%E3%83%AA---phalc" aria-hidden="true"></a> ✅：薬剤師向け電卓アプリ - Phalc</h3>
<p><img src="https://storage.googleapis.com/zenn-user-upload/nuqcgd9pikvs0imds7jkyk8gdjtn" alt loading="lazy" class="md-img"><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__870ecd419bbd4" src="https://embed.zenn.studio/card#zenn-embedded__870ecd419bbd4" data-content="https%3A%2F%2Fapps.apple.com%2Fus%2Fapp%2Fphalc-%25E8%2596%25AC%25E5%2589%25A4%25E5%25B8%25AB%25E5%2590%2591%25E3%2581%2591%25E9%259B%25BB%25E5%258D%2593%25E3%2582%25A2%25E3%2583%2597%25E3%2583%25AA%2Fid1553088820" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://apps.apple.com/us/app/phalc-%E8%96%AC%E5%89%A4%E5%B8%AB%E5%90%91%E3%81%91%E9%9B%BB%E5%8D%93%E3%82%A2%E3%83%97%E3%83%AA/id1553088820" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://apps.apple.com/us/app/phalc-薬剤師向け電卓アプリ/id1553088820</a><br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__74a0333fe3e0e" src="https://embed.zenn.studio/card#zenn-embedded__74a0333fe3e0e" data-content="https%3A%2F%2Fplay.google.com%2Fstore%2Fapps%2Fdetails%3Fid%3Dhagakun.pharm_calc" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://play.google.com/store/apps/details?id=hagakun.pharm_calc" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://play.google.com/store/apps/details?id=hagakun.pharm_calc</a></p>


Flutter開発を高速化するVSCode拡張機能を5つ紹介🎉

✅：薬剤師向け電卓アプリ - Phalc

Discussion