loading a page in background in Flutter答案

【问题标题】：loading a page in background in Flutterloading a page in background in Flutter
【发布时间】：2022-12-27 01:01:07
【问题描述】：

I need to load some data in a global variable in Flutter every minute. To load the data (which is a list) to my global data, I need to open another page. But how can I open that page in the background because I do not need that page, I just want to get some data from it.

【问题讨论】：

标签： flutter dart

【解决方案1】：

create a different class and write a function that instantiates a list from itself

【讨论】：

【解决方案2】：

Loading a Page is something related to UI or Presentation layer but loading your data is related to Business layer, you need to keep separate them from each other

There is a topic known as State Management, you should centralize your data providers to a separate layer and change your Presentation layer based on the State of your data

First of all take a look at this link, here is an example of using Provider pattern to manage different State of your data

Then you can use some more complicated libraries like BLOC library for State Management

【讨论】：

【解决方案3】：

(More of a workaround)

As I wrote here one option is to use Stack widget as a page loader. Each "page" expand on the entire screen.

When you want to show the next "page" replace the front layer in the stack with SizedBox.

So all the elements are actually randerd at the same time but will not be visible. For example, the video on the "second page" will start getting loaded even when the user is on the "first page" and will be ready for the user when he continues.

One way to do that is by using get as state management.

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

class PageWithLayers extends StatelessWidget {
  const PageWithLayers({super.key});

  @override
  Widget build(BuildContext context) {
    final Controller c = Get.put(Controller());

    return Stack(
      children: [
        Container(
          color: Colors.red,
          child: const Text('Video here will get loaded before user arrived here'),
        ),
        Obx(
          () => c.toShowTopLayer > 0
              ? Container(
                  color: Colors.blue,
                  width: double.infinity,
                  height: double.infinity,
                  child: Center(
                    child: TextButton(
                      onPressed: c.removeTopLayer,
                      child: const Text('Next'),
                    ),
                  ),
                )
              : const SizedBox(),
        ),
      ],
    );
  }
}

class Controller extends GetxController {
  var toShowTopLayer = 1.obs;

  removeTopLayer() => toShowTopLayer--;
}

【讨论】：