Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
duwen committed Sep 27, 2018
1 parent 3c4d4fe commit eafcbb1
Show file tree
Hide file tree
Showing 7 changed files with 331 additions and 117 deletions.
Binary file added assets/fonts/iconfont.ttf
View file
Binary file not shown.
1 change: 1 addition & 0 deletions lib/main.dart
View file
Expand Up @@ -33,6 +33,7 @@ class _MyHomePageState extends State<MyHomePage> {
body: ListPage([
//PageInfo("test", (ctx) => TestRoute()),
PageInfo("Quick Scrollbar", (ctx) => QuickScrollbarRoute()),
PageInfo("AnimatedRotationBox", (ctx) => AnimatedRotationBoxRoute()),
PageInfo("Pull Refresh", (ctx) => PullRefreshRoute()),
PageInfo("Swiper", (ctx) => SwiperRoute()),
PageInfo("Swiper Style", (ctx) => SwiperStyleRoute()),
Expand Down
118 changes: 118 additions & 0 deletions lib/routes/animated_rotation_box.dart
View file
@@ -0,0 +1,118 @@
import 'package:flutter/material.dart';
import 'package:flukit/flukit.dart';


class AnimatedRotationBoxRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Theme(
data: Theme.of(context).copyWith(
iconTheme: IconThemeData(
color: Theme
.of(context)
.accentColor,
size: 30.0
),
),
child: Wrap(
spacing: 16.0,
children: <Widget>[
AnimatedRotationBox(
child: GradientCircularProgressIndicator(
radius: 15.0,
colors: [Colors.red[300], Colors.orange, Colors.grey[50]],
value: .8,
backgroundColor: Colors.transparent,
),
),
AnimatedRotationBox(
child: GradientCircularProgressIndicator(
radius: 15.0,
colors: [Colors.red, Colors.red],
value: .7,
backgroundColor: Colors.transparent,
),
),
AnimatedRotationBox(
duration: Duration(milliseconds: 800),
child: GradientCircularProgressIndicator(
radius: 15.0,
colors: [Colors.blue, Colors.lightBlue[50]],
value: .8,
backgroundColor: Colors.transparent,
strokeCapRound: true,
),
),
// Icon
AnimatedRotationBox(
duration: Duration(milliseconds: 800),
child: Icon(Icons.loop),
),
AnimatedRotationBox(
duration: Duration(milliseconds: 800),
child: Icon(MyIcons.loading0),
),
AnimatedRotationBox(
duration: Duration(milliseconds: 800),
child: Icon(MyIcons.loading1),
),
AnimatedRotationBox(
duration: Duration(milliseconds: 800),
child: Icon(MyIcons.loading2),
),
AnimatedRotationBox(
duration: Duration(milliseconds: 1200),
child: Icon(MyIcons.loading3,),
),
AnimatedRotationBox(
child: GradientCircularProgressIndicator(
colors: [
Colors.red,
Colors.amber,
Colors.cyan,
Colors.green[200],
Colors.blue,
Colors.red
],
radius: 60.0,
stokeWidth: 5.0,
strokeCapRound: true,
backgroundColor: Colors.transparent,
value: 1.0,
),
),

],
),
),
);
}
}

class MyIcons {

static const IconData loading0 = const IconData(
0xe65e,
fontFamily: 'myIcon',
matchTextDirection: true
);

static const IconData loading1 = const IconData(
0xe61c,
fontFamily: 'myIcon',
matchTextDirection: true
);

static const IconData loading2 = const IconData(
0xe61f,
fontFamily: 'myIcon',
matchTextDirection: true
);
static const IconData loading3 = const IconData(
0xe68f,
fontFamily: 'myIcon',
matchTextDirection: true
);
}
253 changes: 157 additions & 96 deletions lib/routes/gradient_circular_progress.dart
View file
Expand Up @@ -2,113 +2,174 @@ import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flukit/flukit.dart';

