The Challenge of Using the Same Code Base for Android and Web: A Conceptual Overview

Are you a programmer looking for a way to write code that works on both Android and web platforms? If so, you’ve come to the right place!
In this article, we’ll explore the concept of using the same code base for both Android and web platforms. We’ll look at how to write code that works on both platforms, as well as some of the challenges you may face when doing so.
The first step in writing code that works on both Android and web platforms is to import the appropriate libraries.

For web browsers, you’ll need to import 'dart:html'.
For Android devices, you’ll need to import 'dart:ui'.

Here’s an example of how to do this:

import 'package:flutter/material.dart';
import 'dart:html' as html; // For web browser.
import 'dart:ui' as ui; // For Android device.

Next, you’ll need to create a StatelessWidget class that contains the code that will be used for both Android and web platforms. Here’s an example of how to do this:

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 // Check the platform and use the appropriate library.

 if (html.window != null) { 
// Running on web browser.

// Create a new file.
 File('my_file.txt').create();

// Write to a file.
 File('my_file.txt').writeAsStringSync('Hello World!');

// Read the content of a file.
 String content = File('my_file.txt').readAsStringSync();
return Text(content);
 } else if (ui.window != null) {
// Running on Android device.

// Create a new file.
 File('my_file.txt').create();

// Write to a file.
 File('my_file.txt').writeAsStringSync('Hello World!');

// Read the content of a file.
 String content = File('my_file.txt').readAsStringSync();
return Text(content);
 } else {

// Unknown platform.
 return Text('Unknown platform!');
 }

Finally, you’ll need to call the runApp() method with your StatelessWidget class as an argument. This will ensure that your code runs on both Android and web platforms. Here’s an example of how to do this:

void main(){ 
runApp(MaterialApp( 
  home: Scaffold(body:Center(child:MyApp())),
  )); 
}

But, can we do it another way?

You can create three files that will allow you to switch between native and web code.

The first file, web.dart, will contain code specific to web applications. This file should import the dart:html library and contain any functions or variables that are specific to web applications. For example, the following code contains a reload() function that reloads the current page and a cookie variable that stores a cookie value:

import 'dart:html' as html;

void reload() {
  html.window.location.reload();
}

String cookie = "";

The second file, native.dart, will contain code specific to native applications. This file should not import the dart:html library and should contain any functions or variables that are specific to native applications. For example, the following code contains an empty reload() function and a cookie variable that stores a cookie value:

void reload() {}

String cookie = "";

The third file, switch_native_web.dart, will contain code that allows you to switch between native and web code. This file should import both the native.dart and web.dart files and contain a class that allows you to access functions and variables from either file depending on whether the application is running on a web or native platform. For example, the following code contains a SwitchNativeWeb class that allows you to access either the reload() function from web.dart or the empty reload() function from native.dart depending on which platform the application is running on:

import 'native.dart' if (dart.library.html) 'web.dart' as switch_value;

class SwitchNativeWeb {

  static String cookie = switch_value.cookie;

  static void reloadWeb() {
    switch_value.reload();
  }
}

By creating these three files, you can easily switch between native and web code depending on which platform your application is running on. This will allow you to write code that is optimized for both platforms without having to duplicate code or maintain two separate versions of your application.

// You can use like below code.

String cookie = SwitchNativeWeb.cookie; 
.
.
onTap:(){
   SwitchNativeWeb.reloadWeb();
}
.
.