flutter_arc_text 0.4.0 flutter_arc_text: ^0.4.0 copied to clipboard
Flutter widget that renders text along the arc with configurable radius.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_arc_text/flutter_arc_text.dart';
import 'package:storybook_flutter/storybook_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
body: Story(
name: 'Arc text',
builder: (_, k) {
final displayCircle = k.boolean('Display circle', initial: true);
final radius =
k.slider('Radius', initial: 100, max: 200, min: 50);
final startAngle =
k.slider('Start angle', initial: 0, max: 360) * pi / 180;
final stretchAngle =
k.slider('Stretch angle', initial: 0, max: 360) * pi / 180;
final text = k.text(
'Text',
initial: 'Hello, Flutter! I am ArcText widget. '
'I can draw circular text.',
);
final alignment = k.options('Alignment',
options: const [
Option('Start', StartAngleAlignment.start),
Option('Center', StartAngleAlignment.center),
Option('End', StartAngleAlignment.end),
],
initial: StartAngleAlignment.start);
return Container(
decoration: displayCircle
? BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(radius),
color: Colors.white,
)
: null,
width: radius * 2,
height: radius * 2,
child: ArcText(
radius: radius,
text: text,
textStyle: TextStyle(fontSize: 18, color: Colors.black),
startAngle: startAngle,
startAngleAlignment: alignment,
placement: k.options(
'Placement',
options: const [
Option('Outside', Placement.outside),
Option('Inside', Placement.inside),
Option('Middle', Placement.middle),
],
initial: Placement.outside,
),
direction: k.boolean('Clockwise', initial: true)
? Direction.clockwise
: Direction.counterClockwise,
stretchAngle: stretchAngle == 0 ? null : stretchAngle,
),
);
},
),
),
);
}