Skip to content

Commit 0bc9da2

Browse files
sidheshwar-ssidheshwar-s
committed
feat: Added animated positioned implementation
1 parent 31d5b11 commit 0bc9da2

File tree

4 files changed

+153
-47
lines changed

4 files changed

+153
-47
lines changed

‎android/app/build.gradle

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ android {
3535
defaultConfig {
3636
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
3737
applicationId "com.example.fludget"
38-
minSdkVersion 19
38+
minSdkVersion 21
3939
targetSdkVersion 30
4040
versionCode flutterVersionCode.toInteger()
4141
versionName flutterVersionName

‎lib/routes/animated_positioned.dart

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
import 'package:fludget/Models/codeString.dart';
2+
import 'package:flutter/material.dart';
3+
4+
class AnimatedPositionedImp extends StatefulWidget {
5+
const AnimatedPositionedImp({Key? key}) : super(key: key);
6+
7+
@override
8+
_AnimatedPositionedImpState createState() => _AnimatedPositionedImpState();
9+
}
10+
11+
class _AnimatedPositionedImpState extends State<AnimatedPositionedImp> {
12+
var box1left = null;
13+
var box2right = null;
14+
var box1top = 30.0;
15+
var box2top = 50.0;
16+
@override
17+
Widget build(BuildContext context) {
18+
return Scaffold(
19+
body: Stack(
20+
alignment: Alignment.center,
21+
children: [
22+
AnimatedPositioned(
23+
curve: Curves.fastOutSlowIn,
24+
duration: const Duration(seconds: 1),
25+
left: box1left,
26+
top: box1top,
27+
child: Container(
28+
height: 100,
29+
width: 80,
30+
decoration: BoxDecoration(
31+
color: Theme.of(context).primaryColor,
32+
borderRadius: BorderRadius.circular(20),
33+
),
34+
),
35+
),
36+
AnimatedPositioned(
37+
curve: Curves.fastOutSlowIn,
38+
duration: const Duration(seconds: 1),
39+
right: box2right,
40+
top: box2top,
41+
child: Container(
42+
height: 100,
43+
width: 80,
44+
decoration: BoxDecoration(
45+
color: Theme.of(context).colorScheme.secondary,
46+
borderRadius: BorderRadius.circular(20),
47+
),
48+
),
49+
),
50+
Positioned(
51+
top: 200,
52+
child: ElevatedButton(
53+
onPressed: () async {
54+
setState(() {
55+
box1top = 200.0;
56+
box1left = 20.0;
57+
});
58+
await Future.delayed(const Duration(seconds: 1));
59+
setState(() {
60+
box2top = 200.0;
61+
box2right = 20.0;
62+
});
63+
},
64+
child: Text("Start Animation"),
65+
),
66+
),
67+
],
68+
),
69+
);
70+
}
71+
}
72+
73+
class AnimatedPositionedDesc extends StatelessWidget {
74+
const AnimatedPositionedDesc({Key? key}) : super(key: key);
75+
76+
@override
77+
Widget build(BuildContext context) {
78+
return Scaffold(
79+
body: Padding(
80+
padding: const EdgeInsets.all(20),
81+
child: Column(
82+
crossAxisAlignment: CrossAxisAlignment.start,
83+
children: [
84+
Text(
85+
"Animated version of Positioned which automatically transitions the child's position over a given duration whenever the given position changes.",
86+
),
87+
const SizedBox(
88+
height: 20,
89+
),
90+
Text(
91+
"""
92+
Only works if it's the child of a Stack.
93+
94+
This widget is a good choice if the size of the child would end up changing as a result of this animation. If the size is intended to remain the same, with only the position changing over time, then consider SlideTransition instead. SlideTransition only triggers a repaint each frame of the animation, whereas AnimatedPositioned will trigger a relayout as well.""",
95+
),
96+
],
97+
),
98+
),
99+
);
100+
}
101+
}
102+
103+
class AnimatedPositionedCode extends CodeString {
104+
const AnimatedPositionedCode();
105+
@override
106+
String buildCodeString() {
107+
return """
108+
AnimatedPositioned(
109+
curve: Curves.fastOutSlowIn,
110+
duration: const Duration(seconds: 1),
111+
left: box1left,
112+
top: box1top,
113+
child: Container(
114+
height: 100,
115+
width: 80,
116+
decoration: BoxDecoration(
117+
color: Theme.of(context).primaryColor,
118+
borderRadius: BorderRadius.circular(20),
119+
),
120+
),
121+
),
122+
""";
123+
}
124+
}

‎lib/routes/simple_dialog.dart

+1-31
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ class SimpleDialogImp extends StatelessWidget {
5151
);
5252
}
5353
}
54+
5455
class SimpleDialogCode extends CodeString {
5556
const SimpleDialogCode();
5657
@override
@@ -79,7 +80,6 @@ class SimpleDialogCode extends CodeString {
7980
}
8081
}
8182

82-
8383
class SimpleDialogDesc extends StatelessWidget {
8484
const SimpleDialogDesc({Key? key}) : super(key: key);
8585

@@ -106,33 +106,3 @@ class SimpleDialogDesc extends StatelessWidget {
106106
);
107107
}
108108
}
109-
110-
class SimpleDialogCode extends CodeString {
111-
const SimpleDialogCode();
112-
@override
113-
String buildCodeString() {
114-
return """
115-
showDialog(
116-
context: context,
117-
builder: (BuildContext ctx) => SimpleDialog(
118-
title: Text('Option List'),
119-
children: [
120-
SimpleDialogOption(
121-
onPressed: () {
122-
Navigator.pop(context, "Dart");
123-
},
124-
child: const Text('Dart'),
125-
),
126-
SimpleDialogOption(
127-
onPressed: () {
128-
Navigator.pop(context, "Flutter");
129-
},
130-
child: const Text('Flutter'),
131-
),
132-
],
133-
elevation: 10,
134-
),
135-
);
136-
""";
137-
}
138-
}

