Как правильно предварительно кэшировать изображения для виджетов без состояния? - PullRequest
Новая
       94

Как правильно предварительно кэшировать изображения для виджетов без состояния?

0 голосов
/ 06 августа 2020

Я пытаюсь избежать задержки загрузки изображения, из-за которой оно появляется в моем SplashScreen без сохранения состояния, но безуспешно. Я попытался загрузить изображение в main() и передать его конструктору, но без изменений.

Я прочитал довольно много ответов по той же проблеме, и все сообщения использовали precacheImage в didChangeDependencies в расширенном классе State для виджета с отслеживанием состояния, поэтому я попробовал, но результат тот же, даже после примеров ответов и этой статьи https://alex.domenici.net/archive/preload-images-in-a-stateful-widget-on-flutter. 

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
  
}

class _SplashScreenState extends State<SplashScreen> {

  Image logo;

  @override
  void initState() {
    super.initState();
    logo = Image.asset(
      'assets/notification.png',
      height: 170,
      width: 170,
    );
  }

    @override
      void didChangeDependencies() {
      super.didChangeDependencies();
      precacheImage(logo.image, context);

    }
  @override
  Widget build(BuildContext context) {


    return Scaffold(
      backgroundColor: Colors.redAccent,
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              SizedBox(
                height: 150,
              ),
              logo,
              SizedBox(
                height: 60,
              ),
              Expanded(
                child: Text(
                  AppLocalizations.instance.text('Splash screen message'),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 25,
                      fontWeight: FontWeight.w500,
                      letterSpacing: 1.5),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

Например, на своем веб-сайте я установил свой собственный навигатор service, чтобы экраны не возвращались из виджета с отслеживанием состояния:

Генератор маршрутов 

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case HomeRoute:
      return _getPageRoute((HomePage()));
    case AboutRoute:
      return _getPageRoute(AboutPage());
    case RetailerAccessRoute:
      return _getPageRoute(RetailerAccess());
  }
}

Поэтому я установил две промежуточные страницы HomePageImagePreloader и AboutPageImagePreloader и вместо них вернул их:

Route generato new 

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case HomeRoute:
      return _getPageRoute((HomePageImagePreloader()));
    case AboutRoute:
      return _getPageRoute(AboutPageImagePreloader());
    case RetailerAccessRoute:
      return _getPageRoute(RetailerAccess());
  }
}

AboutPageImagePreloader: 

class AboutPageImagePreloader extends StatefulWidget {
  @override
  _AboutPageImagePreloaderState createState() => _AboutPageImagePreloaderState();
}

class _AboutPageImagePreloaderState extends State<AboutPageImagePreloader> {
  Image bgImageDesktop;
  Image bgImageMobile;

  @override
  void initState() {
    super.initState();
    bgImageDesktop = Image.asset('assets/aboutUsDesktopBg.jpg');
    bgImageMobile = Image.asset('assets/aboutUsMobileBg2.jpg');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    precacheImage(bgImageDesktop.image, context);
    precacheImage(bgImageMobile.image, context);

  }
  @override
  Widget build(BuildContext context) {
    return AboutPage(bgImageDesktop: bgImageDesktop, bgImageMobile: bgImageMobile);
  }
}

Добавлены необходимые изображения в конструкторы HomePage и AboutPage, но при загрузке веб-сайта сначала фон Има ge stil не загружен ... так что мой обходной путь не работает в Интернете ..

Я не могу поверить, что такая базовая c операция, как загрузка изображения, должна быть такой сложной .. делает Я думаю, что Flutter - не такой уж хороший выбор ... Знаете ли вы, что предварительное кэширование еще не работает в Интернете? Я на последнем канале разработчиков ..

Большое спасибо.

1 Ответ

0 голосов
/ 06 августа 2020

Один из способов заставить метод precacheImage работать в сочетании с моей первой попыткой - это оставить SplashScreen без состояния. Затем дочерний элемент main() (обычно App()) будет иметь состояние, чтобы предварительно кэшировать все необходимые изображения и передавать их на экраны через свойство final bgImage в конструкторе. Таким образом, все загружается без мерцающих изображений bg.

дочерний элемент main (): 

class _FixitState extends State<Fixit> {
  final FirebaseAnalytics analytics = FirebaseAnalytics();
  Image logo;
  Image loginBg;

  @override
  void initState() {
    super.initState();
    logo = Image.asset('assets/notification.png');
    loginBg = Image.asset('assets/mainBg.png');
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    precacheImage(logo.image, context);
    precacheImage(loginBg.image, context);

  }

  @override
  Widget build(BuildContext context) {

...

home: BlocBuilder<AuthenticationBloc, AuthenticationState>(
        builder: (context, state) {

          if (state is Unauthenticated) {
            return LoginScreen(userRepository: widget._userRepository, bgImage: loginBg,);
          }

...

return SplashScreen(logo: logo);
...

SplashScreen (без сохранения состояния): 

class SplashScreen extends StatelessWidget {
  final Image logo;

  const SplashScreen({Key key, @required this.logo}) : super(key: key);

  @override
  Widget build(BuildContext context) {


    return Scaffold(
      backgroundColor: Colors.redAccent,
      body: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              SizedBox(
                height: 150,
              ),
              Image(image: logo.image,height: 170,
                width: 170,),
              SizedBox(
                height: 60,
              ),
              Expanded(
                child: Text(
                  AppLocalizations.instance.text('Splash screen message'),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 25,
                      fontWeight: FontWeight.w500,
                      letterSpacing: 1.5),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
...