Flutter 開発者向け Android Studio (IntelliJ) Tips

Flutter 開発において知っていると括弧地獄、テンプレ地獄などから少しだけ開放される Tips を紹介します。

## Live Templates

よく使う定型文を生成してくれます。クラス名だけ抜けているのでそこは自分で埋めます。

![Live template screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/8be98b1e-2c6a-8913-9a90-ea7e2dec2d24.gif)

`stless` と打つと StatelessWidget のブランクテンプレートを自動生成します：

```dart
class  extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
```

`stful` で StatefulWidget：

```dart
class  extends StatefulWidget {
  @override
  _State createState() => _State();
}
```

`stanim` で AnimationController を持つ StatefulWidget：

```dart
class  extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}
```

`inh` で InheritedWidget:

```dart
class  extends InheritedWidget {
  const ({
    Key key,
    @required Widget child,
  })
      : assert(child != null),
        super(key: key, child: child);

  static  of(BuildContext context) {
    return context.inheritFromWidgetOfExactType() as ;
  }

  @override
  bool updateShouldNotify( old) {
    return ;
  }
}
```

`B` で {} (閉じ中括弧)

`P` で () (閉じ括弧)

### ショートカットキー

- Windows: Ctrl + J
- Mac: ⌘ + J

![Live templates key shortcut screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/576f1fba-e661-7ae8-de51-e487833770d6.png)

> **Settings ⇒ Editor ⇒ Live Templates** でカスタムテンプレートの追加ができます。

## ALT + ENTER (⌥ + Return) - Assists & Quick Fixes

### Padding を追加

Widget にカーソルを当てて ⇒

- Win: ALT + Enter ⇒ Add padding
- Mac: ⌥ + Return ⇒ Add padding

![Add Padding screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/22ca5a08-0a3d-7702-5adf-2c9330c54e7e.gif)

### Column/Row/Container/SteamBuilder/その他 Widget でラップする

Widget にカーソルをあてて ⇒

- Win: ALT + Enter ⇒ Select Wrap with XXX
- Mac: ⌥ + Return ⇒ Select Wrap with XXX

### Widget を除去

Widget にカーソルを当てて ⇒

- Win: ALT + Enter ⇒ Remove widget
- Mac: ⌥ + Return ⇒ Remove widget

![Remove widget screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/52d4d797-f83d-9039-5483-2b8f8b18cb1a.gif)

### child を children に変換する

child にカーソルを当てて ⇒ Convert to children

![Convert child to children](https://qiita-image-store.s3.amazonaws.com/0/188470/380a4d28-bf76-0d1a-7df6-eda755db344d.gif)

### Widgets を上下に移動させる

Widget にカーソルを当てて ⇒ Move widget up/down

![move_up_widget.gif](https://qiita-image-store.s3.amazonaws.com/0/188470/63a38d1b-f7df-a005-47ee-51111f8070ea.gif)

### Stateless を Stateful に変換する

StatelessWidget にカーソルを当てて ⇒

- Win: ALT + Enter ⇒ Convert to StatefulWidget
- Mac: ⌥ + Return ⇒ Convert to StatefulWidget

![Convert Stateless to Stateful screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/4e1493bb-6cc7-ce05-9d1f-08e2dd1a4ba1.gif)

## メソッドの抽出

Widget にカーソルを当てて ⇒

- Win: Ctrl + ALT + M
- Mac: ⌥ + ⌘ + M

![Extract method screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/4dc6664d-3ae6-9150-e94c-a2e2ec14419e.gif)

Widget にカーソルを当てて ⇒ Extract method

## Widget の全選択

Widget にカーソルを当てて ⇒

- Win: Ctrl + W 2回
- Mac: ⌥ + 上矢印2回

## 選択の拡張・縮小

拡張 - Widget にカーソルを当てて ⇒

- Win: Ctrl + W
- Mac: ⌥ + 上矢印

縮小 - Widget にカーソルを当てて

- Win: Ctrl + SHIFT + W
- Mac: ⌥ + 下矢印

![Expand/Shrink screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/30cd4207-81d0-3782-4c81-31fff4ee0eb1.gif)

## カーソルの履歴を辿る

- Win: Ctrl + ALT + 左矢印/右矢印
- Mac: ⌘ + [/]

![Navigate back/forth screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/dc0799a6-5f89-4844-bd86-814a6cb15c6b.gif)

## Widget のプロパティ・定義を見る

### Quick Documentation (show dartdoc)

- Win: Ctrl + Q
- Mac: F1

![Quick documentation screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/d3e3ed24-ad42-bf0c-a4bf-58a7463cb0a9.png)

> Ctrl を押しながらカーソルを当てることで１行で表示

### Quick Definition

- Win: Ctrl + SHIFT + I
- Mac: ⌃ + Y

![Quick definition screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/3c832b43-06af-7791-1418-93de369c9906.png)

## ソースコードを開く

- Win: Ctrl + B
- Mac: ⌘ + B

### Sample App Creation

API のサンプルコードが付いているクラスもあります。

![Sample app creation screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/49e90b90-0a1d-79ba-b9dc-0e61b793b447.png)

> 要 Flutter 33.0+ & Android Studio 3.3.1+

## インデントをいい感じに

- Win: Ctrl + ALT + L
- Mac: ⌥ + ⌘ + L

> 最後のコンマがフォーマッティングに影響します。

全く同じ内容の Text widget でコンマがあるかないかの違いの例：

![Trailing commas screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/d82cc4f9-b5bb-5d4c-dfaf-340aa9261e48.png)

## importの掃除

- Win: Ctrl + ALT + O
- Mac: ⌃ + ⌥ + O

## リネーム

SHIFT + F6

</br>

---

## Flutter Outline

![Flutter Outline screenshot](https://qiita-image-store.s3.amazonaws.com/0/188470/ceee8702-9eab-6412-de31-77f33c285452.png)

</br>

---

## 参考資料

[Android Studio](<https://flutter.io/docs/development/tools/android-studio>)

[New tooling release for IJ and AS](https://groups.google.com/forum/?linkId=52478434&linkId=63655583#!topic/flutter-dev/6UeOXzFIAoM)

[Flutter: My favourite keyboard shortcuts](https://medium.com/coding-with-flutter/flutter-my-favourite-keyboard-shortcuts-63f6474afc8c)

[VS Code](https://flutter.io/docs/development/tools/vs-code)

[Flutter — Visual Studio Code Shortcuts for Fast and Efficient Development](https://medium.com/flutter-community/flutter-visual-studio-code-shortcuts-for-fast-and-efficient-development-7235bc6c3b7d)

---

## 非Macユーザ向け

- ⌃: Control
- ⌘: Command
- ⌥: Option