Flutter開発環境周りのTipsメモ

# 更新情報

2023/11/22
・[vscodeのアップデート](https://code.visualstudio.com/updates/v1_67#_workbench)により、「vscodeのディレクトリ表示の仕方を変更する(file nesting config)」の項目を修正

``` diff:差分
　
- "explorer.experimental.fileNesting.enabled": true,
- "explorer.experimental.fileNesting.expand": true,
- "explorer.experimental.fileNesting.patterns": {

+ "explorer.fileNesting.enabled": true,
+ "explorer.fileNesting.expand": true,
+ "explorer.fileNesting.patterns": {

 ```


# 内容
Flutter開発時の便利なTipsメモ

# 開発環境

PC:macOS Monterey
エディター：Visual Studio Code

## vscodeのディレクトリ表示の仕方を変更する(file nesting config)

shift + command + P でコマンドパレットを表示して、settings.jsonと入力する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/708199ac-7c22-54d9-c852-7e2b96b3fcb8.png">

生成されたsettings.jsonファイルに項目を追加する。

```settings.json
{
    "editor.tabSize": 2,
    ・
    ・
    ・
    ・
    ・
    "dart.debugExternalPackageLibraries": false,
    "window.zoomLevel": -1,

    // 以下の3つの項目を追加
    "explorer.fileNesting.enabled": true,
    "explorer.fileNesting.expand": true,
    "explorer.fileNesting.patterns": {
        "pubspec.yaml": ".packages, .metadata, pubspec.lock",
    },


}
```

左がsettings.jsonに追加前、
右がsettings.jsonに追加後。
pubspec.yamlに関するファイル(.packages, .metadata, pubspec.lock)がネストするようになった。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/07d9ffa5-af3a-1b4e-15ad-7d24bc954bfa.png" width=200px>　　　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/ef867625-fce3-f8bf-bb62-5eb33b626131.png" width=200px>

## constを保存時に自動で行う

まずは、file nesting configと同様にコマンドパレットからsettings.jsonを表示する。
そして、以下のコードを追加する。

```settings.json
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    }
```

・保存前のコード
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/51b51536-d1cd-bd6d-0aa6-b75b9363314b.png">

・保存後のコード
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/804a2b0f-88b6-8c5b-b7e7-c926139acd3b.png">

## パッケージの追加

shift + command + P でコマンドパレットを表示して、Add Dependencyと入力する。

例として、providerと入力して、パッケージを入力する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/b1547613-9154-8608-daaf-a5d7e98df0f6.png">

pubspec.yamlにproviderが追加される

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/faaa8cc8-6819-d6c1-fce7-04a9f213d933.png">

## Awesome Flutter Snippets

vscodeの拡張機能にAwesome Flutter Snippetsを追加する。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/8df73106-aff4-0ace-637d-414ab5b02381.png">

##### パッケージをインポートする。

importMと入力して、エンターをクリックすると、material.dartをインポートしてくれる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/bb36b09a-e6e5-e660-c0e7-075cf251dab0.png">

##### widgetを作成する。

例えば、StatelessWidgetを作成する場合、statelessWと入力して、エンターをクリックすると、sample codeのようなコードが生成される。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/631339/bf01b850-c5b4-663c-536a-daeecca75ae0.png">

```sample_code.dart
class name extends StatelessWidget {
  const name({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
```

## デバッグモードの時だけ、ログを出力する。

foundation.dartをインポートして、kDebugModeを使用できるようにする。

```sample_code.dart
import 'package:flutter/foundation.dart';  // <- 追加
import 'package:flutter/material.dart';

class Sample extends StatefulWidget {
  const Sample({Key? key}) : super(key: key);

  @override
  State<Sample> createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    //デバッグモードの時のみprintする。
    if (kDebugMode) {
      print('build app');
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('Count Up App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}


```


# 参考

[Awesome Flutter Snippets](https://marketplace.visualstudio.com/items?itemName=Nash.awesome-flutter-snippets)