page_router 0.0.3 copy "page_router: ^0.0.3" to clipboard
page_router: ^0.0.3 copied to clipboard

A router that uses Flutter's Navigator 2.0

example/lib/main.dart

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

void main() {
  runApp(PageRouterExample());
}

class PageRouterExample extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _PageRouterExampleState();
}

Validator idValidator = (params) async {
  var id = int.tryParse(params[':id']);
  return id != null && id < 100;
};

class _PageRouterExampleState extends State<PageRouterExample> {
  final routerData = PageRouterData({
    '/': RoutePath(
      builder: (context, params) => FadeTransitionPage(
        key: ValueKey('/'),
        child: HomeScreen(),
      ),
    ),
    '/users/:id': RoutePath(
      validator: idValidator,
      builder: (context, params) => MaterialPage(
        key: ValueKey('/users/:id'),
        child: UserScreen(userId: params[':id']),
      ),
    ),
    '/users/:id/preferences': RoutePath(
      validator: idValidator,
      builder: (context, params) => FadeTransitionPage(
        key: ValueKey('/users/:id/preferences'),
        child: UserPreferencesScreen(
          userId: params[':id'],
        ),
      ),
    ),
  });

  @override
  Widget build(BuildContext context) {
    return PageRouter(
      data: routerData,
      child: MaterialApp.router(
        title: 'page_router Example App',
        routerDelegate: routerData.routerDelegate,
        routeInformationParser: routerData.informationParser,
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            Text(
              'Home Page',
              style: Theme.of(context).textTheme.headline3,
            ),
            OutlinedButton(
              child: Text('Go to User 123'),
              onPressed: () {
                PageRouter.of(context).pushNamed('/users/123');
              },
            ),
            OutlinedButton(
              child: Text('Push using the Navigator'),
              onPressed: () {
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (context) => HomeScreen()));
              },
            )
          ],
        ),
      ),
    );
  }
}

class UserScreen extends StatelessWidget {
  final String userId;

  UserScreen({
    this.userId,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            Text(
              'User',
              style: Theme.of(context).textTheme.headline3,
            ),
            Text('ID: $userId'),
            OutlinedButton(
              child: Text('Preferences'),
              onPressed: () {
                PageRouter.of(context).pushNamed('/users/$userId/preferences');
              },
            ),
          ],
        ),
      ),
    );
  }
}

class UserPreferencesScreen extends StatelessWidget {
  final String userId;

  UserPreferencesScreen({
    this.userId,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            Text(
              'User Preferences',
              style: Theme.of(context).textTheme.headline3,
            ),
            Text('ID $userId'),
          ],
        ),
      ),
    );
  }
}

class FadeTransitionPage extends Page {
  final Widget child;

  FadeTransitionPage({
    Key key,
    this.child,
  }) : super(key: key);

  Route createRoute(BuildContext context) {
    return PageRouteBuilder(
      settings: this,
      pageBuilder: (context, animation, animation2) {
        return FadeTransition(
          opacity: animation,
          child: child,
        );
      },
    );
  }
}