-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🔥 [FEATURE] Ability to use it in page transition #3
Comments
Hello, I will take a close look at this case and write back ASAP. |
Currently, It is working for both import 'package:animated_glitch/animated_glitch.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animated Glitch Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _showGlitched = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedSwitcher(
duration: const Duration(seconds: 1),
child: _showGlitched
? const _Glitched(
key: Key('asset'),
image: AssetImage(
'assets/cyberpunk.jpg',
),
)
: const _Glitched(
key: Key('network'),
image: NetworkImage(
'https://images.immediate.co.uk/production/volatile/sites/3/2022/09/Edgerunners-connect-to-Cyberpunk-2077-timeline-b233bcb.jpg?quality=90&resize=980,654',
),
),
),
floatingActionButton: FloatingActionButton.large(
onPressed: () {
setState(() {
_showGlitched = !_showGlitched;
});
},
child: const Text(
'switch',
textAlign: TextAlign.center,
),
),
);
}
}
class _Glitched extends StatefulWidget {
final ImageProvider image;
const _Glitched({
required this.image,
super.key,
});
@override
State<_Glitched> createState() => _GlitchedState();
}
class _GlitchedState extends State<_Glitched> {
final _controller = AnimatedGlitchController(
frequency: const Duration(milliseconds: 200),
);
@override
Widget build(BuildContext context) {
return AnimatedGlitch(
controller: _controller,
child: Image(
image: widget.image,
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
),
);
}
} Output: And for import 'package:animated_glitch/animated_glitch.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animated Glitch Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: const _Glitched(
key: Key('asset'),
image: AssetImage(
'assets/cyberpunk.jpg',
),
),
floatingActionButton: FloatingActionButton.large(
onPressed: () {
Navigator.of(context).push(
_FadeRoute(
child: const _SecondPage(),
),
);
},
child: const Text(
'open',
textAlign: TextAlign.center,
),
),
);
}
}
class _Glitched extends StatefulWidget {
final ImageProvider image;
const _Glitched({
required this.image,
super.key,
});
@override
State<_Glitched> createState() => _GlitchedState();
}
class _GlitchedState extends State<_Glitched> {
final _controller = AnimatedGlitchController(
frequency: const Duration(milliseconds: 200),
);
@override
Widget build(BuildContext context) {
return AnimatedGlitch(
controller: _controller,
child: Image(
image: widget.image,
fit: BoxFit.cover,
height: double.infinity,
width: double.infinity,
),
);
}
}
class _FadeRoute extends PageRouteBuilder {
_FadeRoute({required Widget child})
: super(
pageBuilder: (_, animation, ___) => FadeTransition(
opacity: animation,
child: child,
),
);
}
class _SecondPage extends StatelessWidget {
const _SecondPage();
@override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
automaticallyImplyLeading: true,
backgroundColor: Colors.transparent,
),
body: const _Glitched(
key: Key('network'),
image: NetworkImage(
'https://images.immediate.co.uk/production/volatile/sites/3/2022/09/Edgerunners-connect-to-Cyberpunk-2077-timeline-b233bcb.jpg?quality=90&resize=980,654',
),
),
);
}
} |
Is it possible to only animate while switching not all the time? |
Do you mean using that effect exactly as a transition? |
Yeah, like only glitch when its transitioning, like instead of FadeTransition() |
Got it. I will think about that over the weekend. |
Thank you, it'll be cool to use it with animated_glitch I'm trying to achieve cyberpunk aesthetic like futuristic look and feel. |
Is it possible to use it in page transition or in AnimatedSwitcher widget?
The text was updated successfully, but these errors were encountered: