route_transitions_lz_custom 0.0.4

Easily add custom route transitions to your Flutter app with this package.

example/main.dart

import 'package:flutter/material.dart';
import 'package:route_transitions_lz_custom/route_transitions_lz_custom.dart';

// This is the main entry point for the application.
void main() {
  // Run the application.
  runApp(MyApp());
}

// This is the main class of the application.
class MyApp extends StatelessWidget {
  // This method is called when the application is first built.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      // Set the initial route of the application.
      initialRoute: 'page1',
      // Define the routes for the application.
      routes: {
        // The route for the first page.
        'page1': (context) => const Page1(),
        // The route for the second page.
        'page2': (context) => const Page2(),
      },
    );
  }
}

// This is the first page of the application.
class Page1 extends StatelessWidget {
  // This is the constructor for the Page1 class.
  const Page1({super.key});

  // This method is called when the page is built.
  @override
  Widget build(BuildContext context) {
    // Return a Scaffold widget.
    return Scaffold(
      // Set the app bar of the scaffold.
      appBar: AppBar(
        // Set the title of the app bar.
        title: const Text('Page 1'),
        // Set the background color of the app bar to transparent.
        backgroundColor: Colors.transparent,
      ),
      // Set the background color of the scaffold to blue.
      backgroundColor: Colors.blue,
      // Set the body of the scaffold to a Center widget with a MaterialButton.
      body: Center(
        child: MaterialButton(
          // Set the color of the material button to white.
          color: Colors.white,
          // Set the onPressed callback of the material button to navigate to the second page with a fade in animation.
          onPressed: () {
            RouteTransitionsLzCustom(
              // Pass the context of the application.
              context: context,
              // Pass the widget to navigate to.
              child: const Page2(),
              // Set the animation type to fade in.
              animation: AnimationType.fadeIn,
              // Set the duration of the animation to 100 milliseconds.
              duration: const Duration(milliseconds: 100),
              // Set the replacement flag to true, which means that the second page will replace the first page in the navigation stack.
              replacement: true,
            );
          },
          // Set the child of the material button to a Text widget with the text "Go to page2".
          child: const Text('Go to page2'),
        ),
      ),
    );
  }
}

// This is the second page of the application.
class Page2 extends StatelessWidget {
  // This is the constructor for the Page2 class.
  const Page2({super.key});

  // This method is called when the page is built.
  @override
  Widget build(BuildContext context) {
    // Return a Scaffold widget.
    return Scaffold(
      // Set the app bar of the scaffold.
      appBar: AppBar(
        // Set the title of the app bar.
        title: const Text('Page 2'),
        // Set the background color of the app bar to transparent.
        backgroundColor: Colors.transparent,
      ),
      // Set the background color of the scaffold to blue grey.
      backgroundColor: Colors.blueGrey,
      // Set the body of the scaffold to a Center widget with a Text widget.
      body: const Center(
        child: Text('Page2'),
      ),
    );
  }
}