Learning Series - Flutter - Challenge 1 - Write your first app

Challenge Overview

This is a fun challenge. We will randomly pick 10 members from the ones who submitted a correct submission as the winner! Each winner will receive $15.

 

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.

 

The major components of Flutter include:

• Dart platform: Flutter apps are written in the Dart language and make use of many of the language's more advanced features.

• Flutter engine: Flutter's engine, written primarily in C++, provides low-level rendering support using Google's Skia graphics library. Additionally, it interfaces with platform-specific SDKs such as those provided by Android and iOS.

• Foundation library: The Foundation library, written in Dart, provides basic classes and functions which are used to construct applications using Flutter, such as APIs to communicate with the engine.

• Design-specific widgets: The Flutter framework contains two sets of widgets which conform to specific design languages. Material Design widgets implement Google's design language of the same name, and Cupertino widgets implement Apple's Human Interface Guidelines iOS design

 

Compared to other frameworks, Flutter has the following advantages

• High productivity. Since Flutter is cross-platform, you can use the same code base for your iOS and Android app. This can definitely save you both time and resources.

• Great performance. Dart compiles into native code and there is no need to access OEM widgets as Flutter has its own. This means less mediated communication between the app and the platform. Flutter is the only mobile SDK that provides reactive views without requiring a JavaScript bridge. Other SDK, like React Native requires a Javascript bridge to translate JSX to the commands that drives the native elements.

• Fast and simple development. One of the most lauded features of Flutter is hot reload which allows you to instantly view the changes made in the code on emulators, simulators and hardware. In less than a second, the changed code is reloaded while the app is running with no need for a restart.

• Compatibility. Since widgets are part of the app and not the platform, you'll likely experience less or no compatibility issues on different OS versions. This in turn means less time spent on testing.

• Open-source. Both Flutter and Dart are open-source and free to use, and provide extensive documentation and community support to help out with any issues you may encounter.

 

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 this challenge, you will follow the guide in Google Codelabs to write your first Flutter app.

Finally, you will build an app like below:

You will need to complete both Part 1 and Part 2 of the tutorial.

What will you learn?

From Part 1, you will learn

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

• Basic structure of a Flutter app

• Finding and using packages to extend functionality

• Using hot reload for a quicker development cycle

• How to implement a stateful widget

• How to create an infinite, lazily loaded list

From Part 2, you will learn

• How to add interactivity to a stateful widget.

• How to create and navigate to a second screen.

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

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

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 follow the guideline step by step in Google Codelabs to write your first Flutter app, then you need to submit your code and a video to showcase your demo app (in either Android or iOS emulator/real devices).

 

This is a fun challenge. We will randomly pick 10 members from the ones who submitted a correct submission as the winner! Each winner will receive $15.

 

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