Easy | 250 Points | Topcoder Skill Builder Competition | Flutter | Build a Basic App

Key Information

Register
Submit
Competition Timeline

Timezone:Etc/UTC

Registration

Starts

Sep 06, 2021

18:23

Ends

Oct 06, 2021

18:24

Submission

Starts

Sep 06, 2021

18:44

Ends

Oct 06, 2021

18:44

Review

Starts

Oct 06, 2021

18:45

Ends

Oct 19, 2021

18:44

Appeals

Starts

Oct 19, 2021

18:44

Ends

Oct 20, 2021

18:44

Winners Announced

Oct 21, 2021

06:44

Challenge Overview

This is the 250 points Easy level problem of Topcoder Skill Builder Competition for Flutter. For more challenge context info Register for the Host Competition before submitting a solution to this problem. In all the three Flutter Skill Builder competitions, you need to develop the app in Visual Studio Code using the Flutter Extension Pack.

Set up your Flutter Environment

-- Download the Flutter SDK here.
Follow the instructions to install for your platform.

-- Download Visual Studio Code from here and install it. Run Visual Studio and Install the Flutter plugin:

  • From the top menu, select View > Command Palette….
  • Type “install”, and select Extensions: Install Extensions.
  • Type “flutter” in the extensions search field, select Flutter in the list, and click Install. This also installs the required Dart plugin.
  • Validate your setup in the Command Palette by typing “doctor” and then selecting Run Flutter Doctor.

You will need either an Android or iOS emulator.

The Android emulator will require an Android Studio installation.
The iOS emulator requires an Xcode tools installation.

Create the initial view

  • From the menu, select View > Command Palette.
  • Type “flutter”, and select the Flutter: New Application Project.
  • Name the project vintage_games, and press Enter.
  • This will create a project that includes a file named main.dart.

    We will mostly be editing the code in lib/main.dart.

    Replace the contents of the code in lib/main.dart with the starter code in the forum.

  • Change the AppBar title to:

Bruce’s Retro Games

  • The tiles, or elements, we’re creating will later contain the images of the retro games in Bruce’s collection. Use the gridview widget to implement this.

  • Use the count constructor and set the parameters to:

crossAxisSpacing: 10
mainAxisSpacing: 10
crossAxisCount: 2

Help Link: Widget Catalog

Run your app by connecting your emulator to VS Code.
You may also run your app locally in the browser at this point.

Technology Stack

  • Dart
  • Flutter
  • Android Studio
  • VS Code

Learning Resources

DART Language Tour
Running a Flutter App

Important Notes

  • Please use the correct naming convention for your code (refer to the forum post.)
  • This contest is part of the Flutter Skill Builder Contest.
  • Successfully completing the task will earn you 250 points on the Flutter Development Skill Builder Leaderboard.

Problems

  • Easy: 250 Points - This contest
  • Medium: 500 Points
  • Hard: 1000 Points*

Final Submission Guidelines

  • The source code of your Flutter project.
  • Deployment guide and validation document.
  • A demo video to verify that your submission meets all the requirements (Optional).

ELIGIBLE EVENTS:

2022 Topcoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30204329