Skip to content

Commit 554d8e0

Browse files
SaadArdatiBirjuVachhani
SaadArdati
authored and
BirjuVachhani
committed
🔧 Update Pack V1 #16
1 parent e3a667f commit 554d8e0

File tree

2 files changed

+212
-162
lines changed

2 files changed

+212
-162
lines changed

‎example/lib/main.dart‎

Lines changed: 148 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import 'package:flutter/material.dart';
55
import 'package:flutter/scheduler.dart';
66
import 'package:flutter/services.dart';
77
import 'package:flutter_box_transform/flutter_box_transform.dart';
8-
import 'package:hyper_effects_demo/stories/shake_and_spring_animation.dart';
98
import 'package:hyper_effects_demo/stories/color_filter_scroll_transition.dart';
109
import 'package:hyper_effects_demo/stories/counter_app.dart';
10+
import 'package:hyper_effects_demo/stories/one_shot_reset_animation.dart';
1111
import 'package:hyper_effects_demo/stories/scroll_phase_transition.dart';
1212
import 'package:hyper_effects_demo/stories/scroll_wheel_blur.dart';
1313
import 'package:hyper_effects_demo/stories/scroll_wheel_transition.dart';
14-
import 'package:hyper_effects_demo/stories/one_shot_reset_animation.dart';
14+
import 'package:hyper_effects_demo/stories/shake_and_spring_animation.dart';
1515
import 'package:hyper_effects_demo/stories/text_animation.dart';
1616
import 'package:hyper_effects_demo/stories/windows_settings_transition.dart';
1717

