Skip to content
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

Open
explorer-source opened this issue Jun 16, 2023 · 7 comments
Open

🔥 [FEATURE] Ability to use it in page transition #3

explorer-source opened this issue Jun 16, 2023 · 7 comments
Assignees
Labels
feature request good first issue Good for newcomers question Further information is requested

Comments

@explorer-source
Copy link

Is it possible to use it in page transition or in AnimatedSwitcher widget?

@feduke-nukem feduke-nukem added the question Further information is requested label Jun 16, 2023
@feduke-nukem feduke-nukem self-assigned this Jun 16, 2023
@feduke-nukem
Copy link
Owner

feduke-nukem commented Jun 16, 2023

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 feduke-nukem added the good first issue Good for newcomers label Jun 16, 2023
@feduke-nukem
Copy link
Owner

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:

Simulator Screen Recording - iPhone 11 Pro - 2023-06-16 at 21 32 38

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:
Simulator Screen Recording - iPhone 11 Pro - 2023-06-16 at 21 42 06

@explorer-source
Copy link
Author

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

@feduke-nukem
Copy link
Owner

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

Do you mean using that effect exactly as a transition?

@explorer-source
Copy link
Author

explorer-source commented Jun 17, 2023

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

@feduke-nukem
Copy link
Owner

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

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

@explorer-source
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request good first issue Good for newcomers question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants