CODEWITHSUNDEEP
flutterflutter-layout
asmodeoux
asmodeoux

Reputation: 419

Custom CircularProgressIndicator for Flutter

I'd like to make a custom CircularProgressIndicator to have gradient, elevation and rounded corners, but I couldn't find any libs with that ability. Could you please share your favourites or any workaround? It doesn't need to be animated, just a static progress bar to receive progress value and show it, example: Shadows, rounded corners and gradient

Upvotes: 2

Views: 4984

Answers (2)

Moiz Hassnat
Moiz Hassnat

Reputation: 11

CircularPercentIndicator(
    radius: 50.0, lineWidth: 10.0, percent: 0.4,
    circularStrokeCap: CircularStrokeCap.round,
    progressColor: Colors.purple,
    center: const Text(
        "10 min",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
    ),
    circularStrokeCap: CircularStrokeCap.round,
    progressColor: Colors.purple,
),

Upvotes: 1

Aamil Silawat
Aamil Silawat

Reputation: 8239

Try out this package:

percent_indicator

CircularPercentIndicator(
    radius: screenWidth / 4, 
    lineWidth: 5.0, 
    percent: 0.75, 
    center: new Text("75%", style: TextStyle(color: Color(0xFF535355))), 
    linearGradient: LinearGradient(begin: Alignment.topRight,end:Alignment.bottomLeft, colors: <Color>    [Color(0xFF1AB600),Color(0xFF6DD400)]),rotateLinearGradient: true, circularStrokeCap: CircularStrokeCap.round)

Upvotes: 3

Related Questions