‎lib/widgetList.dart

+27-15
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import 'package:fludget/routes/DatePickerDialog.dart';
1111
import 'package:fludget/routes/FormField.dart';
1212
import 'package:fludget/routes/FutureBuilder.dart';
1313
import 'package:fludget/routes/animated_padding.dart';
14+
import 'package:fludget/routes/animated_positioned.dart';
1415
import 'package:fludget/routes/focus_node.dart';
1516
import 'package:fludget/routes/fractionally_sized_box.dart';
1617
import 'package:fludget/routes/gridPaper.dart';
@@ -110,6 +111,7 @@ import 'routes/autoComplete.dart';
110111
import 'routes/BottomNavigationBar.dart';
111112
import 'routes/fitted_box.dart';
112113
import 'routes/BackdropFilter.dart';
114+
113115
const List<WidgetModel> widgets = [
114116
WidgetModel(
115117
name: "Container",
@@ -181,11 +183,12 @@ const List<WidgetModel> widgets = [
181183
WidgetCategoy.Interaction,
182184
],
183185
codeString: IgnorePointerCode()),
184-
WidgetModel(
186+
WidgetModel(
185187
name: "SelectableText",
186188
implementation: SelectableTextImplementation(),
187189
description: SelectableTextDescription(),
188-
link: "https://api.flutter.dev/flutter/material/SelectableText-class.html",
190+
link:
191+
"https://api.flutter.dev/flutter/material/SelectableText-class.html",
189192
category: [
190193
WidgetCategoy.Interaction,
191194
],
@@ -781,7 +784,8 @@ const List<WidgetModel> widgets = [
781784
WidgetCategoy.Styling,
782785
],
783786
codeString: PlaceHolderCode(),
784-
),WidgetModel(
787+
),
788+
WidgetModel(
785789
name: "Drawer Widget",
786790
link: "https://api.flutter.dev/flutter/material/Drawer-class.html",
787791
subtitle: "Implementation of Drawer widget",
@@ -960,14 +964,13 @@ const List<WidgetModel> widgets = [
960964
codeString: CupertinoSwitchCode(),
961965
),
962966
WidgetModel(
963-
name: "SizedOverflowBox",
964-
link:
965-
"https://api.flutter.dev/flutter/widgets/SizedOverflowBox-class.html",
966-
subtitle: "Implementation of SizedOverflowBox Widget",
967-
implementation: SizedOverflowBoxImplementation(),
968-
description: SizedOverflowBoxDescription(),
969-
category: [WidgetCategoy.Layout],
970-
codeString: SizedOverflowBoxCode()),
967+
name: "SizedOverflowBox",
968+
link: "https://api.flutter.dev/flutter/widgets/SizedOverflowBox-class.html",
969+
subtitle: "Implementation of SizedOverflowBox Widget",
970+
implementation: SizedOverflowBoxImplementation(),
971+
description: SizedOverflowBoxDescription(),
972+
category: [WidgetCategoy.Layout],
973+
codeString: SizedOverflowBoxCode(),
971974
),
972975
WidgetModel(
973976
name: "Focus Node",
@@ -978,7 +981,7 @@ const List<WidgetModel> widgets = [
978981
category: [WidgetCategoy.Accessibility],
979982
codeString: FocusNodeCode(),
980983
),
981-
WidgetModel(
984+
WidgetModel(
982985
name: "Fitted Box Widget",
983986
link: "https://api.flutter.dev/flutter/widgets/FittedBox/FittedBox.html",
984987
subtitle: "Implementation of Fitted Box widget",
@@ -1007,11 +1010,10 @@ const List<WidgetModel> widgets = [
10071010
description: AnimatedPaddingDesc(),
10081011
category: [WidgetCategoy.Animation],
10091012
codeString: AnimatedPaddingCode(),
1010-
),
1013+
),
10111014
WidgetModel(
10121015
name: "Padding",
1013-
link:
1014-
"https://api.flutter.dev/flutter/widgets/Padding-class.html",
1016+
link: "https://api.flutter.dev/flutter/widgets/Padding-class.html",
10151017
subtitle: "Implementation of Padding widget",
10161018
implementation: PaddingImplementation(),
10171019
description: PaddingDescription(),
@@ -1034,4 +1036,14 @@ const List<WidgetModel> widgets = [
10341036
category: [WidgetCategoy.Accessibility],
10351037
codeString: TooltipCode(),
10361038
),
1039+
WidgetModel(
1040+
name: "Animated Positioned",
1041+
link:
1042+
"https://api.flutter.dev/flutter/widgets/AnimatedPositioned-class.html",
1043+
subtitle: "Implementation of Animated Positioned Widget",
1044+
implementation: AnimatedPositionedImp(),
1045+
description: AnimatedPositionedDesc(),
1046+
category: [WidgetCategoy.Animation],
1047+
codeString: AnimatedPositionedCode(),
1048+
),
10371049
];

0 commit comments

Comments
 (0)