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

Sam Joseph
Feb 19, 2019 · 3 min read

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.0import '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 Signalshttp://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

Slamtrade

A Blockchain & Crypto Financial Technology Firm

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store