패키지 상세v2.0.5

neonpen

텍스트에 네온 펜 스타일을 추가할 수 있는 플러터 패키지입니다.

AndroidiOSWebmacOSWindowsLinux

pub.dev API 문서 소스 코드

30일 다운로드: 23
좋아요: 12
Pub 점수: 140

패키지 설치

flutter pub add neonpen

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

NeonPen은 개발자가 텍스트에 생동감 있는 네온펜 스타일 효과를 적용할 수 있도록 해주는 Flutter 패키지입니다. 눈에 띄는 시각적 표현을 만들어냅니다. 발광 윤곽선과 동적인 색상 변화로 텍스트를 강화하여 현대적인 UI와 인터랙티브 애플리케이션에 적합합니다. Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원하며, 다양한 기기 간 일관된 스타일링을 보장합니다. pub 명령어를 통한 최소한의 설정으로 기존 Flutter 프로젝트에 원활하게 통합됩니다. 제목, 버튼 또는 특별한 시각적 매력을 필요로 하는 텍스트 요소에 화려함을 더하기에 완벽합니다.

사용 사례

앱에서 빛나는 텍스트 효과 추가하기
시각적으로 매력적인 UI 요소 만들기
게임 또는 대시보드 인터페이스 개선
프로모션 또는 마케팅 화면 설계
애니메이션 텍스트 레이블 구현
시각적 매력으로 사용자 참여도 향상

주요 기능

빛나는 네온 텍스트 효과
동적 색상 전환
크로스 플랫폼 호환성
pub과의 간단한 통합
사용자 정의 가능한 빛 반사 강도
모든 주요 Flutter 플랫폼을 지원합니다

적합한 대상

시각적 영향력을 추구하는 UI/UX 디자이너
게임 또는 대시보드를 구축하는 개발자
현대적인 미학에 초점을 맞춘 앱 제작자
웹 및 모바일 앱을 동시에 개발하는 팀
빠른 애니메이션 효과를 원하는 프론트엔드 개발자

고려 사항

저사양 기기에서 성능에 영향을 미칠 수 있습니다
가독성을 위해 대비 관리에 신중해야 합니다
짧은 텍스트 요소에 가장 적합
본문 또는 접근성에 중요한 콘텐츠에는 권장되지 않습니다
색상 선택 시 화면 밝기와 시각 조건을 고려해야 합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Neonpen

A Flutter package to add a Neon Pen style on text.
There are options for color, opacity, ziggle, double layer and so on.

Preview

Installation

Add neonpen: ^2.0.5 to your pubspec.yaml dependecies. And import it:

import 'package:neonpen/neonpen.dart';

How to use

Simply add a Animation List widget with required params.

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.red,
              opacity: 0.3,
              emphasisWidth: 5,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 0.5,
              enableLineZiggle: true,
              lineZiggleLevel: 0,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.yellow,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
              opacity: 0.3,
              disableEmphasis: true,
              lineZiggleLevel: 1,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.orange,
              padding: EdgeInsets.only(
                top: -10,
                left: 5,
                right: 5,
              ),
              opacity: 0.3,
              disableEmphasis: true,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.grey,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
              opacity: 0.7,
              emphasisWidth: 5,
              emphasisOpacity: 0.5,
              emphasisAngleDegree: 0.5,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.blue,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
              opacity: 0.3,
              emphasisWidth: 15,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 2,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.purple,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 15),
              opacity: 0.3,
              emphasisWidth: 10,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 2,
              enableLineZiggle: true,
              lineZiggleLevel: 2,
              isDoubleLayer: false,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.green,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
              opacity: 0.3,
              emphasisWidth: 5,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 0.5,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: true,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.lime,
              padding: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
              opacity: 0.3,
              emphasisWidth: 5,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 2,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: true,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.amber,
              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
              opacity: 0.3,
              emphasisWidth: 5,
              emphasisOpacity: 0.3,
              emphasisAngleDegree: 0.5,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: true,
            ),
            SizedBox(height: 30),
            Neonpen(
              text: Text(
                'Hello World!',
                style: TextStyle(
                  fontSize: 15,
                ),
              ),
              color: Colors.indigo,
              padding: EdgeInsets.symmetric(vertical: 10, horizontal: 25),
              opacity: 0.3,
              emphasisWidth: 8,
              emphasisOpacity: 0.1,
              emphasisAngleDegree: 0.8,
              enableLineZiggle: true,
              lineZiggleLevel: 1,
              isDoubleLayer: true,
            ),
            SizedBox(height: 30),
          ],
        ),
      ),
    );
}

Properties

Attribute	Data type	Description	Default
text	Text	A Text widget that will be covered by neonpen effect	-
color	Color	A color of neonpen style	-
opacity	double	An opacity of neonpen style	0.5
padding	EdgeInsets	A padding of between Text widget and neonpen style	EdgeInsets.symmetric(horizontal: 5)
disableEmphasis	bool	A bool value to disable emphasis effect	false
emphasisWidth	double	The start and end's neonpen style thickness	5.0
emphasisOpacity	double	An opacity of the start and end's neonpen style	0.55
emphasisAngleDegree	double	An angle degree of the start and end's neonpen style	1
enableLineZiggle	bool	Add a ziggle style to neonpen line	false
lineZiggleLevel	double	A level of ziggle style to neonpen line	1
isDoubleLayer	bool	Add a two neopen style on Text widget	false

카테고리

텍스트 장식, 효과 및 애니메이션

소스 저장소

turlvo/neonpen

neonpen

☆ 0 스타⑂ 0 포크

DartSwift

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.