Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
flutter_circular_text cover
Package detailsv0.3.1

flutter_circular_text

Flutter package which places text in a curved circular path.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
3.5K
Likes
177
Pub points
160

Install package

flutter pub add flutter_circular_text

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that enables text to be rendered along a curved circular path, offering a visually appealing way to display text in circular layouts. Ideal for creating dynamic and artistic UI elements such as circular progress indicators, badges, or decorative text arrangements. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring consistent behavior across devices. It provides simple integration via a dedicated widget with customizable radius, angle, and alignment options.

Use cases

  • Creating circular text badges
  • Designing animated circular labels
  • Building decorative UI elements
  • Implementing circular progress displays
  • Enhancing dashboard visuals

Key features

  • Text along a curved circular path
  • Customizable radius and angle
  • Support for multiple platforms
  • Simple widget integration
  • Alignment and rotation controls

Suitable for

  • UI designers seeking creative text layouts
  • Developers building interactive dashboards
  • Apps requiring unique visual effects
  • Projects with circular or radial design themes
  • Prototyping artistic interfaces

Considerations

  • May impact performance with large text amounts
  • Limited to circular paths only
  • Requires careful alignment for readability
  • Not ideal for long paragraphs
  • Text direction may need manual adjustment

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Categories

Text Decoration, Effect & Animation

Source repository

Projects using this package