Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
88
Help us understand the problem. What is going on with this article?
@ssoejima

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

More than 1 year has passed since last update.

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

Live Templates

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

Live template screenshot

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

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

stful で StatefulWidget:

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

stanim で AnimationController を持つ StatefulWidget:

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:

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

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

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

Padding を追加

Widget にカーソルを当てて ⇒

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

Add Padding screenshot

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

child を children に変換する

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

Convert child to children

Widgets を上下に移動させる

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

move_up_widget.gif

Stateless を Stateful に変換する

StatelessWidget にカーソルを当てて ⇒

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

Convert Stateless to Stateful screenshot

メソッドの抽出

Widget にカーソルを当てて ⇒

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

Extract method screenshot

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

カーソルの履歴を辿る

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

Navigate back/forth screenshot

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

Quick Documentation (show dartdoc)

  • Win: Ctrl + Q
  • Mac: F1

Quick documentation screenshot

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

Quick Definition

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

Quick definition screenshot

ソースコードを開く

  • Win: Ctrl + B
  • Mac: ⌘ + B

Sample App Creation

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

Sample app creation screenshot

要 Flutter 33.0+ & Android Studio 3.3.1+

インデントをいい感じに

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

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

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

Trailing commas screenshot

importの掃除

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

リネーム

SHIFT + F6


Flutter Outline

Flutter Outline screenshot


参考資料

Android Studio

New tooling release for IJ and AS

Flutter: My favourite keyboard shortcuts

VS Code

Flutter — Visual Studio Code Shortcuts for Fast and Efficient Development


非Macユーザ向け

  • ⌃: Control
  • ⌘: Command
  • ⌥: Option
88
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
88
Help us understand the problem. What is going on with this article?