DEV Community: Milind Mevada

14 Latest Apps Built Using Flutter Framework

Milind Mevada — Fri, 25 Sep 2020 06:23:51 +0000

Three years ago, if you asked someone about Flutter, they would probably look out the window and point to a small bird flying.

Then 2018 happened, and Tim Sneath from Google announced that Flutter 1.0 is being released to the world of programmers.

The landscape of cross-platform app development has never been the same. Flutter took on heavyweights such as React Native and has been rapidly racing to the top spot in the “best cross-platform app development kit.”

As we write this piece in 2020, there are hundreds of developers out there building a host of apps using Flutter, all with the aim of getting to the top of the App charts.

So in this article, we take a look at:

What makes Flutter so popular among web developers?
What are the top 14 apps built using Flutter?
What happened when the penguin, the polar bear, and the Rabbi walked into a bar?
Where is Flutter headed?

Okay, the answer to №3 may be a bit off-topic, but we got the rest of the questions covered.

Let’s start by seeing what makes Flutter so popular.

What makes Flutter so popular?

Faster coding

The average coder spends less than half of their working day writing code, according to this ActiveState 2019 developer survey. A whopping 61% say they spend most of their working day doing things like testing bugs, attending meetings, and in general, not writing code.

So our developers are already stretched for time, and we want a framework that speeds up development time. This is where Flutter comes in.

Image Credit

Flutter means we can now develop apps faster and in a more dynamic manner. Developers can now code and then see the changes straight away. Called Hot Reload, this function only takes a few milliseconds to take effectand helps teams fix bugs and develop features faster.

Cross-platform nature

Flutter lets you build both iOS and Android apps using the same codebase. This means shorter development times, and also translates to lesser costs since we don’t have to train two sets of developers.

This does not mean Flutter developers have to compromise on the app’s aesthetics or performance. Flutter lets developers build near-native experiences into their apps. Dart, the programming language used in Flutter, is strongly typed and object-oriented.

Due to the object-oriented nature of Dart, the JS bridge is not necessary while creating apps with Flutter. The ahead of time compilation (AOT) also means that the app will startup in less time.

Less testing

When your app has only one codebase, it means your Quality assurance process can be speeded up. Since there is only one code base, developers need to write automated test cases only once.

QA specialists also have more time on their hands since they need to check only one app.

Image source

An interesting note at this juncture. If you have minor differences in your app, then you need to test it on both the platforms, just in case. Flutter apps use a shared codebase, and you can’t exactly predict how certain features work when you build your app using Flutter.

So if a certain button that looks really good on an Android phone but looks all “boxy” on your iPhone, don’t tell us we didn’t warn you.

Here is our pick of the top 14 Flutter apps:

1. Inkino — Movie ticket booking

What do the Finnish do when they are not hiking or taking pictures of their beautiful countryside? Why, they visit the movies, of course!!!

And the InKino app helps them choose a movie super fast, thanks to the intuitive user interface and easy scrolling.

Image credit

With a 40% shared codebase between Flutter and web, InKino is a good example of a multiplatform Dart project.

The Android and iOS app is built using a single codebase. So the next time you are in Finland and need to head to the nearest movie theater, give this Flutter app a shoutout.

2. Music Tutor

Ever wanted to play the piano but didn’t get the time to learn? Reading sheet music becoming a chore for your everyday task? The guys at Music Tutor, a Sight Reading app, saw this problem and decided to solve it using Flutter.

Using the app is as simple as picking up a piano and playing random notes ( although we don’t recommend doing this with an actual piano.. :P ), and the app supports Solfege and German note names.

The app also comes with a sheet music reference chart for treble, bass, and alto clefs. The app is climbing the charts of the App Store as we speak, thanks to the native look and feel of the app.

3. Topline — Music Recording App

Have you ever been on the road and had a song idea pop into your head? Music creators have, and that’s why they have been looking for an app to capture their musical ideas on the fly.

The good folks at Topline saw this gap and created an app to do just that!! TopLine, built using Flutter, helps music creators save an idea as soon as it pops into their heads.

This version of the app on iOS and the Flutter version was created in a record ten weeks. The app lets you record your music, add lyrics, and also share files and sync them easily to the cloud.

Talk about speed and accuracy!! Take a bow, Japanese bullet trains… Take a bow!!

4. Xianyu by Alibaba

