[플러터] Flutter / Live Templates 만들고 사용하기 (라이브 탬플릿, 자동 완성)

Intellij IDEA 에서는 Live Templates 라는 편리 기능을 지원하고 있다.

오늘 한번 사용해보자.

Live Templates 들어가기

 

일단 File 에서 Settings 로 넘어가 준다.

 

그 후 Editor 안에 Live Templates 이라고 있는데 여기에 들어가 준다.

그리고 사진처럼 Flutter 탭을 선택하고 열 것이다.

 

탭을 열면 이렇게 나올 텐데 자주 사용하는 stless 나 stful 도 보이는 모습이다.

그리고 사진 속에서 지금 위에 3개가 파란색으로 되어 있는데 저 3개가 내가 새로 추가한 거다.

 

한번 추가해 보자.

 

사진 속 순서대로 Flutter 를 선택한 후 위의 + 버튼을 누르고 Live Template 를 선택한다.

 

그럼 위와 같이 <abbreviation> 라고 하나 만들어졌을 것이다. 지금 저부분이 이제 우리가 코드에서 서제스쳔에 표시되는 이름이자 불러올 수 있는 key 같은 이름이다.

 

이름은 이제 알아서 지으면 되고 설명도 굳이 추가할 필요는 없지만 추가해도 문제없다

Live Templates 설정하기

 

본격적으로 만들기 전에 이미 만들어져 있는 stful 하나 보고 가자.

 

stful 을 사용해 봤다면 바로 이해했을 건데 간단히 설명은 하고 가겠다.

일단 여기에 작성하는 텍스트는 불러왔을 때 그냥 그대로 불러와진다. 

허나 $NAME$으로 감싸게 되면 이제 불러올 때 우리가 작성할 수 있는 필드로 바뀌게 되는데 $NAME$ 가 두 개 이상 있다면 처음 등장한 것 이외의 $NAME$은 자동으로 입력한 값으로 채워지는 느낌이다.

이 정도면 된 것 같으니 바로 만들어 보자.

 

일단 나는 이렇게 하나 만들었다.

import 'package:flutter/material.dart';

class $NAME$ extends StatefulWidget {
  const $NAME$({super.key});

  @override
  State<$NAME$> createState() => _TestState();
}

class _TestState extends State<$NAME$> {

  void updateScreen() {
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      $PROV$.addListener(updateScreen);
    },);
  }

  @override
  void dispose() {
    $PROV$.removeListener(updateScreen);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column($END$),
      ),
    );
  }
}

 

이렇게 하면 NAME을 다 치면 이제 그다음 PROV으로 넘어가고 그것도 다 쳤다면 END 로 넘어가서 마무리되는 구조이다.

 

다른 것도 한번 봐보자.

import 'package:flutter/material.dart';

$NAME$ $name$ = $NAME$();

class $CLASS$ extends ChangeNotifier {

  $END$

}

이것은 조금 설명할 것이 있는데 위의 설명 대로라면 NAME -> name -> CLASS -> END 순서대로 작성할 수 있을 것이다.

그러나 옆에 Edit Variables... 에서 이 순서를 바꿀 수가 있다. 

 

 

저걸 누르게 되면 이런 창이 뜰 텐데

 

이제 여기서 순서를 바꿀 수가 있는데 내가 CLASS 를 가장 위에 올려놓았으므로 CLASS -> NAME 순으로 전개된다.

 

그런데 이제 여기서 name 에 decapitaliize(NAME) 이 들어가 있는데 이 뜻은 NAME 에 적힌 앞 글자를 소문자로 바꿔주는 역할을 한다.

 

암튼 이렇게 다 만들었다면 마지막 설정이 남아있다.

 

이걸 클릭한 다음 본인이 사용할 곳을 지정해 주면 끝이 난다.

도움이 되었길 바라며 마치겠다