Skip to content

Commit 373dfb3

Browse files
diegoveloperdiegoveloper
committed
hide my widgets
1 parent 54b0f93 commit 373dfb3

File tree

5 files changed

+258
-1
lines changed

5 files changed

+258
-1
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,4 +37,8 @@ You can follow me on twitter [@diegoveloper](https://www.twitter.com/diegovelope
3737

3838
| Menu Navigations / Header Navigation | Animations / Turn on the light|
3939
|--|--|
40-
| <center> <img src="https://media.giphy.com/media/f5SP7mJnO4x9mK4CSv/giphy.gif" width="250"> </center> | <center> <img src="https://media.giphy.com/media/VgSfLeabru2qTerOrp/giphy.gif" width="250"> </center>|
40+
| <center> <img src="https://media.giphy.com/media/f5SP7mJnO4x9mK4CSv/giphy.gif" width="250"> </center> | <center> <img src="https://media.giphy.com/media/VgSfLeabru2qTerOrp/giphy.gif" width="250"> </center>|
41+
42+
| Animations / Hide my widgets | |
43+
|--|--|
44+
| <center> <img src="https://media.giphy.com/media/h4x6fHw65l3KdnDrTi/giphy.gif" width="250"> </center> | <center> </center>|

‎images/dash_dart_dark.png‎

124 KB
Loading

‎lib/animations/hide_my_widgets/hide_my_widget.dart‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import 'dart:math';
2+
import 'dart:typed_data';
3+
import 'package:vector_math/vector_math.dart' as vector;
4+
import 'package:flutter/material.dart';
5+
import 'package:flutter/physics.dart';
6+
import 'package:flutter/rendering.dart';
7+
import 'dart:ui' as ui;
8+
9+
class HideMyWidget extends StatefulWidget {
10+
final Widget child;
11+
12+
const HideMyWidget({Key key, this.child}) : super(key: key);
13+
14+
@override
15+
_HideMyWidgetState createState() => _HideMyWidgetState();
16+
}
17+
18+
class _HideMyWidgetState extends State<HideMyWidget>
19+
with SingleTickerProviderStateMixin {
20+
bool _hide = false;
21+
final _key = GlobalKey();
22+
AnimationController _animationController;
23+
OverlayEntry _entry;
24+
25+
void _onTap() async {
26+
RenderRepaintBoundary boundary = _key.currentContext.findRenderObject();
27+
ui.Image image = await boundary.toImage();
28+
ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
29+
var pngBytes = byteData.buffer.asUint8List();
30+
31+
final renderBox = _key.currentContext.findRenderObject() as RenderBox;
32+
final position = renderBox.localToGlobal(Offset.zero);
33+
34+
_entry?.remove();
35+
36+
final fullHeight = MediaQuery.of(context).size.height;
37+
final distance = fullHeight - position.dy;
38+
final min = 10, max = 40;
39+
final random = min + Random().nextInt(max - min);
40+
_entry = new OverlayEntry(
41+
builder: (context) {
42+
return Positioned(
43+
top: position.dy + (_animationController.value * distance),
44+
left: position.dx,
45+
width: renderBox.size.width,
46+
height: renderBox.size.height,
47+
child: Transform(
48+
transform: Matrix4.identity()
49+
..rotateZ(vector.radians(random * _animationController.value)),
50+
child: Image.memory(pngBytes),
51+
),
52+
);
53+
},
54+
);
55+
56+
Overlay.of(context).insert(_entry);
57+
await Future.delayed(const Duration(milliseconds: 20));
58+
setState(() {
59+
_hide = true;
60+
});
61+
62+
final simulation = GravitySimulation(
63+
position.dy / 10, // acceleration
64+
0, // starting point
65+
1, // end point
66+
0, // starting velocity
67+
);
68+
_animationController.animateWith(simulation);
69+
}
70+
71+
@override
72+
void didUpdateWidget(HideMyWidget oldWidget) {
73+
setState(() {
74+
_hide = false;
75+
});
76+
super.didUpdateWidget(oldWidget);
77+
}
78+
79+
void _animationListener() {
80+
if (_animationController.status == AnimationStatus.completed) {
81+
_entry.remove();
82+
_entry = null;
83+
} else {
84+
_entry.markNeedsBuild();
85+
}
86+
}
87+
88+
@override
89+
void initState() {
90+
_animationController = AnimationController(
91+
vsync: this,
92+
);
93+
_animationController.addListener(_animationListener);
94+
super.initState();
95+
}
96+
97+
@override
98+
void dispose() {
99+
_animationController.removeListener(_animationListener);
100+
_animationController.dispose();
101+
super.dispose();
102+
}
103+
104+
@override
105+
Widget build(BuildContext context) {
106+
return GestureDetector(
107+
onTap: _hide ? null : _onTap,
108+
child: Visibility(
109+
visible: !_hide,
110+
child: RepaintBoundary(
111+
key: _key,
112+
child: Container(
113+
child: AbsorbPointer(
114+
child: widget.child,
115+
),
116+
),
117+
),
118+
),
119+
);
120+
}
121+
}

‎lib/animations/hide_my_widgets/main_hide_my_widgets.dart‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:flutter_samples/animations/hide_my_widgets/hide_my_widget.dart';
3+
4+
class MainHideMyWidgets extends StatefulWidget {
5+
@override
6+
_MainHideMyWidgetsState createState() => _MainHideMyWidgetsState();
7+
}
8+
9+
class _MainHideMyWidgetsState extends State<MainHideMyWidgets> {
10+
@override
11+
Widget build(BuildContext context) {
12+
return Scaffold(
13+
appBar: AppBar(
14+
elevation: 0,
15+
title: Text("Don't touch my widgets!"),
16+
backgroundColor: Colors.red,
17+
actions: [
18+
IconButton(
19+
icon: Icon(Icons.refresh),
20+
onPressed: () {
21+
setState(() {});
22+
},
23+
)
24+
],
25+
),
26+
body: Stack(
27+
fit: StackFit.expand,
28+
children: [
29+
Container(
30+
color: Colors.black,
31+
child: Image.asset(
32+
"images/dash_dart_dark.png",
33+
fit: BoxFit.contain,
34+
),
35+
),
36+
HideMyWidget(
37+
child: DecoratedBox(
38+
decoration: BoxDecoration(
39+
gradient: LinearGradient(
40+
begin: Alignment.topLeft,
41+
end: Alignment.bottomRight,
42+
stops: [
43+
0,
44+
0.5,
45+
1,
46+
],
47+
colors: [
48+
Color.fromARGB(255, 178, 19, 19),
49+
Color.fromARGB(255, 181, 49, 49),
50+
Color.fromARGB(255, 89, 10, 10),
51+
],
52+
),
53+
),
54+
),
55+
),
56+
_myBody(),
57+
],
58+
));
59+
}
60+
61+
Widget _myBody() {
62+
return Column(
63+
children: <Widget>[
64+
Spacer(),
65+
Expanded(
66+
flex: 4,
67+
child: FractionallySizedBox(
68+
widthFactor: .6,
69+
child: HideMyWidget(
70+
child: FlutterLogo(),
71+
),
72+
),
73+
),
74+
Expanded(
75+
flex: 1,
76+
child: Container(
77+
child: HideMyWidget(
78+
child: Text(
79+
"Welcome \nThe Dart Side",
80+
textAlign: TextAlign.center,
81+
style: TextStyle(fontSize: 24, color: Colors.white),
82+
),
83+
),
84+
),
85+
),
86+
const SizedBox(
87+
height: 30,
88+
),
89+
Expanded(
90+
child: Padding(
91+
padding: const EdgeInsets.symmetric(horizontal: 20),
92+
child: HideMyWidget(
93+
child: TextField(
94+
decoration: InputDecoration(
95+
hintText: "Username",
96+
fillColor: Colors.white,
97+
filled: true,
98+
),
99+
),
100+
),
101+
),
102+
),
103+
Expanded(
104+
flex: 3,
105+
child: Center(
106+
child: HideMyWidget(
107+
child: Container(
108+
padding:
109+
const EdgeInsets.symmetric(vertical: 20, horizontal: 50),
110+
decoration: BoxDecoration(
111+
color: Colors.white70,
112+
borderRadius: BorderRadius.all(Radius.circular(20)),
113+
),
114+
child: Text(
115+
'Login',
116+
style: TextStyle(color: Colors.black),
117+
),
118+
),
119+
),
120+
),
121+
),
122+
],
123+
);
124+
}
125+
}

‎lib/animations/main_animations.dart‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import 'package:flutter_samples/animations/turn_on_the_light/turn_on_the_light.d
88
import 'package:flutter_samples/main.dart';
99

1010
import 'custom_sliverheader/custom_sliver_header.dart';
11+
import 'hide_my_widgets/main_hide_my_widgets.dart';
1112

1213
class MainAnimations extends StatefulWidget {
1314
@override
@@ -74,6 +75,12 @@ class MainAnimationsState extends State<MainAnimations> {
7475
onButtonTap(TurnOnTheLight());
7576
},
7677
),
78+
MyMenuButton(
79+
title: "Hide my widgets",
80+
actionTap: () {
81+
onButtonTap(MainHideMyWidgets());
82+
},
83+
),
7784
],
7885
),
7986
),

0 commit comments

Comments
 (0)