플러터에서 코드를 표시할 수 있는 위젯

플러터에서 코드를 표시하는 데 사용할 수 있는 몇 가지 위젯이 있습니다. 가장 일반적으로 사용되는 위젯은 다음과 같습니다.

 

1. Text 위젯:

• 가장 간단한 방법으로, 코드를 일반 텍스트와 마찬가지로 표시합니다.
• 코드 블록을 구분하기 위해 들여쓰기 및 문자 스타일링을 사용할 수 있습니다.
• 하지만, 구문 색상 지정이나 코드 접힘 기능과 같은 고급 기능은 제공하지 않습니다.

import 'package:flutter/material.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: Text(
          '''
          // 간단한 예시 코드
          function helloWorld() {
            print('Hello, World!');
          }

          helloWorld();
          ''',
          style: TextStyle(
            fontSize: 16.0,
            fontFamily: 'Courier New',
          ),
        ),
      ),
    );
  }
}

 

2. HighlightText 위젯:

• Text 위젯보다 더 많은 기능을 제공하며, 코드 구문을 색상으로 표시할 수 있습니다.
• 다양한 언어의 구문 색상 설정이 가능합니다.
• 하지만, 코드 접힘 기능과 같은 일부 고급 기능은 여전히 제공하지 않습니다.

import 'package:flutter/material.dart';
import 'package:highlight_text/highlight_text.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: HighlightText(
          '''
          // 간단한 예시 코드
          function helloWorld() {
            print('Hello, World!');
          }

          helloWorld();
          ''',
          language: 'dart',
          style: {
            'keyword': TextStyle(color: Colors.blue),
            'function': TextStyle(color: Colors.red),
            'string': TextStyle(color: Colors.green),
            'comment': TextStyle(color: Colors.grey),
          },
        ),
      ),
    );
  }
}

 

3. flutter_highlight 패키지:

• HighlightText 위젯보다 더 많은 기능을 제공하며, 코드 접힘 기능, 줄 번호 표시, 복사 기능 등을 제공합니다.
• 다양한 테마를 사용할 수 있으며, 사용자 정의 테마 설정도 가능합니다.
• 코드 편집기와 같은 더 강력한 기능을 원하는 경우 유용합니다.

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),
          // 코드 접힘, 줄 번호 표시, 복사 기능 등 설정 가능
        ),
      ),
    );
  }
}

 

 

4. 기타 위젯

• source_code_view 패키지: https://pub.dev/
• code_viewer 패키지: https://pub.dev/packages/code_viewer
• flutter_syntax_highlighter 패키지: https://pub.dev/packages/syntax_highlight

5. 선택 및 사용

 

코드 표시에 사용할 위젯은 프로젝트의 요구 사항에 따라 선택해야 합니다.

• 간단한 코드 표시에는 Text 위젯을 사용하는 것이 가장 쉽습니다.
• 구문 색상 표시 기능이 필요하면 HighlightText 위젯을 사용합니다.
• 코드 접힘, 줄 번호 표시, 복사 기능 등 더 많은 기능이 필요하면 flutter_highlight 패키지를 사용합니다.
• 특정 프로그래밍 언어에 최적화된 위젯이 필요하면 source_code_view 또는 code_viewer 패키지를 사용할 수 있습니다.
• 사용자 정의 테마 설정이 필요하면 flutter_syntax_highlighter 패키지를 사용할 수 있습니다.

6. 마무리

 

플러터에서 코드를 표시하는 데 사용할 수 있는 다양한 위젯이 있습니다.

각 위젯의 기능과 장단점을 이해하고, 프로젝트의 요구 사항에 맞는 위젯을 선택하는 것이 중요합니다.

 

참고 자료

• 플러터 공식 문서: https://docs.flutter.dev/
• HighlightText 위젯 공식 문서: https://pub.dev/packages/highlight_text
• flutter_highlight 패키지 공식 문서: https://pub.dev/packages/highlight/versions

주의: 위에 소개된 패키지들은 2024년 5월 28일 기준으로 최신 버전입니다. 사용하기 전에 최신 버전인지 확인하세요.

 

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

 

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

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