@@ -32,7 +32,7 @@ class MyApp extends StatelessWidget {
3232
colorScheme: ColorScheme.fromSeed(
3333
brightness: Brightness.light,
3434
seedColor: Colors.blue,
35-
background: const Color(0xFF0F0F0F),
35+
background: const Color(0xFFF0F0F0),
3636
),
3737
inputDecorationTheme: InputDecorationTheme(
3838
isDense: true,
@@ -78,7 +78,7 @@ class Storyboard extends StatefulWidget {
7878
State<Storyboard> createState() => _StoryboardState();
7979
}
8080

81-
class _StoryboardState extends State<Storyboard> {
81+
class _StoryboardState extends State<Storyboard> with WidgetsBindingObserver {
8282
final List<Story> animationStories = [
8383
const Story(
8484
title: 'Text Rolling Animations',
@@ -124,112 +124,159 @@ class _StoryboardState extends State<Storyboard> {
124124
int? selectedTransition;
125125
int? selectedCategory;
126126

127+
bool openDrawer = false;
128+
129+
@override
130+
void initState() {
131+
super.initState();
132+
133+
WidgetsBinding.instance.addObserver(this);
134+
}
135+
136+
@override
137+
void dispose() {
138+
WidgetsBinding.instance.removeObserver(this);
139+
super.dispose();
140+
}
141+
142+
@override
143+
void didChangeDependencies() {
144+
super.didChangeDependencies();
145+
146+
final screen = MediaQuery.sizeOf(context);
147+
148+
if (screen.width > 800) {
149+
openDrawer = true;
150+
}
151+
}
152+
153+
@override
154+
void didChangeMetrics() {
155+
super.didChangeMetrics();
156+
157+
final screen = MediaQuery.sizeOf(context);
158+
openDrawer = screen.width > 800;
159+
}
160+
127161
@override
128162
Widget build(BuildContext context) {
129163
return Scaffold(
164+
appBar: AppBar(
165+
backgroundColor: Colors.transparent,
166+
title: Text(
167+
'Hyper Effects Storyboard',
168+
style: Theme.of(context).textTheme.titleLarge,
169+
),
170+
centerTitle: false,
171+
leading: IconButton(
172+
icon: const Icon(Icons.menu),
173+
onPressed: () {
174+
setState(() {
175+
openDrawer = !openDrawer;
176+
});
177+
},
178+
),
179+
actions: [
180+
IconButton(
181+
icon: const Icon(Icons.brightness_4),
182+
onPressed: () {
183+
AdaptiveTheme.of(context).toggleThemeMode();
184+
},
185+
),
186+
],
187+
),
130188
body: Row(
131189
children: [
132-
SizedBox(
133-
width: 300,
134-
child: Column(
135-
crossAxisAlignment: CrossAxisAlignment.start,
190+
AnimatedContainer(
191+
duration: const Duration(milliseconds: 300),
192+
curve: Curves.easeOutQuart,
193+
width: openDrawer ? 350 : 0,
194+
child: Stack(
136195
children: [
137-
Padding(
138-
padding: const EdgeInsets.all(16),
139-
child: Text(
140-
'Hyper Effects Storyboard',
141-
style: Theme.of(context).textTheme.titleLarge,
142-
),
143-
),
144-
const Divider(height: 0),
145-
Padding(
146-
padding: const EdgeInsets.all(16),
147-
child: Text('Animations',
148-
style: Theme.of(context).textTheme.titleLarge),
149-
),
150-
// CustomExpansionTile(
151-
// title: const Text('Animations'),
152-
// isExpanded: selectedCategory == 0,
153-
// onExpansionChanged: () {
154-
// setState(() {
155-
// if (selectedCategory == 0) {
156-
// selectedCategory = null;
157-
// } else {
158-
// selectedCategory = 0;
159-
// }
160-
// });
161-
// },
162-
// children: [
163-
for (final Story story in animationStories)
164-
Material(
165-
type: MaterialType.transparency,
166-
borderRadius: const BorderRadius.only(
167-
topRight: Radius.circular(32),
168-
bottomRight: Radius.circular(32),
169-
),
170-
clipBehavior: Clip.antiAlias,
171-
child: ListTile(
172-
title: Padding(
173-
padding: const EdgeInsets.only(left: 16),
174-
child: Text(story.title),
175-
),
176-
onTap: () {
177-
setState(() {
178-
selectedAnimation = animationStories.indexOf(story);
179-
selectedTransition = null;
180-
});
181-
},
182-
selected:
183-
animationStories.indexOf(story) == selectedAnimation,
196+
Positioned(
197+
top: 0,
198+
bottom: 0,
199+
left: 0,
200+
width: 350,
201+
child: SizedBox(
202+
width: 350,
203+
child: ListView(
204+
children: [
205+
const SizedBox(height: 16),
206+
Padding(
207+
padding: const EdgeInsets.only(
208+
left: 16,
209+
right: 16,
210+
bottom: 16,
211+
top: 0,
212+
),
213+
child: Text('Animations',
214+
style: Theme.of(context).textTheme.titleLarge),
215+
),
216+
for (final Story story in animationStories)
217+
Material(
218+
type: MaterialType.transparency,
219+
borderRadius: const BorderRadius.only(
220+
topRight: Radius.circular(32),
221+
bottomRight: Radius.circular(32),
222+
),
223+
clipBehavior: Clip.antiAlias,
224+
child: ListTile(
225+
title: Padding(
226+
padding: const EdgeInsets.only(left: 16),
227+
child: Text(story.title),
228+
),
229+
onTap: () {
230+
setState(() {
231+
selectedAnimation =
232+
animationStories.indexOf(story);
233+
selectedTransition = null;
234+
});
235+
},
236+
selected: animationStories.indexOf(story) ==
237+
selectedAnimation,
238+
),
239+
),
240+
const Divider(height: 32, indent: 16, endIndent: 16),
241+
Padding(
242+
padding: const EdgeInsets.only(
243+
left: 16,
244+
right: 16,
245+
bottom: 16,
246+
top: 0,
247+
),
248+
child: Text('Transitions',
249+
style: Theme.of(context).textTheme.titleLarge),
250+
),
251+
for (final Story story in transitionStories)
252+
Material(
253+
type: MaterialType.transparency,
254+
borderRadius: const BorderRadius.only(
255+
topRight: Radius.circular(32),
256+
bottomRight: Radius.circular(32),
257+
),
258+
clipBehavior: Clip.antiAlias,
259+
child: ListTile(
260+
title: Padding(
261+
padding: const EdgeInsets.only(left: 16),
262+
child: Text(story.title),
263+
),
264+
onTap: () {
265+
setState(() {
266+
selectedTransition =
267+
transitionStories.indexOf(story);
268+
selectedAnimation = null;
269+
});
270+
},
271+
selected: transitionStories.indexOf(story) ==
272+
selectedTransition,
273+
),
274+
),
275+
const Divider(height: 16),
276+
],
184277
),
185278
),
186-
// ],
187-
// ),
188-
const Divider(height: 0, indent: 16, endIndent: 16),
189-
Padding(
190-
padding: const EdgeInsets.all(16),
191-
child: Text('Transitions',
192-
style: Theme.of(context).textTheme.titleLarge),
193279
),
194-
// CustomExpansionTile(
195-
// title: const Text('Transitions'),
196-
// isExpanded: selectedCategory == 1,
197-
// onExpansionChanged: () {
198-
// setState(() {
199-
// if (selectedCategory == 1) {
200-
// selectedCategory = null;
201-
// } else {
202-
// selectedCategory = 1;
203-
// }
204-
// });
205-
// },
206-
// children: [
207-
for (final Story story in transitionStories)
208-
Material(
209-
type: MaterialType.transparency,
210-
borderRadius: const BorderRadius.only(
211-
topRight: Radius.circular(32),
212-
bottomRight: Radius.circular(32),
213-
),
214-
clipBehavior: Clip.antiAlias,
215-
child: ListTile(
216-
title: Padding(
217-
padding: const EdgeInsets.only(left: 16),
218-
child: Text(story.title),
219-
),
220-
onTap: () {
221-
setState(() {
222-
selectedTransition = transitionStories.indexOf(story);
223-
selectedAnimation = null;
224-
});
225-
},
226-
selected: transitionStories.indexOf(story) ==
227-
selectedTransition,
228-
),
229-
),
230-
// ],
231-
// ),
232-
const Divider(height: 0),
233280
],
234281
),
235282
),

0 commit comments

Comments
 (0)