What About DartPad, How Can We Embed Flutter App in a Website?

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

Author image By Manish Patel  |  Wednesday, May 27, 2020 12:35 PM  |  3 min read  |   6

Embed Flutter App

Flutter is a framework that creates a native app for android and iOS. And has now started with the web. This 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 on 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:

DartPad site

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 web pages.

Instead of hosting the Flutter application, you can make a simple application. The application should work on the web and share 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 is built on DartPad, you can copy-paste it on the 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 the 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 is defined as a garbage collector language. Whereas, DartPad uses Dart language, which helps to embed the Flutter app on a website. If you’re interested in playing with Flutter. Hire flutter app developer and customize your site.

 

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

Contact Us

 

 


Author image

Manish Patel

Manish Patel is a Co-Founder of Concetto Labs, a leading mobile app development company specialized in android and iOS app development. We provide a one-stop solution for all IT related services.

Why Our Client Love Us?

  • Fast kick-off
  • Agile Ready
  • 98% Client Retention
  • 360-Degree solutions

Our integrity and process focuses largely on providing every customer the best recommendations for their respective business. Our clients become recurring customers because we always go beyond their expectations to deliver the best solutions.

Get In Touch
Mr. Sieva Savko
Customer for over 4 years Mr. Sieva Savko Norway

Concetto Labs have provided us with a tremendous amount of help. Their competence in various IT fields led to a positive outcome while facing different challenges. A lot of value was given by their helpful professional staff. To describe this company in three words: effectiveness, collaboration, trust. I would also like to personally thank Mr. Tejas Patel for his positive, friendly, and highly competent approach. The all-around support provided by him made every task at hand a no-brainer.

Miss. Caroline Jack
Customer for over 4 years Miss. Caroline Jack South Africa

It has been an absolute pleasure working with the Concetto Labs team! We have worked together on a few projects now, all of which have been successful. You can rely on good communication and response times from these guys. And they go above and beyond to ensure that the result is achieved. Because of their great service, they have become an integral part of our business and we will continue to use them going forward.

Mr. Richard Bartlett
Customer for over 3 years Mr. Richard Bartlett United States

Concetto Labs is a group of incredibly talented individuals. They are very responsive and communicate with you each and every step of the process. I worked with Manish Patel throughout the entire process and must say that I have never conducted business with a more honest and professional individual. Together with his team, Manish created www.travcentiverewards.com exactly how we envisioned it to be. Thanks for all of your hard work.

Mr. Conrad Abraham
Customer for over 2 years Mr. Conrad Abraham United States

Concetto Labs team is my go-to for any simple or complex development projects. They have risen to the challenge. Great project management, communication, and super quick turnaround. I’ve done multiple projects with them and don’t plan on changing that.

Mr. Edward Chin
Customer for over 4 years Mr. Edward Chin Canada

Concetto Labs was able to bring my complex idea to life. Throughout the project, Concetto Labs maintained constant communications and was always professional - considering I had no experience in what I wanted to create their welcoming attitude, patience, and knowledge in the field created the perfect environment to work in. I was so impressed with their work that I've kept them on board as my go-to experts. Thanks for the worthwhile experience and the breathtaking product.

Karuna Govind
Karuna Govind CTO & Co Founder (Coupay) London, UK

We started working with Concettolabs due to the influx of work on mobile (Flutter) and frontend (React.js). It's been fantastic working with them. Good, consistent communication and good quality of work means they may be our first choice for many projects to come.

GlobalClients
Good Firms Clutch App Futura Microsoft Associate Mobile App Top Developers Gesia
 

Ahmedabad

303-309, City Center, Science City Road,
Ahmedabad - 380060
 

Broomfield

2355 Prospect LN,
Broomfield CO-80023
 

Oshawa

1557 Clearbrook Dr,
Oshawa, ON L1K 2P6
 

Ilford

6 Hastings Avenue,
Ilford, IG6 1DZ, UK
 

Bodo

Lille Hunstad 4A,
8019 Bodø