Comments (7)
Is it possible to use it in page transition or in AnimatedSwitcher widget?
Hello,
I will take a close look at this case and write back ASAP.
from animated_glitch.
Is it possible to use it in page transition or in AnimatedSwitcher widget?
Currently, It is working for both AnimatedSwitcher
and page transitions
.
You may try for AnimatedSwitch
(don't forget to use keys in widgets for correct switch animation):
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 page transitions
:
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',
),
),
);
}
}
from animated_glitch.
Yeah, like only glitch when its transitioning, like instead of FadeTransition()
Got it. I will think about that over the weekend.
from animated_glitch.
Thank you, it'll be cool to use it with animated_glitch I'm trying to achieve cyberpunk aesthetic like futuristic look and feel.
from animated_glitch.
Is it possible to only animate while switching not all the time?
from animated_glitch.
Is it possible to only animate while switching not all the time?
Do you mean using that effect exactly as a transition?
from animated_glitch.
Yeah, like only glitch when its transitioning, like instead of FadeTransition()
from animated_glitch.
Related Issues (1)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from animated_glitch.