When we hear the word Alibaba, Jack Ma, Amazon, and world domination all somehow come into the picture. And that’s what they aimed with their Xianyu app too.

Alibaba’s Xianyu has over 200 million registered users, with a whopping 50 million using Flutter!! That’s a lot of Chinese goods flying around… if you know what we mean.. Wink wink..

Take a look at their own developer story.

When they looked at a framework that was easy to build and scale, Flutter came across as the ideal choice. Some of their most complex pages, which had millions of users scrolling through every minute, are now built on Flutter.

Better watch out, Mr. Bezos. These guys look like they seem business. (Pun intended)

5. Google Ads

While compiling our list for the best Flutter apps, we could not help keep this bad boy out-Google Ads. Google’s easy to use Ad platform lets anyone run their digital marketing campaigns without a hassle.

This may not sound like much for the average Joe who does not know or care about how ad campaigns are run, but for a Digital marketer, Google Ads is manna straight from digital heaven.

Google Ads lets you view critical statistics about your app like impressions, clicks, conversions, and also get real-time support from Google.

Since it is made by Google, it is also super easy to use and understand. Will Google build more awesome products using a framework that they themselves built ( kinda like Inception?).

Only time will tell.

6. Reflectly — Journaling app

Reflectly, the journaling app that everyone loves now was actuallybuilt way back in the summer of 2017 using React Native. But the developers at Reflectly faced a nightmare while trying to achieve the same consistent user experience on both Android and iOS, which forced them to look elsewhere.

This was when Flutter entered the scene, and, although Xamarin had already established itself around the time, the team at Reflectly took a chance with Flutter. Since Flutter uses Dart 2, the developers felt it was easier on the eyes.

The team at Reflectly rewrote the Flutter app in two months and felt that putting together the UI was far easier than they could ever have done.

Reflectly has gone from strength to strength since then, raising $4.3 million in a recent investment round and boosting its user count from 2 million to 10 million in a month.

Talk about Blitzscaling!!

7. Postmuse — Instagram photo editing app

Instagram is the next Facebook. That’s not an overstatement; it is just the way things are. Facebook is seen as something that your old uncle uses to snoop in on your high school graduation pictures.

And since a lot of new businesses are now porting to Insta, it just makes sense to have professional looking Instagram photos. This is where PostMuse comes in.

PostMuse lets you browse through Instagram photo templates, edit them, and even create your own templates.

If picking colours was your issue, PostMuse got you covered there too. The app suggests the best image that you can use so that your profile looks like it was created by a professional Social media marketer.

Happy posting.

8. In10 — Meetup app

Ever been the head of a party planning committee and had to deal with a bunch of people all showing up after the allotted time? The guys at in10 saw this as a major problem statement that could be solved using technology.

In10 allows users to create new events in a very easy to use intuitive user interface, share status updates and ETAs and invite guests to events via SMS.

The user’s privacy is given utmost importance, with users only being able to see the relative distance of the other members of the meetup group to the event location.

So go ahead, meet your friends, cut that cake on time, and be back home to watch the football game on time.

9. Pairing — Tinder using Flutter

Tinder became so popular over the past few years that it has almost found a place in the dictionary, and Swipe Right and Swipe Left have become a part of our daily lingo.

So when the guys at Pairing decided to build a dating app, they wanted to build something more sophisticated. With a UI that looks like Tinder but is much easier to scroll through, Pairing is the perfect example of a popular app that was cloned using Flutter.

There are no targeted ads, and the app uses advanced Math to match your single friends to others who may be interested in a new relationship. Pairing also allows for extended search, allowing you to match with people outside your social circle.

There is also a free chat option with potential matches and friends.

Happy dating!!

10. Traqade — proudly made by SoluteLabs

We at SoluteLabs have been playing around with Flutter ourselves for a while now, and have built a few apps that are rapidly climbing the popularity charts.

Traqade, for example, is an app that allows you to schedule your gym timings and schedule talks with nutritionists.

We took the app from an idea to implementation within a short span of five months!!

11. KlasterMe- Content Sharing

When we were compiling our list of the top apps built using Flutter, we decided that we were going to compile one of the most promising apps way down in the list, just because it just looks so damn sexy!!

KlasterMe allows you to share photos, videos, and any form of content online. They released the pilot version of the app in December 2018, with the iOS and mobile apps being ready to use within a month.

