🔥 [FEATURE] Ability to use it in page transition

[feduke-nukem]

🔥 [FEATURE] Ability to use it in page transition

[feduke-nukem]

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.

[feduke-nukem]

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',
        ),
      ),
    );
  }
}

Output:

[feduke-nukem]

Yeah, like only glitch when its transitioning, like instead of FadeTransition()

Got it. I will think about that over the weekend.

[explorer-source]

Thank you, it'll be cool to use it with animated_glitch I'm trying to achieve cyberpunk aesthetic like futuristic look and feel.

[explorer-source]

Is it possible to only animate while switching not all the time?

[feduke-nukem]

Is it possible to only animate while switching not all the time?

Do you mean using that effect exactly as a transition?

[explorer-source]

Yeah, like only glitch when its transitioning, like instead of FadeTransition()