What’s so Great About DartPad, How Can We Embed Flutter App in a Website?

Flutter is a framework that creates a native app for android and iOS. And has now started with the web. Which means you can now create a website using Flutter. DartPad an open-source tool allows using Dart language for any modern browser. It comes with several pages in this site especially codelabs that have to embed Dartpads. To get started with this, you need to visit the DartPad site (dartpad.dev).

Flutter Dartpad looks like below:

How to Get Started With Dartpad Flutter Online?

• Open DartPad: A sample shown above will open on the left, and you’ll get output on the right. Click on New pad to get the previous screen.
• Click on Run to get updated output
• Choose HTML sample and check output again
• Click on Console to view the sample’s console output
• On the left, click on HTML tab and see the sample’s HTML markup

How to Create a Command-Line App?

• Click on the new pad and make sure you discard the change.
• Clear the show web content at the bottom right so HTML and CSS tabs will disappear
• Change the code as per your need. Here DartPad will show the hints and autocomplete suggestions.
• Click on the Format button. Ensure the code you have written has proper spacing, indentation, and line-wrapping.
• Now, Run your application

I hope you’re clear about the installation and working of Flutter DartPad. Let’s move on with embedding code in webpages.

Instead of hosting the Flutter application, you can make a simple application. The application should work on the web and share it with others. It comes with powerful and useful features that we can’t even imagine. Here we have a list of steps that helps in the Dartpad embed Flutter app. According to Jose Alba, a developer at Google said: There are two ways to create a DartPad instance.

• Using a Gist File
• Using a GitHub Repo

Let’s understand in brief how it works:

Using a Gist File

As explained above, open DartPad and create an application. You can write code in the main.dart file in flutter application. Flutter app Developer can use the editor to be aware of the DartPad limitations. Where suppose one limited Dart file can’t import non-Dart libraries.

Note that the below import package example tells DartPad that this is a Flutter Application.

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: ‘Flutter Demo’,

debugShowCheckedModeBanner: false,

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: MyHomePage(),

);

}

}

class MyHomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(‘Flutter Applcation Embedded in Website’),

),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text(

‘The Gist URL to this website is:’,

textAlign: TextAlign.center,

),

Text(

‘https://gist.github.com/JoseAlba/a205e21aa0d0a64fe7c977107ce22cbf n’,

textAlign: TextAlign.center,

),

Text(

‘The Dartpad URL to this website is:’,

textAlign: TextAlign.center,

),

Text(

‘https://dartpad.dev/a205e21aa0d0a64fe7c977107ce22cbf n’,

textAlign: TextAlign.center,

),

Text(

‘The iFrame code is:’,

textAlign: TextAlign.center,

),

Text(

‘<iframe src=”https://dartpad.dev/embed-flutter.html?id=a205e21aa0d0a64fe7c977107ce22cbf”></iframe> n’,

textAlign: TextAlign.center,

),

Text(

‘This Flutter application might be within an iFrame. n’,

textAlign: TextAlign.center,

),

],

),

),

);

}

}

Source: Hosted by Github

As soon as the Flutter app built on DartPad, you can copy-paste it on new gist file. The new gist file on GitHub can be either Public or Private. Check the file name on your main.dart before sharing code. If you found any errors you can look at DartPad Sharing Guide. To test the file, you can check on gist that’s available on DartPad. For DartPad Embed Flutter app, you can get most of the information from DartPad Embedding Guide.

Using a GitHub Repo

If you’re planning to create a repository, then there are few files that you can use.

• dartpad_metadata.yaml (MANDATORY)
• hint.txt (OPTIONAL)
• main.dart (MANDATORY)
• solution.dart (OPTIONAL)
• test.dart (OPTIONAL)

If you have one Dart file, then you need to use dartpad_metadata.yaml and main.dart rest all are optional. Suppose you need to test the file then without using runApp() method, you can test the application. As main. Dart and test.dart considered as a single file.

Moving on, if you want to import the material package from main.dart the use test.dart. DartPad instance will load the file. But to load the folder, you need to have following access into DartPad.

• gh_owner: Owner of the GitHub account.
• gh_repo: Name of the repo within the above account.
• gh_path: Path to a dartpad_metadata.yaml file within the repo.
• gh_ref: (optional) Branch to use when loading the file. Defaults to master.

Source: Flutter in DartPad

Final Thoughts

Dart is a mobile-friendly object-oriented class and defined as a garbage collector language. Whereas, DartPad uses Dart language, which helps to embed Flutter app on a website. If you’re interested in playing with Flutter. Hire a flutter app developer and customize your site.