How ToProgramming

Create A Circular Text Widget In Flutter

You may be wondering how it’s possible to make a circular text in Flutter, or maybe you feel it possible. Yes, It’s possible. You can create a circular text using flutter.

As a Flutter developer and designer, one thing you should always look out for is trying to make any App you’re building/designing unique. We’ll be going through an easy step on how you can make a circular text in flutter.

The best part of this is that It doesn’t require much code to be able to set this up. It only requires a flutter package from pub.dev. You’ll see one thing flutter can do that most other frameworks won’t be able to do.

Flutter Packages Needed

Visit pub.dev to get these packages.

  • Flutter Circular Text (flutter_circular_text)

Install the Flutter_Circular_Text Packages in Pubspec.yaml

Go to your pubspec.yaml file in your project and add the flutter_circular_text: ^0.3.0 package below your dependency, the same way it is shown below.

dependencies:
  flutter:
    sdk: flutter
  flutter_circular_text: ^recent version

Import the Flutter_Circular_Text package & Apply the code

Firstly, import your Flutter_Circular_Text and Material package to your page, See an example below of how you can use the Flutter_Circular_Text in your App.

import 'package:flutter/material.dart';
import 'package:flutter_circular_text/circular_text.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
       
        primarySwatch: Colors.orange,
        
      ),
      home: MyHomePage(title: 'Circular Text Home'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

 final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text(widget.title),
      ),


      body: Container(
        padding: EdgeInsets.only(top: 30),
        alignment: Alignment.topCenter,
        child: Column(
          children: <Widget>[Container(
            height: 300,
            width: 300,
            child: CircularText(children: <TextItem>[
              TextItem(
        text: Text(
          "Flutter Help at techllyn".toUpperCase(),
          style: TextStyle(
            fontSize: 20,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        space: 7,
        startAngle: -90,
        startAngleAlignment: StartAngleAlignment.center,
        direction: CircularTextDirection.clockwise,
    ),
    TextItem(
        text: Text(
          "top 100 Facts".toUpperCase(),
          style: TextStyle(
            fontSize: 20,
            color: Colors.orange,
            fontWeight: FontWeight.bold,
          ),
        ),
        space: 10,
        startAngle: 90,
        startAngleAlignment: StartAngleAlignment.center,
        direction: CircularTextDirection.anticlockwise,
    ),
            ],

            radius: 120,
  position: CircularTextPosition.inside,
  backgroundPaint: Paint()..color = Colors.black87,
  
         ),
          ),
          ]
        ),
      )
      
    );
  }
}

The code would give you result as you see below, and if by chance you have any question about this tutorial, Contribution, or encounter any error, Please do well to drop a comment below.

CL!CK HERE TO READ THE DOWNLOAD GUIDE AFTER DOWNLOADING THE FILE

Output

Attributes

radiusCircle radius
positionText position either outside or inside circle
backgroundPaintBackground paint
childrenList of text  final List<TextItem>

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected - We work so hard to bring You great content-- Please disable Adblocker to browse our site

It seems you're using an Adblocker, Please disable it to get this access to this file.