code_field 다운로드 code_field 소스 코드 다운로드

code_field

기타 리소스

1.0.0

다운로드

코드 필드

구문 강조 표시를 지원하는 사용자 정의 가능한 코드 텍스트 필드

라이브 데모

몇 가지 언어 / 테마 조합을 보여주는 라이브 데모

유리 진열장

실험 VM DLOX는 온라인 편집자에서 Codefield를 사용합니다.

특징

Flutter_Highlight 덕분에 90 개의 테마를 가진 189 개의 내장 언어에 대한 코드 하이라이트
테마 맵 사용을 통한 쉬운 언어 하이라이트 사용자 정의
API와 같은 텍스트 필드를 통해 완전히 사용자 정의 가능한 코드 필드 스타일
수평/수직 스크롤 및 수직 확장을 처리합니다
코드 수정자를 지원합니다
Android, iOS, 웹, MacOS, Windows 및 Linux에서 작동합니다

코드 수정자는 자동으로 들여 쓰기를 관리하는 데 도움이됩니다

편집기는 긴 줄을 처리하기 위해 수평 스크롤 가능한 컨테이너로 싸여 있습니다.

설치

플러터 프로젝트의 pubspec.yaml 에서 다음의 종속성을 추가하십시오.

 dependencies :
  ...
  code_text_field : <latest_version>

최신 버전

라이브러리에서 다음 가져 오기를 추가합니다.

 import 'package:code_text_field/code_text_field.dart' ;

간단한 예

Codefield 위젯은 언어에 따라 텍스트 입력을 동적으로 구문 분석하고 테마 맵으로 렌더링하는 CodeController 와 함께 작동합니다.

 import 'package:flutter/material.dart' ;
import 'package:code_text_field/code_text_field.dart' ;
// Import the language & theme
import 'package:highlight/languages/dart.dart' ;
import 'package:flutter_highlight/themes/monokai-sublime.dart' ;

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

class _CodeEditorState extends State < CodeEditor > {
  CodeController ? _codeController;

  @override
  void initState () {
    super . initState ();
    final source = "void main() { n    print( " Hello, world! " ); n }" ;
    // Instantiate the CodeController
    _codeController = CodeController (
      text : source,
      language : dart,
    );
  }

  @override
  void dispose () {
    _codeController ? . dispose ();
    super . dispose ();
  }

  @override
  Widget build ( BuildContext context) {
    return CodeTheme (
      data : const CodeThemeData (styles : monokaiSublimeTheme),
      child : CodeField (
        controller : _codeController ! ,
        textStyle : const TextStyle (fontFamily : 'SourceCode' ),
      ),
    );
  }
}

여기에서 Monospace Font Source Code Pro가 자산 폴더 및 Pubspec.yaml 파일에 추가되었습니다.

파서 옵션

언어 정의 외에도 StringMap 필드에 단어 별 스타일을 지정할 수 있습니다.

_codeController = CodeController (
  //...
  stringMap : {
    "Hello" : TextStyle (fontWeight : FontWeight .bold, color : Colors .red),
    "world" : TextStyle (fontStyle : FontStyle .italic, color : Colors .green),
  },
);

더 복잡한 Regexes도 PatternMap 과 함께 사용될 수 있습니다. 그래도 언어를 사용하면 Regexes 패턴이 PatternMap 및 StringMap 보다 우선합니다.

_codeController = CodeController (
  //...
  patternMap : {
    r"B#[a-zA-Z0-9]+b" :
        TextStyle (fontWeight : FontWeight .bold, color : Colors .purpleAccent),
  },
);

PatternMap 및 StringMap 은 언어를 지정하지 않고 사용할 수 있습니다.

_codeController = CodeController (
  text : source,
  patternMap : {
    r'".*"' : TextStyle (color : Colors .yellow),
    r'[a-zA-Z0-9]+(.*)' : TextStyle (color : Colors .green),
  },
  stringMap : {
    "void" : TextStyle (fontWeight : FontWeight .bold, color : Colors .red),
    "print" : TextStyle (fontWeight : FontWeight .bold, color : Colors .blue),
  },
);

코드 수정 자

코드 수정자는 특수 키 스트로크에 반응하도록 만들 수 있습니다. 기본 수정자는 탭을 우주 및 자동 압입으로 처리합니다. 다음은 기본 탭 모디퍼 의 구현입니다

 class TabModifier extends CodeModifier {
  const TabModifier () : super ( ' t ' );

  @override
  TextEditingValue ? updateString (
      String text, TextSelection sel, EditorParams params) {
    final tmp = replace (text, sel.start, sel.end, " " * params.tabSpaces);
    return tmp;
  }
}

API

코드 필드

 const CodeField ({
    Key ? key,
    required this .controller,
    this .minLines,
    this .maxLines,
    this .expands = false ,
    this .wrap = false ,
    this .background,
    this .decoration,
    this .textStyle,
    this .padding = EdgeInsets .zero,
    this .lineNumberStyle = const LineNumberStyle (),
    this .enabled,
    this .onTap,
    this .readOnly = false ,
    this .cursorColor,
    this .textSelectionTheme,
    this .lineNumberBuilder,
    this .focusNode,
    this .onChanged,
    this .isDense = false ,
    this .smartQuotesType,
    this .keyboardType,
    this .lineNumbers = true ,
    this .horizontalScroll = true ,
    this .selectionControls,
    this .hintText,
    this .hintStyle,
  })

Linenumberstyle

  const LineNumberStyle ({
    this .width = 42.0 ,
    this .textAlign = TextAlign .right,
    this .margin = 10.0 ,
    this .textStyle,
    this .background,
  });

CodeController

 CodeController ({
    String ? text,
    Mode ? language,
    this .patternMap,
    this .stringMap,
    this .params = const EditorParams (),
    this .modifiers = const [
      IndentModifier (),
      CloseBlockModifier (),
      TabModifier (),
    ],
  })