CupertinoActivityIndicator In Flutter
Displaying Future data In an app is an everyday task in modern applications. As most of the data come from the APIs there comes in need of using proper loading Indicators before the data comes in place. Progress Indicators are a Quintessential tool in modern applications as they provide us with the ease of customizing the User-Interface of the app as per user needs by creating a uniformity displaying of API results data. They also provide the app its fondness and customizability as per particular needs. If your flutter app constitutes Cupertino widgets mainly then a good idea would be to use the CupertinoActivityIndicator as a progress indicator.
CupertinoActivityIndicator is the Cupertino version of the material circular progress indicator. It animates in a clockwise circle. Flutter possesses in its store a widget to perform this task with ease & perfection Using CupertinoActivityIndicator.
If you are requiring a progress indicator for cupertino widgets then the below mentioned is the widget for you :
Watch this video By Flutter for more info on the topic :
What is Flutter?
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”
If you want to explore more about Flutter, please visit Flutter’s official website to get more information.
Flutter Is Proudly Entrusted By These Organizations For their Products : — Flutter Showcase
CupertinoActivityIndicator Syntax :
: Add the CupertinoActivityIndicator() widget .
: Define boolean value to animating property with it being set to false for freezed kind of progress indicator and being set to true if progress indicator is needed to animate.
: Define double value to radius determining progress indicator size to be displayed.
CupertinoActivityIndicator(
animating: true,
radius: _kDefaultIndicatorRadius,
Key: key)
Using Along with FutureBuilder :
Api Handlers | Circular Progress Indicator are mainly functional for awaiting Non-Deterministic behavior.
So one way to Incorporate it into your app is to wrap it inside a FutureBuilder Widget. This way, CupertinoActivityIndicator will appear while your app is loading data and disappear when your data is ready.
FutureBuilder<String>(
future: _fetchData
builder:(context,snapshot){
if(snapshot.hasData){
return /////;
} else {
return CupertinoActivityIndicator(
animating: false,radius: 10
)
}
}
)
When you run this Flutter application, you would get the CupertinoActivityIndicator displayed in UI as shown below :
Understanding Widget Elements :
CupertinoActivityIndicator.partiallyRevealed: Another type of Cupertino activity indicator that displays a partial ticker based on the progress value provided.
: animating: Whether the activity Indicator is running its animation or not
: radius: radius of the spinner displayed
: key : controls widget replacing activity
Enabling For Flutter Web
CupertinoActivityIndicator Performs the Same for flutter web as well by changing the channel to development mode as current web is enabled in the beta channel.
Use the following commands to switch channels and enabling flutter web
flutter channel beta
flutter upgrade
flutter config — enable-web
Add-On Web to your project & run the project to web view
flutter create .
flutter run -d chrome
Closing Thoughts
In this blog, we explored the CupertinoActivityIndicator widget provided by Flutter for creating an iOS-style activity indicator that spins clockwise. The key purpose of this article is to avail you of an Insight into How we can create CupertinoActivityIndicator based flutter application using the official flutter widget.
If you have not used CupertinoActivityIndicator, I hope this article has provided you with content information about what’s all about it and you will give it — a Try.
Initiate using CupertinoActivityIndicator for your apps. !!
References For the Blog :
CupertinoActivityIndicator class
API docs for the CupertinoActivityIndicator class from the cupertino library, for the Dart programming language.api.flutter.dev
Progress Indicators – Controls – iOS – Human Interface Guidelines – Apple Developer
Don’t make people sit around staring at a static screen waiting for your app to load content or perform lengthy data…developer.apple.com
🌸🌼🌸 Thank you for reading. 🌸🌼🌸🌼
Feel free to connect with us:
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
