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

플러터에서 코드를 표시하는 데 가장 강력하고 유연한 방법 중 하나는 flutter_highlight 패키지를 사용하는 것입니다.

이 패키지는 코드 구문 색상 지정, 코드 접힘, 줄 번호 표시, 복사 기능 등 다양한 기능을 제공합니다. 또한 사용자 정의 테마 설정도 가능하여 원하는 대로 코드 표시를 커스터마이징할 수 있습니다.

 

1. 설치

 

flutter_highlight 패키지를 설치하려면 다음 명령을 실행합니다.

flutter pub add flutter_highlight

 

2. 사용 방법

 

flutter_highlight 패키지를 사용하려면 다음과 같이 HighlightView 위젯을 사용합니다.

import 'package:flutter/material.dart';
import 'package:flutter_highlight/flutter_highlight.dart';

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: 'github',
          padding: EdgeInsets.all(16.0),
        ),
      ),
    );
  }
}

 

3. 속성

• code: 표시할 코드 문자열입니다.
• language: 코드 언어를 지정합니다. (dart, python, java 등)
• theme: 코드 표시 테마를 지정합니다. (github, dark, light 등)
• padding: 코드 주변 여백을 지정합니다.
• textStyle: 코드 텍스트 스타일을 지정합니다.
• gutterDecoration: 코드 왼쪽 여백에 표시할 장식을 지정합니다.
• lineNumberStyle: 줄 번호 스타일을 지정합니다.
• foldWidgets: 코드 접힘 기능을 위한 위젯을 지정합니다.
• onFoldStateChanged: 코드 접힘 상태가 변경될 때 호출되는 함수입니다.
• onSelectionChanged: 코드 선택 범위가 변경될 때 호출되는 함수입니다.
• onCopied: 코드가 복사될 때 호출되는 함수입니다.

4. 테마

flutter_highlight 패키지는 기본적으로 여러 가지 테마를 제공합니다.

• github: Github 스타일의 테마입니다.
• dark: 어두운 테마입니다.
• light: 밝은 테마입니다.
• vscode: Visual Studio Code 스타일의 테마입니다.

사용자 정의 테마를 만들려면 ThemeData 객체를 사용하여 테마 속성을 설정할 수 있습니다.

 

5. 코드 접힘

flutter_highlight 패키지는 코드 접힘 기능을 제공합니다. 코드 줄 앞에 있는 화살표를 클릭하면 해당 코드 블록을 접거나 펼칠 수 있습니다.

 

6. 코드 선택 및 복사

flutter_highlight 패키지는 코드 선택 및 복사 기능을 제공합니다. 코드를 선택하면 복사 아이콘이 나타나고, 아이콘을 클릭하면 선택된 코드를 복사할 수 있습니다.

 

7. 사용자 정의

flutter_highlight 패키지는 다양한 기능을 사용자 정의할 수 있도록 합니다.

• 테마: 사용자 정의 테마를 만들 수 있습니다.
• 코드 접힘: 코드 접힘 기능을 사용자 정의할 수 있습니다.
• 코드 선택 및 복사: 코드 선택 및 복사 기능을 사용자 정의할 수 있습니다.

8. 마무리

flutter_highlight 패키지는 플러터에서 코드를 표시하는 데 매우 강력하고 유연한 도구입니다.

다양한 기능과 사용자 정의 옵션을 제공하여 원하는 대로 코드 표시를 커스터마이징할 수 있습니다.

참고 자료:

• flutter_highlight 패키지 공식 문서: https://pub.dev/packages/highlight/versions

9. 예시

다음은 flutter_highlight 패키지를 사용하여 코드를 표시하는 예시입니다.

 

import 'package:flutter/material.dart';
import 'package:flutter_highlight/flutter_highlight.dart';

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: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            HighlightView(
              '''
              // 간단한 예시 코드
              function helloWorld() {
                print('Hello, World!');
              }

              helloWorld();
              ''',
              language: 'dart',
              theme: 'github',
              padding: EdgeInsets.all(16.0),
            ),
            SizedBox(height: 20.0),
            HighlightView(
              '''
              // 다른 언어 예시
              class Person {
                String name;
                int age;

                Person(this.name, this.age);

                void printInfo() {
                  print('이름: $name, 나이: $age');
                }
              }

              Person person = Person('홍길동', 30);
              person.printInfo();
              ''',
              language: 'java',
              theme: 'dark',
              padding: EdgeInsets.all(16.0),
            ),
          ],
        ),
      ),
    );
  }
}

 

10. 마무리

플러터에서 코드를 표시하는 데 flutter_highlight 패키지는 매우 유용한 도구입니다.

다양한 기능과 사용자 정의 옵션을 제공하여 원하는 대로 코드 표시를 커스터마이징할 수 있습니다.

이 블로그 글을 통해 플러터에서 코드를 표시하는 방법을 더 잘 이해하셨기를 바랍니다.

 

비공개테스트를 위한 20명의 테스터모집 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