How to: Create a Mobile App using Flutter for an existing web application

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase. It has the following characteristics, fast development, expressive and flexible UI, native performance.

Getting Started:

1. Install Flutter:

To install Flutter in your computer, it may be Windows, Linux or Mac, follow the steps given in the URL — https://flutter.io/docs/get-started/install

2. Choose an IDE:

Set up an IDE or editor for writing code using VS Code or Android Studio/IntelliJ using the URL — https://flutter.io/docs/get-started/editor?tab=vscode

3. Setup for VS Code:

To create the app using VS Code follow the steps from this URL — https://flutter.io/docs/get-started/test-drive?tab=vscode

4. What is a WebView?

A “WebView” is a browser bundled inside of a mobile application producing what is called a hybrid app. Using a WebView allows mobile apps to be built using Web technologies (HTML, JavaScript, CSS, etc.) but still package it as a native app and put it in the app store.

5. How to create a Hello World app in Flutter?

In your VS Code click, View -> Command Palette -> Flutter: New Project and enter a new name for your new project eg. HelloWorld. Replace the following code in lib/main.dart. Save and run the code by clicking, Debug -> Start Without Debugging or use the shortcut key Ctrl+F5. The output can be viewed using an android emulator or on any android device.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Welcome to Hello World'),
        ),
        body: Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

6. Creating an app using Flutter WebView

Create a new flutter project using the same step in the above 5th point and add flutter_webview_plugin in pubspec.yamal file as a dependency.

flutter_webview_plugin: ^0.3.0+2

Import the flutter_webview_plugin package into the main.dart file.

import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

To set a splashscreen for your app add the following dependency in the pubspec.yaml. Also, import the following package into the main.dart file.

splashscreen: ^1.2.0
import 'package:splashscreen/splashscreen.dart';

To set the preferred orientation of your application import the package called services into the main.dart file.

import 'package:flutter/services.dart';

To change the appBar Title you can replace the text with your own and to create the app for your website link, just replace the url in the code.

Widget build(BuildContext context) {
  return WebviewScaffold(
    appBar: AppBar(
       //replace with your title
      title: Text("Crypto Signals"),
      backgroundColor: Colors.blueGrey[900],
    ),
      //replace with your url
    url: "http://crypto.slamtrade.com/"

Save and run the code by clicking, Debug -> Start Without Debugging or use the shortcut key Ctrl+F5. The output can be viewed using an android emulator or on any android device.

Clone or download the Flutter Webview full project from following git repository and make changes to create an app for your website— https://github.com/slamtrade/flutter_webview_app.git

We have created a WebView application for Slamtrade’s Crypto Trading Signals — http://crypto.slamtrade.com/ using Flutter. This is available in Google PlayStore. Please review.

To download the app click on the following link — https://play.google.com/store/apps/details?id=com.slamtrade.cryptosignals

Screenshot from WebView application