CupertinoActivityIndicator Widget – Flutter Widget Guide By Flutter Agency

· 3 min read
Cupertino Activity Indicator Widget - Flutter Widget Guide By Flutter Agency
Cupertino Activity Indicator Widget - Flutter Widget Guide By Flutter Agency

Cupertino is a set of flutter widget helpful in implementing a current iOS design. Earlier we have discussed  CupertinoActionSheet Widget. In this article, we will discuss CupertinoActivityIndicator Widget in detail.

Flutter Team developed a special widget with iOS style and they named it Cupertino. Based on the website there are several widgets with iOS style, some of them are as follows.

  • CupertinoActionSheet
  • CupertinoActivityIndicator
  • CupertinoAlertDialog
  • CupertinoButton
  • CupertinoContextMenu
  • CupertinoDatePicker
  • CupertinoDialog
  • CupertinoDialogAction
  • CupertinoFullscreenDialogTransition
  • CupertinoNavigationBar

What is CupertinoActivityIndicator Widget?

To indicate the waiting process in your iOS application, it may be necessary to display a progress indicator.CupertinoActivityIndicator is an iOS-style activity indicator that spins clockwise.

Default Constructor for it will look like below:

CupertinoActivityIndicator({
  Key key,
  bool animating: true,
  double radius: _kDefaultIndicatorRadius,
});

Properties:

  • Key key: The widget key, used to control if it’s should be replaced.
  • bool animating: Whether the activity indicator is running its animation. The default value will remain true.
  • double radius: This Property will define the radius of the spinner widget.Default value is 10px. Must be positive and cannot be null.

How to use CupertinoActivityIndicator in Flutter?

The following code snippet tells us how to implement CupertinoActivityIndicator Widget in Flutter.

Center(
     child: Container(
       child: CupertinoActivityIndicator(),
     ),
   );

Don’t forget to import

import 'package:flutter/cupertino.dart';

on the top.

We will get output like below:

Cupertino Activity Indicator Widget - Flutter Widget Guide By Flutter Agency

CupertinoActivityIndicator Widget

When we make changes in the default radius property our code snippet will look like below:

Center(
      child: Container(
        child: CupertinoActivityIndicator(
          radius:20,
        ),
      ),
    );

The above code will make changes in radius and will set it to 20. So final our output will look like below:

Cupertino Activity Indicator Widget - Flutter Widget Guide By Flutter Agency

Cupertino Activity Indicator Widget

Conclusion:

In this article, we have been through What is CupertinoActivityIndicator Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!
Do let us know your suggestion/Feedback.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply