Pakete, Repositories und App-Kategorien suchen

ducafecatFlutter-Ökosystem
Cover von flutter_circular_text
Paketdetailsv0.3.1

flutter_circular_text

Flutter-Paket, das Text in einem gekrümmten kreisförmigen Pfad platziert.

AndroidiOSWebmacOSWindowsLinux
pub.dev API-Dokumentation Quellcode
30-Tage-Downloads
3500
Likes
177
Pub-Punkte
160

Paket installieren

flutter pub add flutter_circular_text

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Ein Flutter-Paket, das die Darstellung von Text entlang einer gekrümmten kreisförmigen Bahn ermöglicht und eine visuell ansprechende Methode zur Anzeige von Text in kreisförmigen Layouts bietet. Ideal für die Erstellung dynamischer und künstlerischer UI-Elemente wie kreisförmige Fortschrittsanzeigen, Abzeichen oder dekorative Textanordnungen. Das Paket unterstützt mehrere Plattformen wie Android, iOS, Web, macOS, Windows und Linux und sorgt für ein konsistentes Verhalten über Geräte hinweg. Es bietet eine einfache Integration über ein spezielles Widget mit anpassbaren Optionen für Radius, Winkel und Ausrichtung.

Anwendungsfälle

  • Kreieren von kreisförmigen Textabzeichen
  • Animation von kreisförmigen Beschriftungen gestalten
  • Dekorative UI-Elemente erstellen
  • Implementierung von kreisförmigen Fortschrittsanzeigen
  • Verbesserung der Dashboard-Visualisierungen

Hauptmerkmale

  • Text entlang einer gekrümmten kreisförmigen Bahn
  • Anpassbare Radius und Winkel
  • Unterstützung für mehrere Plattformen
  • Einfache Widget-Integration
  • Ausrichtungs- und Rotationssteuerung

Geeignet für

  • UI-Designer, die kreative Textlayouts suchen
  • Entwickler, die interaktive Dashboards erstellen
  • Apps mit einzigartigen visuellen Effekten
  • Projekte mit kreisförmigen oder radialen Gestaltungsthemen
  • Prototyping künstlerischer Schnittstellen

Hinweise

  • Kann die Leistung bei großen Textmengen beeinträchtigen
  • Nur auf kreisförmige Pfade beschränkt
  • Erfordert sorgfältige Ausrichtung für Lesbarkeit
  • Nicht ideal für lange Absätze
  • Die Textrichtung muss möglicherweise manuell angepasst werden

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

Circular Text Widget

pub package

Installation

Add dependency in pubspec.yaml:

dependencies:
  flutter_circular_text: "^0.3.1"

Import in your project:

import 'package:flutter_circular_text/circular_text.dart';

Basic usage

CircularText(
  children: [
    TextItem(
      text: Text(
        "Chuck Norris".toUpperCase(),
        style: TextStyle(
          fontSize: 28,
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      space: 12,
      startAngle: -90,
      startAngleAlignment: StartAngleAlignment.center,
      direction: CircularTextDirection.clockwise,
    ),
    TextItem(
      text: Text(
        "top 100 Facts".toUpperCase(),
        style: TextStyle(
          fontSize: 20,
          color: Colors.amberAccent,
          fontWeight: FontWeight.bold,
        ),
      ),
      space: 10,
      startAngle: 90,
      startAngleAlignment: StartAngleAlignment.center,
      direction: CircularTextDirection.anticlockwise,
    ),
  ],
  radius: 125,
  position: CircularTextPosition.inside,
  backgroundPaint: Paint()..color = Colors.grey.shade200,
)

Examples

example project contains single and multi text demos

Demos
Single Text Demo

alt tag

Multi Text Demo

Changelog

Check Changelog for updates

Bugs/Requests

Reporting issues and requests for new features are always welcome.

Kategorien

Textdekoration, Effekt und Animation

Quell-Repository

Projekte, die dieses Paket verwenden