circular_splash_transition 0.1.2

A simple custom page transition.

circular_splash_transition

A simple custom page transition.

Uma simples transição de pagina.

Usage

To use this package, add circular_splash_transition as a dependency in your pubspec.yaml file.

Please, excuse the google translator :)

Import Circular Splash Transition:

import 'package:circular_splash_transition/circular_splash_transition.dart';

Create a controller for the transition within your state:

CircularSplashController _controller = CircularSplashController(
  color: Colors.white, //optional, default is White.
  duration: Duration(millisecons: 300), //optional. 
);

Now add the CircularSplash() at the top of your widget tree:

@override
Widget build(BuildContext context) {
  return CircularSplash(
    controller: _controller,
      child: Container(),
  );
}

Finally, use _controller.push(context, nextPage); to call the next page:

Future<Object> push() async {
  Object object = await _controller.push(context, nextPage);
  print(object);
  return object;
}

Remember to close your controller:

@override
void dispose(){
  _controller.dispose();
  super.dispose();
}

If you need to use a WillPopScope in the state, it is highly recommended to use the onWillPop that CircularSplash already implements. It works the same way and avoids any problems:

@override
Widget build(BuildContext context) {
  return CircularSplash(
    onWillPop: _onWillPop(),
    controller: _controller,
      child: Container(),
  );
}

If you want to use named routes:

import 'package:circular_splash_transition/circular_splash_transition.dart';

MaterialApp(
  onGenerateRoute: (RouteSettings route) {
    switch (route.name) {
      case "/nextPage":
        return CircularSplashRoute(
          builder: NextPage(), //named route
          color: Colors.blue, //optional
          duration: Duration(milliseconds: 300), //optional
          );
        }
      },
    );


@override
Widget build(BuildContext context) {
  return CircularSplash(
    onWillPop: _onWillPop,
    controller: _controller,
      child: GestureDetector(
        child: Container(),
        onTap: () async {
          Object object = await _controller.pushNamed(context, "/nextPage");
          print(object);
        },
      ),
  );
}

For a better experience, I recommend using the same color and duration in the CircularSplashController and CircularSplashRoute when going from one screen to another:

CircularSplashRoute(
 builder: NextPage(),
 color: Colors.blue,
 duration: Duration(milliseconds: 300));

CiruclarSplashController(
 color: Colors.blue,
 duration: Duration(milliseconds: 300));

Modo de usar

Para usar este pacote, adicione circular_splash_transition como uma dependência em seu pubspec.yaml.

Importe Circular Splash Transition:

import 'package:circular_splash_transition/circular_splash_transition.dart';

Crie um controlador para a transição dentro do seu estado

CircularSplashController _controller = CircularSplashController(
  color: Colors.white, //opicional, o padrão é branco.
  duration: Duration(millisecons: 300), //opicional, o padrão é 300 milisegundos. 
);

Agora adicione o CircularSplash() no topo da sua árvore de widgets:

@override
Widget build(BuildContext context) {
  return CircularSplash(
    controller: _controller,
      child: Container(),
  );
}

Finalmente, use _controller.push(context, nextPage); para chamar a próxima tela:

Future<Object> push() async {
  Object object = await _controller.push(context, nextPage);
  print(object);
  return object;
}

Lembre-se de fechar o controlador:

@override
void dispose(){
  _controller.dispose();
  super.dispose();
}

Se você precisar usar um WillPopScope no estado, é altamente recomendável usar o onWillPop que o CircularSplash já implementa. Funciona da mesma maneira e evita quaisquer problemas:

@override
Widget build(BuildContext context) {
  return CircularSplash(
    onWillPop: _onWillPop(),
    controller: _controller,
      child: Container(),
  );
}

Se você quiser usar rotas nomeadas:

import 'package:circular_splash_transition/route.dart';

MaterialApp(
  onGenerateRoute: (RouteSettings route) {
    switch (route.name) {
      case "/nextPage":
        return CircularSplashRoute(
          builder: NextPage(), //nome da rota
          color: Colors.blue, //opicional
          duration: Duration(milliseconds: 300), //opicional
          );
        }
      },
    );


@override
Widget build(BuildContext context) {
  return CircularSplash(
    onWillPop: _onWillPop,
    controller: _controller,
      child: GestureDetector(
        child: Container(),
        onTap: () async {
          Object object = await _controller.pushNamed(context, "/nextPage");
          print(object);
        },
      ),
  );
}

Para uma melhor experiencia, recomendo utilizar a mesma cor e duração no CircularSplashController() e CircularSplashRoute() quando for de uma tela para outra:

CircularSplashRoute(
 builder: ProximaTela(),
 color: Colors.blue,
 duration: Duration(milliseconds: 300));

CiruclarSplashController(
 color: Colors.blue,
 duration: Duration(milliseconds: 300));