Skip to content

Commit

Permalink
Merge pull request #3 from SplashByte/dev
Browse files Browse the repository at this point in the history
Version 2.1
  • Loading branch information
maeddin authored Apr 2, 2021
2 parents 390988b + e33ffa3 commit 15532b1
Show file tree
Hide file tree
Showing 14 changed files with 199 additions and 98 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
## [0.2.1] - (2021-04-02)

- Minor Changes/Fixes
- Changes default values of CircularWidgetLoading

## [0.2.0] - (2021-03-04)

- Migrates to null safety
Expand Down
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@
[![pub points](https://badges.bar/widget_loading/pub%20points)](https://pub.dev/packages/widget_loading/score)
<a href="https://github.com/SplashByte/widget_loading/blob/main/LICENSE"><img src="https://img.shields.io/github/license/SplashByte/widget_loading.svg" alt="license"></a>

[![buy me a coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/splashbyte)

### If you like this package, please leave a like there on [pub.dev](https://pub.dev/packages/widget_loading) and star on [GitHub](https://github.com/SplashByte/widget_loading).

Simple widgets for loading widget contents.
It's an easy way to hide a widget when you have nothing to show and need a loading animation at the same time.

![example1](https://user-images.githubusercontent.com/43761463/109703122-66cd3480-7b95-11eb-9862-dfb45ed96b49.gif)
![example2](https://user-images.githubusercontent.com/43761463/109703129-69c82500-7b95-11eb-8496-2b933772c8c9.gif)
[![example1](https://user-images.githubusercontent.com/43761463/109703122-66cd3480-7b95-11eb-9862-dfb45ed96b49.gif)](https://splashbyte.dev/flutter_examples/widget_loading/index.html)
[![example2](https://user-images.githubusercontent.com/43761463/109703129-69c82500-7b95-11eb-8496-2b933772c8c9.gif)](https://splashbyte.dev/flutter_examples/widget_loading/index.html)

## Easy Usage

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="?android:colorBackground" />

<!-- You can insert your own image assets here -->
<!-- <item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" />
</item> -->
</layer-list>
18 changes: 18 additions & 0 deletions example/android/app/src/main/res/values-night/styles.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<!-- Show a splash screen on the activity. Automatically removed when
Flutter draws its first frame -->
<item name="android:windowBackground">@drawable/launch_background</item>
</style>
<!-- Theme applied to the Android Window as soon as the process has started.
This theme determines the color of the Android Window while your
Flutter UI initializes, as well as behind your Flutter UI while its
running.
This Theme is only used starting with V2 of Flutter's Android embedding. -->
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">?android:colorBackground</item>
</style>
</resources>
119 changes: 64 additions & 55 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -71,56 +71,64 @@ class _ExampleState extends State<Example> {
title: Text('Example'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Card(
elevation: 5.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: WiperLoading.future(
minWidth: double.infinity,
future: future,
child: ConstrainedBox(
// Constraints for a nicer look in web demo
constraints: BoxConstraints.loose(Size.fromWidth(750.0)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Card(
elevation: 5.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: WiperLoading.future(
minWidth: double.infinity,
future: future,
),
),
),
),
counterCard(Curves.easeInOutCirc),
counterCard(Curves.easeInOutCirc,
builder: (width, height) => Container(
width: width,
height: height,
decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(5.0))),
wiperWidth: 50),
counterCard(
Curves.linear,
builder: (width, height) => Container(
width: width,
height: height,
decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(5.0))),
wiperWidth: 10,
deformingFactor: 0.2,
direction: WiperDirection.up,
),
counterCard(Curves.easeInOutCirc, padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 30.0)),
counterCard(Curves.easeOutSine,
builder: (width, height) => Container(
width: width,
height: height,
decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
),
wiperWidth: 20),
counterCard(Curves.easeOutSine,
builder: (width, height) => Container(
width: width,
height: height,
decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(5.0))),
wiperWidth: 20,
direction: WiperDirection.left),
counterCardCircle(Curves.linear),
],
counterCard(Curves.easeInOutCirc),
counterCard(Curves.easeInOutCirc,
builder: (width, height) =>
Container(width: width, height: height, decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(5.0))),
wiperWidth: 50),
counterCard(
Curves.linear,
builder: (width, height) =>
Container(width: width, height: height, decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(5.0))),
wiperWidth: 10,
deformingFactor: 0.2,
direction: WiperDirection.up,
),
counterCard(Curves.easeInOutCirc, padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 30.0)),
counterCard(Curves.easeOutSine,
builder: (width, height) => Container(
width: width,
height: height,
decoration: BoxDecoration(color: Colors.red, shape: BoxShape.circle),
),
wiperWidth: 20),
counterCard(Curves.easeOutSine,
builder: (width, height) =>
Container(width: width, height: height, decoration: BoxDecoration(color: Colors.purple, borderRadius: BorderRadius.circular(5.0))),
wiperWidth: 20,
direction: WiperDirection.left),
counterCardCircle(Curves.linear),
/*Padding( //web only
padding: const EdgeInsets.all(8.0),
child: MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () => window.open('https://flutter.dev', 'new tab'),
child: Text('Made with Flutter'),
),
),
),*/
],
),
),
),
),
Expand Down Expand Up @@ -219,13 +227,14 @@ class _LoadingScaffoldState extends State<LoadingScaffold> {
@override
Widget build(BuildContext context) {
return Material(
child: CircularWidgetLoading(
padding: EdgeInsets.zero,
child: Scaffold(
appBar: AppBar(title: Text('Example')),
body: Center(child: Text('Loaded!')),
child: CircularWidgetLoading(
padding: EdgeInsets.zero,
child: Scaffold(
appBar: AppBar(title: Text('Example')),
body: Center(child: Text('Loaded!')),
),
loading: loading,
),
loading: loading,
));
);
}
}
2 changes: 1 addition & 1 deletion example/pubspec.lock
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ packages:
path: ".."
relative: true
source: path
version: "0.2.0-nullsafety.0"
version: "0.2.1"
sdks:
dart: ">=2.12.0 <3.0.0"
flutter: ">=1.17.0"
Binary file added example/web/favicon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/web/icons/Icon-192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/web/icons/Icon-512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
45 changes: 45 additions & 0 deletions example/web/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<!--
If you are serving your web app in a path other than the root, change the
href value below to reflect the base path you are serving from.
The path provided below has to start and end with a slash "/" in order for
it to work correctly.
Fore more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
-->
<base href="/">