class GradientCircularProgressRoute extends StatelessWidget {
class GradientCircularProgressRoute extends StatefulWidget {
@override
GradientCircularProgressRouteState createState() {
return new GradientCircularProgressRouteState();
}
}

class GradientCircularProgressRouteState
extends State<GradientCircularProgressRoute>
with TickerProviderStateMixin {
AnimationController _animationController;

@override
void initState() {
_animationController =
new AnimationController(vsync: this, duration: Duration(seconds: 5));
bool isForward = true;
_animationController.addStatusListener((status) {
if (status == AnimationStatus.forward) {
isForward = true;
} else if (status == AnimationStatus.completed ||
status == AnimationStatus.dismissed) {
if (isForward) {
_animationController.reverse();
} else {
_animationController.forward();
}
} else if (status == AnimationStatus.reverse) {
isForward = false;
}
});
_animationController.forward();
}


@override
void dispose() {
_animationController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
AnimatedRotationBox(
child: GradientCircularProgressIndicator(
radius: 15.0,
colors: [Colors.red[300],Colors.orange,Colors.grey[50]],
value: .8,
backgroundColor: Colors.transparent,
),
),
AnimatedRotationBox(
child: GradientCircularProgressIndicator(
radius: 15.0,
colors: [Colors.red,Colors.red],
value: .8,
backgroundColor: Colors.transparent,
),
),
AnimatedRotationBox(
duration: Duration(milliseconds: 800),
child: GradientCircularProgressIndicator(
radius: 15.0,
colors: [Colors.blue[400],Colors.lightBlue[200],Colors.grey[50]],
value: .9,
backgroundColor: Colors.transparent,
strokeCapRound: true,
child: Center(
child: Column(
children: <Widget>[
AnimatedBuilder(
animation: _animationController,
builder: (BuildContext context, Widget child) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Wrap(
spacing: 10.0,
runSpacing: 16.0,
children: <Widget>[
GradientCircularProgressIndicator(
colors: [Colors.red, Colors.orange],
radius: 50.0,
stokeWidth: 3.0,
value: _animationController.value,
),
GradientCircularProgressIndicator(
colors: [Colors.red, Colors.orange,Colors.red],
radius: 50.0,
stokeWidth: 5.0,
value: _animationController.value,
),
GradientCircularProgressIndicator(
colors: [Colors.teal, Colors.cyan],
radius: 50.0,
stokeWidth: 5.0,
strokeCapRound: true,
value: CurvedAnimation(parent: _animationController, curve: Curves.decelerate).value,
),
TurnBox(
turns:1/8,
child: GradientCircularProgressIndicator(
colors: [Colors.red, Colors.orange, Colors.red],
radius: 50.0,
stokeWidth: 5.0,
strokeCapRound: true,
backgroundColor: Colors.red[50],
totalAngle: 1.5*pi,
value: CurvedAnimation(parent: _animationController, curve: Curves.ease).value
),
),
RotatedBox(
quarterTurns: 1,
child: GradientCircularProgressIndicator(
colors: [Colors.blue[700], Colors.blue[200]],
radius: 50.0,
stokeWidth: 3.0,
strokeCapRound: true,
backgroundColor: Colors.transparent,
value: _animationController.value
),
),
GradientCircularProgressIndicator(
colors: [
Colors.red,
Colors.amber,
Colors.cyan,
Colors.green[200],
Colors.blue,
Colors.red
],
radius: 50.0,
stokeWidth: 5.0,
strokeCapRound: true,
value: _animationController.value,
)
],
),
),
],
),
),
AnimatedRotationBox(
child: GradientCircularProgressIndicator(
colors: [Colors.red,Colors.amber,Colors.cyan,Colors.green[200],Colors.blue,Colors.red ],
radius: 60.0,
stokeWidth: 5.0,
strokeCapRound: true,
backgroundColor: Colors.transparent,
//value: .8,
);
},
),
),
GradientCircularProgressIndicator(
colors: [Colors.red,Colors.amber,Colors.cyan,Colors.green[200],Colors.blue,Colors.red ],
radius: 60.0,
stokeWidth: 5.0,
strokeCapRound: true,
backgroundColor: Colors.transparent,
value: .8,
),

GradientCircularProgressIndicator(
colors: [Colors.blue[700],Colors.blue[200]],
radius: 100.0,
stokeWidth: 20.0,
value: .3,
),
GradientCircularProgressIndicator(
colors: [Colors.blue[700], Colors.blue[200]],
radius: 100.0,
stokeWidth: 20.0,
value: .3,
),

GradientCircularProgressIndicator(
colors: [Colors.blue[700],Colors.blue[200]],
radius: 100.0,
stokeWidth: 20.0,
value: .6,
strokeCapRound: true,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 18.0),
child: SizedBox(
height: 104.0,
width: 200.0,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
height: 200.0,
top: .0,
child: TurnBox(
turns: .75,
child: GradientCircularProgressIndicator(
colors: [Colors.teal[700],Colors.cyan[500]],
radius: 100.0,
stokeWidth: 5.0,
value: .5,
totalAngle: pi,
strokeCapRound: true,
GradientCircularProgressIndicator(
colors: [Colors.blue[700], Colors.blue[300]],
radius: 100.0,
stokeWidth: 20.0,
value: .6,
strokeCapRound: true,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 18.0),
child: SizedBox(
height: 104.0,
width: 200.0,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned(
height: 200.0,
top: .0,
child: TurnBox(
turns: .75,
child: GradientCircularProgressIndicator(
colors: [Colors.teal, Colors.cyan[500]],
radius: 100.0,
stokeWidth: 8.0,
value: .5,
totalAngle: pi,
strokeCapRound: true,
),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text("50%",
style: TextStyle(fontSize: 25.0, color: Colors.blueGrey),
),
)
],
Padding(
padding: const EdgeInsets.only(top: 10.0),
child: Text("50%",
style: TextStyle(
fontSize: 25.0, color: Colors.blueGrey),
),
)
],
),
),
),
),
],
],
),
),
);
}
Expand Down

0 comments on commit eafcbb1

Please sign in to comment.