Flutter開発をスピードアップするためのヒント

投稿日: 2022-04-20 2022-04-20
タグ: Flutter

Flutterのすべての利点があっても、すべてに欠点があります。 Flutterは、ウィジェットとパッケージの供給が増え続ける簡単なものである場合もあれば、「不足しているブラケットを見つける」という繰り返しの入力と1時間のゲームの混乱である場合もあります。この新しいテクノロジーを学ぶことの増大する苦痛を軽減するのを助けるために、いくつかのことを検討します。

簡潔にするために、主にVSCodeで利用できるものを見ていきます。他の編集者は同じであるか、独自の同等物を持っているかもしれませんが。

ネイティブトリック

これらのキーバインドはエディターによって異なりますが、VSCodeとAndroidStudioで使用できます。

後続のコンマ

コードをフォーマットしたままにする最も簡単な方法は、行の最後にコンマを追加するだけで、エディターがコードをネストされたツリーのような構造に再フォーマットすることです。多くの角かっこと極端なネストは、いくつかのものをインラインに保つよりも混乱する場合があるため、すべての行でこれを行うことはお勧めしません。

main.dart

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[Row(children: <Widget>[Container(child: Center(child: Text('I\m some text'),),),],),],);
  }
}

再フォーマットされて…

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Container(
              child: Center(
                child: Text('I\m some text'),
              ),
            ),
          ],
        ),
      ],
    );
  }
}

リファクタリングツール

VSCodeは、すべてを手動で切り取ってウィジェットを作成し、作業をやり直す必要があるたびに貼り付けるのではなく、それを処理するための優れたリファクタリングツールを提供します。

ウィジェットの名前の中にカーソルを置き、表示される小さな電球を押すだけで、列を追加したり、独自のウィジェットに抽出したり、完全に削除したりするためのオプションが表示されます。カーソルを中央に置くか、右クリックしてリファクタリングを探すか、Ctrl+Shift+Rを使用できます。

Refactoring Example

ソースコードを見る

ドキュメント以外に、Flutterがどのように機能するかを理解するための優れた方法の1つは、Flutterソース自体を調べることです。 Flutterチームは、使用するすべてのものに対して非常によくコメントされたコードベースを作成しました。これは、特定のウィジェットが取る引数とそれらで何が行われているのかを知りたい場合、または特定のエラーが発生する理由を理解したい場合に非常に役立ちます。

Ctrlを押したまま、検査するウィジェットをクリックするだけです。

Flutter Source Code

拡張機能

ブラケットペアカラーライザー

これは、ブラケットのセットを区別するために異なる色を使用します。これにより、特定のウィジェットがどこで開始および終了するかを把握する必要がなくなり、フラストレーションを無限に減らすことができます。

Colored Brackets Example

Pubspec Assist

ドキュメントにアクセスして、必要な依存関係または最新のバージョン番号を見つけ、何かが必要になるたびにそれをpubspec.yamlファイルにコピー/貼り付けする時代は終わりました。これで、Crtl+Shift+Pを使用して、Pubspec Assistをアクティブにし、必要な情報を伝えることができます。

Pubspec Assist Example

フラッターファイル

基本的なボイラープレートのためだけに繰り返し入力する量を避けるために、Flutterファイルには、ディレクトリを右クリックしたときにいくつかの追加オプションがあります。それは時々あなたが必要とする以上のものをあなたに与えるかもしれません、しかしそれでもあなたがすべてを自分で書くよりもあなたが必要としないものを取り除くことははるかに簡単です。

Flutter Files Example

素晴らしいフラッタースニペット

入力する必要が少ないほど、私は幸せです。この小さなコレクションは、ステートレスウィジェットやビルドメソッドの作成方法を正確に思い出せない場合に、天の恵みのように見えることがあります。

オプションの完全なリストについては、それらのリポジトリを確認してください。

結論

ショートカットを使用して反復的なタスクを自動化する方法は常に無限にありますが、これが最も一般的なもののいくつかへの役立つ入門書になることを願っています。

getdocs

13036