Флаттер загружает новую страницу в фоновом режиме - PullRequest
Новая
       5

Флаттер загружает новую страницу в фоновом режиме

0 голосов
/ 26 февраля 2020

Сценарий: У меня есть кнопка, при нажатии воспроизводит анимацию, а затем переходит на новую страницу. Существует видимое время ожидания для загрузки новой страницы. Это время ожидания, однако, быстрее, чем начальная анимация. В данный момент пользователь видит воспроизведение анимации, а затем видимую паузу, пока загружается новая страница.

Мне было интересно, можно ли загрузить новую страницу в фоновом режиме во время воспроизведения анимации? Таким образом, когда анимация завершится, не должно быть видимого времени ожидания, и пользователь мгновенно переключится на новую страницу.

В настоящее время я загружаю новую страницу с помощью Навигатора ... 

await Navigator.push(thisContext, MaterialPageRoute(builder: (context) {
      return NewPage(
        title: "New Page"
      );
    }));

Думал, что можно загрузить новую страницу, а затем только sh загрузить ее в навигатор, когда она уже загружена и анимация завершена.

Это то, что происходит в настоящее время ...

enter image description here

против того, что я хочу, чтобы ...

enter image description here

Ответы [ 2 ]

0 голосов
/ 26 февраля 2020

Вторая страница будет создана, когда начнется переход страницы.

См. этот официальный пример. 

 import 'package:flutter/material.dart';

main() {
  runApp(MaterialApp(
    home: Page1(),
  ));
}

class Page1 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: RaisedButton(
          child: Text('Go!'),
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0, 1.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

class Page2 extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text('Page 2'),
      ),
    );
  }
}

Ну, как быстрее запустить вторую страницу?

У вас есть следующие опции

  1. Извлечь необходимые данные перед запуском второй странице и передайте их в качестве аргумента.

  2. Вы можете кэшировать данные при первом получении, а затем использовать кэшированные данные. Также убедитесь, что вы сделали недействительными эти кэшированные данные через определенное время.

0 голосов
/ 26 февраля 2020

Вы пытались использовать таймер, поэтому просто установите анимированный таймер на таймер, а затем перейдите позже. 

Timer(Duration(seconds: animatedSeconds), () {
  // pass your animation time  in seconds and then just navigate 
Navigator.push(thisContext, MaterialPageRoute(builder: (context) {
      return NewPage(
        title: "New Page"
      );
    }));
});
...