Convert Website to Flutter App

Create Free Backend With Appwrite

Convert Website to Flutter App

This part will teach you how to turn a website into a Flutter application. You can convert any website to flutter app using the webview_flutter package. This package is used to convert any website to flutter app.

Step 1: Create a Flutter Project

We will convert google.com website to flutter app. So, create a flutter project using the below command.

flutter create website_to_flutter_app

Step 2: Add Package

Add webview_flutter package to your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.1

Step 3: Add Code

Add the below code to your main.dart file.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Controller
  final WebViewController controller = WebViewController()
    ..loadRequest(Uri.parse('https://www.google.com'));
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Google Website'),
          ),
          body: WebViewWidget(controller: controller)),
    );
  }
}

Step 4: Run App

Run your app using the below command.

flutter run

Convert HTML to Flutter App

You can also convert website content to dart variable and then use it in your flutter app. For example, you can convert the below html code to dart variable and then use it in your flutter app.

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

String htmlContent = '''
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
''';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // Controller
  final WebViewController controller = WebViewController()
    ..loadHtmlString(htmlContent);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Google Website'),
          ),
          body: WebViewWidget(controller: controller)),
    );
  }
}

Permissions

You need to add internet permission in your AndroidManifest.xml file. For iOS, you don’t need to add any permission.

<uses-permission android:name="android.permission.INTERNET"/>

Conclusion

Congratulations, you have successfully converted website to flutter app.