According to the team at KlusterMe, Flutter made the development super-fast, allowing them to go from an MVP to a ready app in a short amount of time. Although the initial learning curve may sound a bit steep for the developers, the awesome documentation provided by the Flutter team made learning the language a breeze.

Users of KlasterMe can create and share content easily on the app, and it looks like Instagram will now have to face some stiff competition down the road.

Like a little student Samurai who may soon overtake the master.

12. Google Pay — Tez

When Google launched its payment app in India close to three years ago, it wanted to create an app that was as simple to use as the search engine. Google Pay was launched in India, and it was called Tez.

The app was super popular, and today, Google Pay has close to 70 million active users, driving transactions of over $10 billion. Google wanted to build a fast and efficient development environment, and looked at Flutter as the go-to language.

With a clean UI that works flawlessly, Tez is an excellent application that showcases how an active app that is used by millions of users can be rewritten flawlessly.

Once its fully migrated, Google pay will become one of the biggest production deployments on the Flutter platform.

Looks like this bird is going to fly far..

13. Synergy — proudly made by SoluteLabs

When a shipping conglomerate got in touch with SoluteLabs to build an app for more than 13000 of its seafarers, we realised in a jiffy that Flutter was the way to go.

Using Synergy, the manning and crewing team got touch with each other easily and seafarers had a breeze of a time while managing their database.

14. Konwene — proudly made by SoluteLabs

Meetups have never been easier thanks to the Konwene app, and when the founders got in touch with us with the idea, we knew in a spark that this was a textbook case for Flutter.

People can use Konwene to plan gatherings, arrange birthday parties, and let their friends or family know about the next upcoming event.

We had the early mover advantage since SoluteLabs adopted Flutter soon after its release, and the team at Konwene were super happy with our agile software development methodology.

And that’s a wrap, folks. We have talked about the thirteen apps that look and feel good, but Flutter is moving at a pace that will put Elon Musk’s SpaceX rocket to shame.

Flutter does have a few disadvantages, like a limited library and above-average app size on your mobile, but our good friends at Google are always working to improve Flutter.

There will be new apps, some as soon as the end of the year, that will look and feel much better than the current native apps.

If you do plan to develop an app using Flutter and want a team that is fun to work with but serious about the code, you can give SoluteLabs a shoutout.

We also have a tonne of resources on Flutter, with “paginating your data in Flutter” being the most popular one. You can read that here.

Fly away, fluttering little bird.. Fly away..

Flutter for Web: How to Deploy a Flutter Web App?

Milind Mevada — Thu, 19 Mar 2020 12:23:12 +0000

With the stable release of Flutter 1.12, Flutter for web is now in the beta channel. But ahead of a beta release, the community has already started building for Flutter web.

While building web apps, deploying it is one of the most essential tasks - be it is for internal QA purposes, for staging, or production environments. Before releasing the Flutter web app, it is required to create a release bundle and a few of the best practices to release, which are explained here in detail.

From my experience of building and deploying apps, I'm going to discuss the Top 5 (IMO) Ways to Deploy Flutter Web Apps. They are:

Firebase Hosting
Github Pages
Netlify
Codemagic Static Pages
AWS S3 (through codemagic)

#1: Firebase Hosting

Step 1: Create a project on Firebase console
Step 2: Download Firebase CLI
Step 3: Login via CLI, execute the command
firebase login

Step 4: Choose "Hosting" when asked for a feature

Step 5: Then, Select an existing Project

Step 6: Choose build/web as a directory & configure as a single-page app

If you see, File build/web/index.html already exists. Overwrite?
Then select **NO. So it will not generate a default index.html file

Step 7: Deploy!

firebase deploy

#2: Github Pages

Pre-requisites: Create a repo on Github.

Step 1: Use this pub

peanut | Dart Package

Execute the command

flutter pub global run peanut:peanut

