Introduction:

A circular countdown timer is a visually appealing and interactive component that displays the remaining time in a circular format. It is commonly used in Flutter apps for various purposes such as countdowns, timed activities, or progress tracking. In this step-by-step guide, you will learn how to create a circular countdown timer in a Flutter app. By following this tutorial, you will be able to incorporate a visually appealing and interactive timer in your app, enhancing the user experience.

Content:

1. Set up a new Flutter project:

Ensure that you have Flutter installed and set up on your machine. Create a new Flutter project using the following command in your terminal:

Copy Code


flutter create circular_countdown_timer_app

2. Add dependencies:

Open the pubspec.yaml file in your Flutter project and add the following dependency:

Copy Code


dependencies:
  flutter:
    sdk: flutter
  percent_indicator: ^3.0.1

Save the changes and run the following command in your terminal to fetch the dependencies:

Copy Code


flutter pub get

3. Implement the Circular Countdown Timer:

In the Dart file where you want to use the circular countdown timer, import the necessary packages:

Copy Code


import 'package:flutter/material.dart';
import 'package:percent_indicator/circular_percent_indicator.dart';

Create a CircularPercentIndicator widget to display the circular countdown timer:

Copy Code


CircularPercentIndicator(
  radius: 200.0,
  lineWidth: 10.0,
  percent: 0.7, // Specify the percentage of the timer
  center: Text(
    '30s', // Display the remaining time
    style: TextStyle(fontSize: 30.0),
  ),
  progressColor: Colors.blue,
),

4. Customize the Circular Countdown Timer:

You can customize the appearance and behavior of the circular countdown timer by modifying the properties of the CircularPercentIndicator widget. For example, you can change the radius, line width, progress color, or add additional widgets inside the center property.

5. Test the Circular Countdown Timer:

Save your changes and run the app using the following command in your terminal:

Copy Code


flutter run

6. Observe the Circular Countdown Timer in Action:

Upon running the app, you will see the circular countdown timer displayed with the specified radius, line width, and progress color. The remaining time will be shown at the center of the circular timer. You can update the percentage and remaining time based on your app’s logic.

Sample Code:

Copy Code


import 'package:flutter/material.dart';
import 'package:circular_countdown_timer/circular_countdown_timer.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Circular Countdown Timer Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CountdownTimerExample(),
    );
  }
}

class CountdownTimerExample extends StatelessWidget {
  final int duration = 60; // Duration in seconds

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circular Countdown Timer Example'),
      ),
      body: Center(
        child: CircularCountDownTimer(
          duration: duration,
          initialDuration: 0,
          controller: CountDownController(),
          width: MediaQuery.of(context).size.width / 2,
          height: MediaQuery.of(context).size.height / 2,
          ringColor:Colors. grey,
          ringGradient: null,
          fillColor: Colors.blue,
          fillGradient: null,
          backgroundColor: Colors.transparent,
          backgroundGradient: null,
          strokeWidth: 10.0,
          strokeCap: StrokeCap.round,
          textStyle: TextStyle(
            fontSize: 32.0,
            color: Colors. red,
            fontWeight: FontWeight.bold,
          ),
          textFormat: CountdownTextFormat.S,
          isReverse: true,
          isReverseAnimation: false,
          isTimerTextShown: true,
          autoStart: true,
          onStart: () {
            // Callback function when the timer starts
            print('Countdown started');
          },
          onComplete: () {
            // Callback function when the timer completes
            print('Countdown completed');
          },
        ),
      ),
    );
  }
}

Output:

Conclusion:

Congratulations! You have successfully created a circular countdown timer in your Flutter app. By following this step-by-step guide, you have learned how to implement a visually appealing and interactive timer that enhances the user experience. Incorporate this feature into your Flutter app to provide a visually engaging way to display countdowns, timed activities, or progress tracking.

Post Views: 1,265