플러터에서 코드 표시: flutter_highlight 패키지에서 에디터 사용하기

 

flutter_highlight 패키지는 플러터에서 코드를 표시하는 데 사용할 수 있는 강력한 도구입니다.

이 패키지는 다양한 기능을 제공하며, 그 중 하나가 바로 에디터 기능입니다.

에디터 기능을 사용하면 코드를 직접 편집할 수 있으며, 코드 접힘, 줄 번호 표시, 검색 등 다양한 기능을 활용할 수 있습니다.

 

1. 에디터 사용 가능 여부 확인

flutter_highlight 패키지의 모든 테마가 에디터 기능을 지원하는 것은 아닙니다.

사용하려는 테마가 에디터 기능을 지원하는지 확인하려면 다음과 같이 코드를 확인할 수 있습니다.

import 'package:flutter_highlight/themes/github.dart'; // github 테마 예시

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('코드 표시 예시'),
      ),
      body: Center(
        child: HighlightView(
          '''
          // 간단한 예시 코드
          function helloWorld() {
            print('Hello, World!');
          }

          helloWorld();
          ''',
          language: 'dart',
          theme: githubTheme, // github 테마 사용
        ),
      ),
    );
  }
}

 

위 코드에서 githubTheme 변수는 github.dart 파일에서 정의된 githubTheme 테마를 참조합니다.

이 테마는 editable 속성이 true로 설정되어 있으므로 에디터 기능을 지원합니다.

2. 에디터 활성화

에디터 기능을 활성화하려면 다음과 같이 editable 속성을 true로 설정합니다.

Dart

HighlightView(
  '''
  // 간단한 예시 코드
  function helloWorld() {
    print('Hello, World!');
  }

  helloWorld();
  ''',
  language: 'dart',
  theme: githubTheme,
  editable: true, // 에디터 기능 활성화
)

코드를 사용할 때는 주의가 필요합니다.

content_copy

3. 에디터 기능 사용

에디터 기능이 활성화되면 다음과 같은 기능을 사용할 수 있습니다.

• 코드 편집: 코드를 직접 입력, 삭제, 수정할 수 있습니다.
• 코드 접힘: 코드 블록을 접거나 펼칠 수 있습니다.
• 줄 번호 표시: 코드 왼쪽에 줄 번호를 표시합니다.
• 검색: 코드 내에서 특정 문자열을 검색할 수 있습니다.
• 포맷팅: 코드 들여쓰기, 정렬 등을 자동으로 수행할 수 있습니다.
• 커맨드: 코드 복사, 붙여넣기, 삭제 등의 작업을 단축키로 수행할 수 있습니다.

4. 에디터 사용자 정의

flutter_highlight 패키지는 에디터 기능을 사용자 정의할 수 있도록 다양한 속성을 제공합니다.

예를 들어, 다음과 같은 속성을 사용하여 에디터 스타일, 커맨드, 이벤트 처리 등을 사용자 정의할 수 있습니다.

• editorOptions: 에디터 스타일, 커맨드 등을 설정하는 데 사용됩니다.
• onEditingStarted: 에디터 편집이 시작될 때 호출되는 함수입니다.
• onEditingChanged: 에디터 내용이 변경될 때 호출되는 함수입니다.
• onEditingCompleted: 에디터 편집이 완료될 때 호출되는 함수입니다.

5. 예시

다음은 에디터 기능을 사용하는 예시입니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('코드 표시 예시'),
      ),
      body: Center(
        child: HighlightView(
          '''
          // 간단한 예시 코드
          function helloWorld() {
            print('Hello, World!');
          }

          helloWorld();
          ''',
          language: 'dart',
          theme: githubTheme,
          editable: true,
          editorOptions: EditorOptions(
            fontSize: 16.0,
            fontFamily: 'Courier New',
            tabSize: 4,
          ),
          onEditingStarted: (controller) {
            print('에디터 편집 시작됨');
          },
          onEditingChanged: (controller, text) {
            print('에디터 내용 변경됨: $text');
          },
          onEditingCompleted: () {
            print('에디터 편집 완료됨');
          },
        ),
      ),
    );
  }
}

 

6. 마무리

flutter_highlight 패키지의 에디터 기능은 코드 표시 기능을 더욱 강력하고 유용하게 만들어줍니다.

에디터 기능을 사용하면 코드를 직접 편집하고, 코드 접힘, 줄 번호 표시, 검색 등 다양한 기능을 활용하여 코드를 더욱 효과적으로 이해하고 작업할 수 있습니다.

이 블로그 글을 통해 플러터에서 코드를 표시할 때 flutter_highlight 패키지의 에디터 기능을 사용하는 방법을 더 잘 이해하셨기를 바랍니다.