Step 2: Flutter web-related files will be generated to the separate branch gh-pages (Don't forget to push the branch origin)

Step 3: Change the GitHub pages source branch.

Go to: Repository → Settings → Options → Github Pages → Source branch: select gh-pages

Step 4: Web app will be deployed to

http(s)://<username>.github.io/<build>

#3: Netlify

Pre-requisites: Create an account on https://www.netlify.com/

Approach 1:

Step 1: Drag & Drop build/web folder to dashboard

Step 2: The web app will be deployed and the domain will be given to you.
Step 3 (Optional): The web app can be connected with the custom domain/subdomain.

Approach 2:

Step 1: Use the same peanut pub

peanut | Dart Package

Step 2: Generate web-related files to the gh-pages branch
Step 3: Choose New site from git on the netlify dashboard.
Step 4: Choose the repository & select branch to deploy

Step 4: Deploy Site.

#4: Codemagic Static Pages

Step 1: Connect repository to https://codemagic.io/
Step 2: Go to Settings - Publish - Codemagic static pages
Step 3: Choose your custom subdomain

Step 4: Trigger a build, on the success, it will be deployed to:

https://sub-domain.codemagic.app/

#5: Deploy on AWS S3 (via Codemagic)

Step 1: Log in to your AWS Management Console.
Step 2: Click on your user name at the top right of the page.
Step 3: Click on the Security Credentials link from the drop-down menu.
Step 4: Find the Access Credentials section, and copy the latest Access Key ID.
Step 5: Click on the Show link in the same row, and copy the Secret Access Key.
Step 6: Choose repo on codemagic
Step 7: Go to Settings - Publish - AWS S3 Bucket

Step 8: Fill the Access key ID, secret access Key, and Bucket name
Step 9: Trigger a build, on the success, it will be deployed to an S3 bucket

We have enough approaches to deploy/release a Flutter web app, that can be chosen for the QA environment as well as the production releases. Connecting it with CI/CD like Codemagic will reduce the repeating effort of manual deployments.

Exploring GraphQL with Flutter

Milind Mevada — Sun, 09 Jun 2019 05:23:49 +0000

In this Blog post, Let's discuss Various way available to implement GraphQL with Flutter

First of all, What's this GraphQL?

We are not going in depth about the concept of GraphQL in the post, but here is the short description from an official document

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

GraphQL is developed and now open sourced by the tech team of Facebook, which is a different way to implement APIs in your application. Let's see how we implement this with Flutter

How I will manage this on Flutter?

While you can use normal HTTP GET request to execute Graph Query, Flutter has some cool pubs available which manage this stuffs and make developer's job easy.

If you look for GraphQL client for Flutter, there are good options available like graphql_flutter.

graphql_flutter pub provides a Widget level implementation for Graph Query.
For Example:

Query(
  options: QueryOptions(
    document: readRepositories, // this is a Graph Query
    variables: {
      'nRepositories': 50,
    },
    pollInterval: 10,
  ),
  builder: (QueryResult result, { VoidCallback refetch }) {
    if (result.errors != null) {
      return Text(result.errors.toString());
    }

    if (result.loading) {
      return Text('Loading');
    }

    // it can be either Map or List
    List repositories = result.data['viewer']['repositories']['nodes'];

    return ListView.builder(
      itemCount: repositories.length,
      itemBuilder: (context, index) {
        final repository = repositories[index];

        return Text(repository['name']);
    });
  },
);

This is a very high-level widget implementation which will manage the networking from Widget itself.

But, How I will separate the Network layer in my App? 🤷

Yes!, This is what we also questioned. As we are using BLoC architecture in one of our Flutter application, this implementation was surely not granular to suits.

To answer this question, We analyzed the internal implementation of this pub. Here is the outcome.

Implement GraphQL on BLoC way

Here is a nice pub available graphql_client. This is the same pub which has been used underlying by graphql_flutter. By this, we should be able to separate a network layer in App

Let us take an example of Github Graph API

Let's dive into the code directly

Step 1: Basic Setup

//Provide a Base URL
final HttpLink _httpLink = HttpLink(
  uri: 'https://api.github.com/graphql',
);

//Provide authentication, this will go as a Header in Request
final AuthLink _authLink = AuthLink(
  getToken: () async => 'Bearer $GITHUB_TOKEN',
);

final Link _link = _authLink.concat(_httpLink as Link);

GraphQLClient _client;

// Create a common client for further requests
GraphQLClient getGraphQLClient() {
  _client ??= GraphQLClient(
    link: _link,
    cache: InMemoryCache(storageProvider: () {
      return getTemporaryDirectory(); // Provide a cache mechanism
    }),
  );

  return _client;
}

Step 2: Repository Layer

class GitHubRepoProvider {
// method will give us Data model
  Future<List<GithubRepo>> getCurrentUserRepos() {
    return getGraphQLClient().query(_queryOptions()).then(_toGitHubRepo);
  }

// provides Graph Query options, we can provide the optional variable here
  QueryOptions _queryOptions() {
    return QueryOptions(
      document: readRepositories,
      variables: <String, dynamic>{
        'nRepositories': 50,
      },
    );
  }

// parse JSON to Data model
  List<GithubRepo> _toGitHubRepo(QueryResult queryResult) {
    if (queryResult.hasErrors) {
      throw Exception();
    }

    final list =
        queryResult.data['viewer']['repositories']['nodes'] as List<dynamic>;

    return list
        .map((repoJson) => GithubRepo.fromJson(repoJson))
        .toList(growable: false);
  }
}

// Graph Query to get repository of current user
const String _readRepositories = r'''
  query ReadRepositories($nRepositories: Int!) {
    viewer {
      repositories(last: $nRepositories) {
        nodes {
          name
          createdAt
          forkCount
        }
      }
    }
  }
''';

Bingo 👍. We now have a Data model. Covert your DataModel into ViewModel from the BLoC 😉

You can see the full working demo Application here 👇. (Don't forget to edit config.dart file to add your Github API token)

milind-mevada-stl / Flutter-GraphQL-Demo

This Project shows demo of GraphQL implementation in Flutter

Flutter GraphQL Demo

This application shows demo of GraphQL implementation in Flutter using GraphQL Client. Checkout more on our blog post here.

Getting Started

Clone and edit config.dart file, Add your personalized Github API token to get started.

View on GitHub

Provide your ideas/suggestions in the comment section or hit me a tweet 👉

Milind Mevada

@milindmevada

Exploring #GraphQL on #Flutter. Using GraphQL client pub.

Here is a sample demo application github.com/milind-mevada-…

Thanks @SmitSonani for quick code review.

@FlutterDev @FlutterAHM @FlutterComm @r_FlutterDev @FlutterWk @dart_lang @prasadsunny1

09:50 AM - 30 May 2019

1 13

Flutter & Dart From Google I/O '19

Milind Mevada — Mon, 03 Jun 2019 05:35:27 +0000

This year the developer community was undoubtedly anticipated for Flutter announcement from Google I/O '19 and YES 🤩 Google didn't disappoint them. 🤟

Here are the top announcements Google made for Flutter

Flutter 1.5 on Stable Channel 🎉

Flutter the core framework receives an upgrade during I/O '19. This release includes hundreds of changes from the response of developer feedback. It also includes the update to Material and Cupertino widgets.
As the framework becomes more mature Google is now investing in building supporting ecosystem, as part of that initial support to the in-app purchase lands on Flutter. ML Kit Custom Image Classifier also announced which is built using Flutter and Firebase.

Flutter: Now for all the Screens 😍

The best framework for developing beautiful experiences now supports Mobile, Web, Desktop, and Embedded device. And all this using Single Codebase.

Flutter has provided an embedding API which allows Flutter to be used in scenarios like home 🏠, automotive 🚗 and beyond. There is already a sample published to demonstrate Flutter on Raspberry-pi.

Flutter for the Web 🌐

In this Google I/O first Technical Preview of Flutter for the Web was released. While this is still in development, but it’s already available for the developer community to try, build and provide early feedback. The community didn’t wait to try this out, See the sneak peeks here, here and lots of other here.

Dart 2.3: Flutter’s language featuring UI-as-code 💻

With Flutter 1.5 Dart 2.3 is also available now. which has to offer us reach features like ui-as-code, spread operator, collection if and collection for.
With all these luxury features Dart is indeed a better Language for UI.

Check out all latest Dart features here.

See what has been made with 5 KB or less code of Dart 😉

The Google team had challenged the community to build something unique with less than 5 KB of dart code. The winners of the challenge announced during I/O event and here are the eye-catching results.

Promising? Do you want to Start learning Flutter? ✅

Google has announced a comprehensive new training course for Flutter to start learning Flutter from The App Brewery team. The course has contents for Flutter which includes videos, demos, and code labs.

Now Fastest Growing Skill among Software Engineers 🥳

Last but not least, According to a recently conducted study by Linkedin Flutter is the fastest Growing Skill among Software Engineers.