<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">

<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="example">
<link rel="apple-touch-icon" href="icons/Icon-192.png">

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>

<title>example</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
23 changes: 23 additions & 0 deletions example/web/manifest.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "example",
"short_name": "example",
"start_url": ".",
"display": "standalone",
"background_color": "#0175C2",
"theme_color": "#0175C2",
"description": "A new Flutter project.",
"orientation": "portrait-primary",
"prefer_related_applications": false,
"icons": [
{
"src": "icons/Icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/Icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
39 changes: 15 additions & 24 deletions lib/src/widgets/circular_widget_loading.dart
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,9 @@ class CircularWidgetLoading extends StatefulWidget {
this.loadingCurve = Curves.easeInOutCirc,
this.padding = const EdgeInsets.all(10.0),
this.dotBuilder,
this.rollingDuration = 0.8,
this.rollingDuration = 1.0,
this.dotCount = 5,
this.rollingFactor = 0.7,
this.rollingFactor = 0.875,
this.animatedSize = true,
this.minDotRadiusFactor = 0.5,
this.loadingCirclePadding = 8.0,
Expand All @@ -91,8 +91,7 @@ class CircularWidgetLoading extends StatefulWidget {
_CircularWidgetLoadingState createState() => _CircularWidgetLoadingState();
}

class _CircularWidgetLoadingState extends State<CircularWidgetLoading>
with TickerProviderStateMixin, LoadingWidgetState {
class _CircularWidgetLoadingState extends State<CircularWidgetLoading> with TickerProviderStateMixin, LoadingWidgetState {
late AnimationController _controller;
late AnimationController _appearingController;
late Animation<double> _appearingAnimation;
Expand Down Expand Up @@ -171,8 +170,7 @@ class _CircularWidgetLoadingState extends State<CircularWidgetLoading>
double dif = widget.dotCount <= 1 ? 0 : widget.rollingDuration * (1 - widget.rollingFactor) / (widget.dotCount - 1);
double singleRollingDuration = widget.rollingDuration * widget.rollingFactor;
for (int i = 0; i < widget.dotCount; i++) {
_animations.add(CurvedAnimation(
parent: _controller, curve: Interval(i * dif, singleRollingDuration + i * dif, curve: widget.loadingCurve)));
_animations.add(CurvedAnimation(parent: _controller, curve: Interval(i * dif, singleRollingDuration + i * dif, curve: widget.loadingCurve)));
}

_controller.forward();
Expand All @@ -190,10 +188,11 @@ class _CircularWidgetLoadingState extends State<CircularWidgetLoading>
//Container(width: widget.minWidth, height: widget.minHeight,),
Padding(
padding: widget.padding,
child: widget.animatedSize
? AnimatedSize(
key: key, duration: widget.sizeDuration, vsync: this, curve: widget.sizeCurve, child: _child)
: Container(key: key, child: _child),
child: IgnorePointer(
ignoring: !loaded,
child: widget.animatedSize
? AnimatedSize(key: key, duration: widget.sizeDuration, vsync: this, curve: widget.sizeCurve, child: _child)
: Container(key: key, child: _child)),
),
],
);
Expand Down Expand Up @@ -225,32 +224,26 @@ class _CircularWidgetLoadingState extends State<CircularWidgetLoading>
loadedChild
else if (appearing || disappearing)
ClipOval(
clipper: _DotClipper(
_appearingAnimation.value, widget.dotRadius, widget.maxLoadingCircleSize, widget.loadingCirclePadding),
clipper: _DotClipper(_appearingAnimation.value, widget.dotRadius, widget.maxLoadingCircleSize, widget.loadingCirclePadding),
child: Stack(children: [
Container(
foregroundDecoration:
BoxDecoration(color: dotColor.withOpacity(dotColor.opacity * (1 - _appearingAnimation.value))),
child: loadedChild)
foregroundDecoration: BoxDecoration(color: dotColor.withOpacity(dotColor.opacity * (1 - _appearingAnimation.value))), child: loadedChild)
]),
)
else
Positioned.fill(
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
double radius = min(widget.maxLoadingCircleSize,
min(constraints.maxWidth, constraints.maxHeight) - 2 * widget.loadingCirclePadding) /
2 -
widget.dotRadius;
double radius =
min(widget.maxLoadingCircleSize, min(constraints.maxWidth, constraints.maxHeight) - 2 * widget.loadingCirclePadding) / 2 - widget.dotRadius;
double x = constraints.maxWidth / 2;
double y = constraints.maxHeight / 2;

return Stack(
children: List.generate(_animations.length, (index) => index).map((i) {
Animation animation = _animations[i];
double radian = 0.5 * pi - 2 * pi * animation.value;
double dotRadius = widget.dotRadius *
(widget.minDotRadiusFactor + (1 - widget.minDotRadiusFactor) * (1 - i / _animations.length));
double dotRadius = widget.dotRadius * (widget.minDotRadiusFactor + (1 - widget.minDotRadiusFactor) * (1 - i / _animations.length));
return Positioned(
child: widget.dotBuilder?.call(widget.dotRadius) ?? loadingPoint(dotRadius),
top: y - radius * sin(radian) - dotRadius,
Expand All @@ -269,9 +262,7 @@ class _CircularWidgetLoadingState extends State<CircularWidgetLoading>
return Container(
width: radius * 2,
height: radius * 2,
decoration: BoxDecoration(
color: widget.dotColor ?? Theme.of(context).accentColor,
borderRadius: BorderRadius.all(Radius.circular(radius))),
decoration: BoxDecoration(color: widget.dotColor ?? Theme.of(context).accentColor, borderRadius: BorderRadius.all(Radius.circular(radius))),
);
}
}
Expand Down
Loading

0 comments on commit 15532b1

Please sign in to comment.