OpenContainer usage with Page and Router

ghz 8months ago ⋅ 125 views

We'd like to use a OpenContainer style Container Transition included within the library animations within one or more of our (go_router) router based transitions. Unfortunately all I can find seems to be OpenContainer itself, which handles the timing, animating, etc internally and doesn't play nicely with the router's Pages or CustomTransitionPage's transitionsBuilder.

Shy of making a completely custom transition ourselves is there a way I'm missing to use it or something else to do a Container Transition here? Thanks so much for your help!

Answers

To integrate the OpenContainer style Container Transition into your app with go_router and Flutter animations, you'll need to create a custom transition that combines the functionality of OpenContainer with the routing system provided by go_router. Here's a general outline of how you can approach this:

  1. Create a Custom Transition Widget: You'll need to create a custom widget that combines the functionality of OpenContainer with the routing system provided by go_router. This widget will handle the animation and transition logic.

  2. Use go_router for Routing: Use go_router for routing between different screens/pages in your app. This will ensure that the routing system is compatible with the custom transition widget you've created.

  3. Integrate Animation: Implement the animation logic within your custom transition widget. You can use Flutter's animation APIs to create the desired transition effects, such as fade, scale, or slide animations.

  4. Handle Navigation Events: Handle navigation events within your custom transition widget to trigger the appropriate animations when navigating between screens/pages.

  5. Test and Refine: Test your custom transition widget to ensure that it behaves as expected and provides a smooth transition experience for users. Refine the animation and transition logic as needed to improve performance and visual appeal.

Here's a basic example of how you might implement a custom transition widget that combines OpenContainer with go_router:

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

class CustomTransitionPage extends StatelessWidget {
  final Widget child;

  const CustomTransitionPage({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return OpenContainer(
      transitionType: ContainerTransitionType.fade,
      closedBuilder: (_, openContainer) => InkWell(
        onTap: openContainer,
        child: child,
      ),
      openBuilder: (_, closeContainer) => child,
    );
  }
}

void main() {
  final goRouter = GoRouter(
    initialLocation: '/home',
    errorPageBuilder: (context, state) => MaterialPage(
      key: state.pageKey,
      child: Scaffold(
        body: Center(
          child: Text('Error: ${state.error.toString()}'),
        ),
      ),
    ),
    routes: [
      CustomTransitionPage(
        path: '/home',
        builder: (context, state) => MaterialPage(
          key: state.pageKey,
          child: HomePage(),
        ),
      ),
      CustomTransitionPage(
        path: '/details',
        builder: (context, state) => MaterialPage(
          key: state.pageKey,
          child: DetailsPage(),
        ),
      ),
    ],
  );

  runApp(MaterialApp.router(
    routerDelegate: goRouter.routerDelegate,
    routeInformationParser: goRouter.routeInformationParser,
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => GoRouter.of(context).go('/details'),
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Details')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => GoRouter.of(context).go('/home'),
          child: Text('Go to Home'),
        ),
      ),
    );
  }
}

This example demonstrates how you can create a custom transition page using the OpenContainer widget and integrate it with go_router for routing between different screens. You can customize the transitionType and closedBuilder/openBuilder as needed to achieve the desired transition effect.

#flutter