Flutter switch between local data and remote data - flutter

Question

In a Flutter app the user must be able to see the retrieved data from an API also when there is no network, e.g. in a house basement. I'm able to retrieve the data from the Api and to store it in a local sqflite db. I'm also able to check whether there is network or not. But how do I implement the flow in order to show local data or remote data? Is it possible to do it in the same screen or do I need two screens? Any help is appreciated.
EDIT
Thank you for all the answers, but I don't check where to fill in the getData() method now. I post what I've done so far:
class WorkAtPop extends StatefulWidget {
#override
_WorkAtPop createState() => _WorkAtPop();
}
class _WorkAtPop extends State<WorkAtPop> {
final String title = 'Work#Pop';
final bgcolor = HexToColor('#ffffff');
final list = List();
final isLoading = false;
List<DropdownChoices> workatpopdropdownchoices = <DropdownChoices>[
DropdownChoices(title: 'Refresh', action: 'refresh', route: '/workatpop'),
];
bool _isVpnEnabled = false;
bool _isLoading = true;
void checkVpn() async {
var isEnabled = await ApiService().isVpnEnabled();
setState(() => _isVpnEnabled = isEnabled);
setState(() => _isLoading = false);
}
#override
void initState() {
super.initState();
checkVpn();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: BaseAppBar(title: title, appBar: AppBar(), dropdownChoices: workatpopdropdownchoices),
backgroundColor: bgcolor,
body: new Container(
padding: const EdgeInsets.all(30.0),
color: bgcolor,
child: (_isLoading)
? new Center(
child: new CircularProgressIndicator(),
)
: new Container(
child: new Text('here my data displayed as list, vpn=$_isVpnEnabled'),
)
),
);
}
}
Now if VPN is enabled I retrieve the data from the api else from the local db. The API is storing the data into the db each time it is called.

Answer 1

Since you're handling everything, it will be easy for you to do so. It's possible only in a single screen.
List<PodoClass> data;
if(internet()) {
data = fecthDataFromNetwork(); // load fron internet
} else {
data = loadLocalData(); // load from database
}
processData(data); // process your data
I hope you got some idea.

Answer 2

If internet is available get data from server and store it in localdb, and if internet is not available get already stored data from localdb.
List<PodoClass> data;
void feachdata() async{
if(isInternet()) {
data = await DataFromNetwork(); // load from internet
storetolocaldb(data); // store to local for later use
} else {
data = getLocalData(); // load from database
}
displaydata(data); // process your data
}
hope it helps..

Answer 3

you can store retrieved data from an API to a local db and can fetch it on both cases offline/online.. Also you can update the db if any new data available in the api
void getData() {
getStoredDataFromDb().then((data){
if(data !=null){
populateUI();
checkForAnyUpdate();
}
else {
if(hasInternetconnection)
getDatafromApi();
}
else{
loadMockOrOldData();}
};
getDatafromApi().then((response){
insertDataIntoTheDatabase(response);
};
}