Learning Series - Flutter - Challenge 2 - Play with Google Map

Challenge Overview

F

This is a fun challenge. Top 10 members will be awarded a cash prize. The winner will receive $100, the remaining 9 members will receive $25 each.

 

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

 

Flutter is the next generation cross-platform development framework. The stable version was released in 2018, and it is more and more popular during the recent years. Flutter is a young but useful technology, you will never regret spending time learning it.

Learning Series - Flutter series challenges are exactly for guiding you to enter the Flutter world! The series will consist of 3 Challenges, Blogs, Tutorials and Forum Discussions to help you Learn Flutter and Make Quick Apps.

 

You can also win Cash Prizes!

 

While you learn Flutter with us we are encouraging you to help the community know about the interesting apps you make while you learn. Compete in all three challenges, make apps and submit a Step by Step Guide - "Build an App using Flutter" article for Topcoder Thrive.  The articles should be beginner friendly and explain concepts wherever possible. Best five article and app submissions will win $100 each! 

Requirements for this challenge

In the last challenge, by following the step-by-step guide in the tutorial Part 1 and Part 2, you wrote your first app and learned

• How to write a Flutter app that looks natural on iOS, Android, and the web

• Basic structure of a Flutter app

• How to create an infinite, lazily loaded list

• How to change the look of an app using themes.

• How to create and navigate to a second screen.

In this challenge, we want you to build something more interesting, which plays with Google Maps.

 

You need to write an app that integrates Google Maps. Here is a tutorial about how to add Google Maps to a Flutter App. 

 

But we would like to make the challenge a bit harder than the 1st challenge, then you are not just following a step-by-step guide, we hope you can do more than just simply adding Google Maps to your app. Your app needs to leverage Google Maps to implement some useful or interesting features.

 

For example,

• Provide a search bar to search for a place and mark it on Google Map.

• Find the Ice Cream Stores (Or any other places) in your city (or any other city), and list the details of each store.

• Locate the user’s current place and mark it.

• Coronavirus related. Like you can find the data from the Internet and mark which places have infections, etc.

• etc...

 

The requirement of this challenge is open, the features of your app contains but not limited to the examples above. As long as your app integrates Google Maps.

 

Hree is an example app to show Ice Cream Stores in San Francisco. This video teaches you how to build this app.

What will you learn?

• How to write a Flutter app that looks natural on iOS, Android, and the web

• Basic structure of a Flutter app

• How to configure a Google Maps Flutter plugin.

• How to add Markers to a map, using location data from a web service.

• Enhance the skills you learned from the previous challenge.

You will also learn some basics of the Dart language. Here is a tutorial to help you learn Dart more deeply.

If you didn’t participate in the previous challenge and don’t know Flutter, no worries, just follow the following step-by-step guide to get started!

• Write your first Flutter app Part 1 https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0

• Write your first Flutter app Part 2: https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0

Further learning resources

Learn more about the Flutter SDK:

• Building layouts in Flutter tutorial

• Add interactivity tutorial

• Introduction to widgets

• Flutter for Android developers

• Flutter for React Native developers

• Flutter for web developers

• Flutter's Youtube channel

Other resources include:

• Build Native Mobile Apps with Flutter (a free Udacity course)

• Flutter cookbook

• From Java to Dart codelab

• Bootstrap into Dart: learn more about the language

Scoring guideline

You need to write an app that integrates Google Maps, and implements at least 1 new feature that was not mentioned in this tutorial.

 

Then you need to submit your code and a video to showcase your demo app (in either Android or iOS emulator/real devices).

 

We will review your submission subjectively, the more interesting and useful your app is, the higher rank you will get.

 

Top 10 members will be awarded a cash prize. The winner will receive $100, the remaining 9 members will receive $25 each.

 

Looking forward to your great submission and enjoy Learning!

Final Submission Guidelines

Submit a zip archive, including

• The full source code of your Flutter project

• A video to showcase your demo app (in either Android or iOS emulator/real devices). Please upload your video elsewhere (like in Youtube, Google Drive, Dropbox etc) and share the link in your submission.

• A simple README about how to deploy and run your code