Build native mobile apps with Flutter

Last update: May 13, 2022

Build Native Mobile Apps with Flutter

This repo has been archived and is no longer maintained

This repo contains code for Build Native Mobile Apps with Flutter, by Google and Udacity. It's no longer being maintained and may contain out of date references or use deprecated APIs.

Building the Complete Unit Converter App

Android Studio/IntelliJ

  1. Open the IDE and select Import project (Gradle, Eclipse ADT, etc.). After you import the first time, you can use Open an existing Android Studio project in the future.
  2. Choose the unit_converter project folder, located in this repo at /unit_converter/unit_converter. Select Next for all setup instructions, making sure that the Source Files screen shows Flutter as an option.
  3. You can view your Flutter app files in the Projects tab in the Project Tool Window (View -> Tool Windows). Make sure your Flutter SDK is set and dependencies have been updated.
  4. Make sure your device/emulator is running. You can view the AVD Manager at Tools -> AVD Manager, or by typing Ctrl/Cmd + Shift + a and typing in 'AVD Manager'.
  5. Press the green Play button to run the app. Note that main.dart should be chosen in the dropdown on the left of the green Play button.

Command Line

  1. Run cd ~/<repo location>/unit_converter/unit_converter.
  2. Make sure your device/emulator is running.
  3. Run flutter run.

Building Each Coding Exercise

Each coding exercise for the Udacity course is located in the course directory. Each exercise is split into a standalone Task project and Solution project. The Solution is one of many possible solutions. You can compare your implementation with the solution using the diff command.

Android Studio/IntelliJ

  1. Open the IDE and select Import project (Gradle, Eclipse ADT, etc.). After you import the first time, you can use Open an existing Android Studio project in the future.
  2. Find the coding exercise you want to do and choose the task_ project folder. For example, for the second coding exercise, 02_category_widget, choose the task_02_category_widget project located in this repo at /course/2_category_widget/task_02_category_widget.
  3. You can view your Flutter app files in the Projects tab in the Project Tool Window (View -> Tool Windows). Make sure your Flutter SDK is set and dependencies have been updated.
  4. Make sure your device/emulator is running. You can view the AVD Manager at Tools -> AVD Manager, or by typing Ctrl/Cmd + Shift + a and typing in 'AVD Manager'.
  5. Press the green Play button to run the app. Note that main.dart should be chosen in the dropdown on the left of the green Play button.
  6. Follow the README and complete the TODOs in the coding exercise.

Style Guide

Use strong mode.

Contribution Guidelines

Please feel free to file issues at https://github.com/flutter/udacity-course/issues. Flutter issues can be filed at https://github.com/flutter/flutter/issues.

You can also contribute changes. Setting up:

  1. Fork https://github.com/flutter/udacity-course into your own GitHub account
  2. git clone [email protected]:<your_name_here>/udacity-course.git
  3. cd udacity-course
  4. git remote add upstream [email protected]:flutter/udacity-course.git

Submitting changes:

  1. git fetch upstream
  2. git checkout upstream/master -b name_of_your_branch
  3. Make changes
  4. git commit -a -m "<your informative commit message>"
  5. git push origin name_of_your_branch

To send a pull request:

  1. git pull-request (if you are using Hub) or go to https://github.com/flutter/udacity-course and click the "Compare & pull request" button
  2. Tag the relevant people and GitHub issue (if any)

Resources

For a list of Flutter resources to help you get started as well as continue learning after the course, check here.

GitHub

https://github.com/flutter/udacity-course
Comments
  • 1. Can't test solution for task 09

    Hi,

    I can't test solution for task 09. Got the error:

    Syncing files to device iPhone X...
    [VERBOSE-2:shell.cc(181)] Dart Error: Unhandled exception:
    'file:///Users/antonsavinov/Documents/My%20Documents/TestProjects/flutterUdacity/task_09_real_units/lib/unit.dart': error: line 25 pos 16: lib/unit.dart:25:16: Error: Can't access 'this' in a field initializer to read 'name'.
            assert(name != null),
                   ^^^^
            assert(name != null),
                   ^
    #0      _CategoryRouteState._retrieveLocalCategories.<anonymous closure>.<anonymous closure> (file:///Users/antonsavinov/Documents/My%20Documents/TestProjects/flutterUdacity/task_09_real_units/lib/category_route.dart:103:21)
    #1      MappedListIterable.elementAt (dart:_internal/iterable.dart:414:29)
    #2      ListIterable.toList (dart:_internal/iterable.dart:219:19)
    #3      _CategoryRouteState._retrieveLocalCategories.<anonymous closure> (file:///Users/antonsavinov/Documents/My%20Documents/TestProjects/flutterUdacity/task_09_real_units/lib/category_route.dart:104:10)
    #4      Iterable.forEach (dart:core/iterable.dart:277:30)
    #5 <…>
    

    Looks like some issues are in this piece of code:

    var index = 0;
        jsondata.keys.forEach((key) {
          dynamic someData = jsondata[key];
          final List<Unit> units = someData.map((data) {
            return Unit.fromJson(data);
          }).toList();
          var category = Category(
            name: key,
            units: units,
            color: _baseColors[index],
            iconLocation: Icons.cake,
          );
          setState(() {
            if (index == 0) {
              _defaultCategory = category;
            }
            _categories.add(category);
          });
          index += 1;
        });
    

    But I investigated solution from Udacity course and got the same error. So could someone look at it, please?

    Reviewed by SavinovJr at 2018-09-09 11:30
  • 2. Error in dependences

    I have an error when I run an Android Devices, but it's working correctly with iOS Devices.

    I just to start my app without modifies.

    This error:

    Launching lib/main.dart on Android SDK built for x86 in debug mode... Initializing gradle... Resolving dependencies...

    • Error running Gradle: Exit code 1 from: /Users/alejandromeseguersilvestre/Desktop/Alumbrado/alumbrado_flutter/alumbrado_flutter_app/android/gradlew app:properties: Project evaluation failed including an error in afterEvaluate {}. Run with --stacktrace for details of the afterEvaluate {} error.

    FAILURE: Build failed with an exception.

    • Where: Build file '/Users/alejandromeseguersilvestre/Desktop/Alumbrado/alumbrado_flutter/alumbrado_flutter_app/android/app/build.gradle' line: 25

    • What went wrong: A problem occurred evaluating project ':app'.

    Could not resolve all files for configuration 'classpath'. Could not find lint-gradle-api.jar (com.android.tools.lint:lint-gradle-api:26.1.2). Searched in the following locations: https://jcenter.bintray.com/com/android/tools/lint/lint-gradle-api/26.1.2/lint-gradle-api-26.1.2.jar

    • Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 1s

    Finished with error: Please review your Gradle project setup in the android/ folder.

    Reviewed by alexmeseguer at 2018-10-23 11:08
  • 3. Add unit dropdown

    • Sets up the interactive (not static) unit converter (https://github.com/flutter/udacity-course/issues/3)
    • Adds grid view for each Unit Category. Tapping on each grid item routes you to a converter page.
    • Adds Text Input and Dropdown for each unit (https://github.com/flutter/udacity-course/issues/7)

    Future PRs will update the UI and do the conversion math.

    grid converter

    Reviewed by maryx at 2017-09-29 17:53
  • 4. [dart] The named parameter 'name' isn't defined.

    Why does vscode have to be restarted in order to avoid the following three problems:

    [dart] The named parameter 'name' isn't defined.
    [dart] The named parameter 'color' isn't defined.
    [dart] The named parameter 'icon' isn't defined.
    

    Error displayed: image

    From the starting point of task_02_category_widget, I only made the following two changes: lib\main.dart: image

    lib\category.dart: image

    I haven't found a way to "refresh" vscode to read the updated Category class without closing and restarting vscode. I spent hours trying to figure out why I was getting these errors and then after shutting down, walking away, and coming back later, it just worked. I tracked it down to restarting vscode. There should be a way to force a refresh without having to close and reopen the editor.

    Is this a vscode problem, a flutter problem, or a dart problem?

    Reviewed by Simpler1 at 2018-05-17 13:54
  • 5. The Constructor of Cateogry , As per dart documentation it is not understandable.

    Hello Everyone, I am new to flutter , I was going through the code and I find the const Category() constructor not understandable , First , what is the role of key in this ? Second , why did we used curly braces inside the constructor , Third , how assert works here ?

    Please give more comments on this part.

    Reviewed by gaurav1999 at 2018-05-18 21:25
  • 6. The Function 'MaterialApp' isn't defined.

    capture Hi guys, I have started to learn flutter from a course at udacity.com. They have asked to copy the code and paste it into the main.dart file. I have done that and I got this Error The Function 'MaterialApp' isn't defined. I googled that error but it seems to be so hard to find the answer. Can anyone help?

    Reviewed by SimonPeter1909 at 2018-08-26 07:01
  • 7. [Quiz 2x9] Bottom Overflowed by pixel

    Got an erroneous output when building the input/output widget stuff

    image

    Syncing files to device iPhone X...
    flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
    flutter: The following message was thrown during layout:
    flutter: A RenderFlex overflowed by 41 pixels on the bottom.
    flutter:
    flutter: The overflowing RenderFlex has an orientation of Axis.vertical.
    flutter: The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
    flutter: black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
    flutter: Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
    flutter: RenderFlex to fit within the available space instead of being sized to their natural size.
    flutter: This is considered an error condition because it indicates that there is content that cannot be
    flutter: seen. If the content is legitimately bigger than the available space, consider clipping it witha
    flutter: ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
    flutter: like a ListView.
    flutter: The specific RenderFlex in question is:
    flutter:   RenderFlex#8a006 relayoutBoundary=up2 OVERFLOWING
    flutter:   creator: Column ← Padding ← ConverterRoute ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ←
    flutter:   CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
    flutter:   _InkFeatures-[GlobalKey#4d70c ink renderer] ← NotificationListener<LayoutChangedNotification>←
    flutter:   PhysicalModel ← ⋯
    flutter:   parentData: offset=Offset(16.0, 16.0) (can use size)
    flutter:   constraints: BoxConstraints(0.0<=w<=343.0, 0.0<=h<=389.0)
    flutter:   size: Size(343.0, 389.0)
    flutter:   direction: vertical
    flutter:   mainAxisAlignment: start
    flutter:   mainAxisSize: max
    flutter:   crossAxisAlignment: stretch
    flutter:   verticalDirection: down
    flutter: ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
    flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════
    
    🔥  To hot reload your app on the fly, press "r". To restart the app entirely, press "R".
    An Observatory debugger and profiler on iPhone X is available at: http://127.0.0.1:8100/
    For a more detailed help message, press "h". To quit, press "q".
    

    Tried with solution code and got the same error?

    Reviewed by 17twenty at 2018-06-04 08:07
  • 8. Opening unit_converter for the quizz

    I can't load up the unit converter. I used the git download code in flutter console and it downloaded fine. I try to import it and it does not seem to find out it's a flutter app. If I just open it, it's full of errors... What am I doing wrong?

    Reviewed by ReddMonkey2018 at 2019-04-30 01:02
  • 9. Should we close this issues database?

    cc @maryx @mjohnsullivan

    Do you want to keep this repository's issues database around? Generally we put things in the main flutter/flutter issues list. Either way is fine, I'm just checking on what your desires are.

    Reviewed by Hixie at 2018-07-02 21:37
  • 10. Added Resources From Udacity Course

    I really liked the list of resources that show up at the end of the course, and I went to reference them from the repository but noticed they weren't there (or I couldn't find them), so I just copy pasted the list from Udacity. I thought it would be helpful to have everything consolidated within the repo as well.

    Reviewed by AdamMc331 at 2018-06-16 17:13
  • 11. remove PATENTS, move font to third_party

    • Removes PATENTS
    • Removes the OFL license text from the LICENSE
    • Adds a NOTICES file per project (not used; we don't distribute binaries, and nor does Flutter code currently recognize the NOTICES file). The NOTICES file contains 1) LICENSE, 2) OFL
    • Moves Raleway font and license to root /third_party dir
    • Copies Raleway font and license to /third_party inside each subproject that uses it
    Reviewed by maryx at 2018-04-11 22:58
  • 12. API access is via `dart:io` which won't work in a web browser

    So I've found several errors on the sample code, which I've been able to fix by myself (mainly @required notation which seems to be deprecated). But on Lesson 7 I haven't been able to find a workaround. People reading this repo are beginners, we don't have the knowledge to fix the sample code, which should be correct. It is very frustrating to learn Flutter this way.

    Anyway, I have managed to change some things so that at least it compiles. Check my gist. The problem is that when I run it on the web browser, I get this error: image

    Reviewed by matiszz at 2021-06-22 10:53
  • 13. Remove the `GlobalKey` in `unit_converter.dart`

    I'm new to dart. I've tried to the following

    • remove the GlobalKey from the file

    • replace GlobalKey with UniqueKey

    Both do not work. The keyboard that lets you enter numbers disappears immediately when I click on the textfield. Why is that?

    Reviewed by GoooGu at 2020-09-19 06:46

Related

how to Integrating facebook audience network to flutter app for banner, interstitial, rewarded, native and native banner

fb_ads_flutter_12 A new Flutter project. Getting Started Watch the complite tutorial for integrating Facebook ads into the Flutter app in our Youtube

Feb 12, 2022
Flutter native ads - Show AdMob Native Ads use PlatformView
Flutter native ads - Show AdMob Native Ads use PlatformView

flutter_native_ads Flutter plugin for AdMob Native Ads. Compatible with Android and iOS using PlatformView. Android iOS Getting Started Android Androi

Mar 4, 2022
react-native native module for In App Purchase.
react-native native module for In App Purchase.

Documentation Published in website. Announcement Version 8.0.0 is currently in release candidate. The module is completely rewritten with Kotlin and S

May 18, 2022
dna, dart native access. A lightweight dart to native super channel plugin

dna, dart native access. A lightweight dart to native super channel plugin, You can use it to invoke any native code directly in contextual and chained dart code.

Jul 22, 2021
Flutter makes it easy and fast to build beautiful apps for mobile and beyond
Flutter makes it easy and fast to build beautiful apps for mobile and beyond

Flutter is Google's SDK for crafting beautiful, fast user experiences for mobile, web, and desktop from a single codebase. Flutter works with existing

May 19, 2022
Just learning to build mobile apps with flutter :)
Just learning to build mobile apps with flutter :)

learning-flutter clickometro Clickômetro. A click counter. demo-clickometro.mp4 In this one, I've followed the Flutter Get Started guide, adn then add

May 3, 2022
FlutterBoost is a Flutter plugin which enables hybrid integration of Flutter for your existing native apps with minimum efforts
FlutterBoost is a Flutter plugin which enables hybrid integration of Flutter for your existing native apps with minimum efforts

中文文档 中文介绍 Release Note v3.0-preview.17 PS: Before updating the beta version, please read the CHANGELOG to see if there are any BREAKING CHANGE Flutter

May 27, 2022
Learn to make beautiful, native apps for Android & iOS
Learn to make beautiful, native apps for Android & iOS

name title subtitle description speaker flutter Flutter Learn to make beautiful, native apps for Android & iOS Flutter is a cross-platform, mobile dev

Nov 4, 2019
Mildly encrypted package - An encryption client & server for Dart Native + mobile platforms.

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Jan 9, 2022
This is a template repository for starting flutter apps with some pre build codes.

flutter_mobile_template A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you

Jan 15, 2022
Widgets for Digital Health - Use the Flutter(tm) SDK to build healthcare apps fast.
Widgets for Digital Health - Use the Flutter(tm) SDK to build healthcare apps fast.

Faiadashu™ FHIRDash — Widgets for Digital Health Mission Build beautiful healthcare apps fast — use the Flutter™ SDK and follow the HL7® FHIR® standar

May 25, 2022
Riverpod Messages Listener: A message notification listener for apps build with Riverpod
Riverpod Messages Listener: A message notification listener for apps build with Riverpod

Riverpod Messages Listener Hello all, this is the home page of riverpod_messages package, a message notification listener for apps build with Riverpod

Feb 18, 2022
🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.
🚗 Apple CarPlay for Flutter Apps. Aims to make it safe to use apps made with Flutter in the car by integrating with CarPlay.

CarPlay with Flutter ?? Flutter Apps now on Apple CarPlay! flutter_carplay aims to make it safe to use iPhone apps made with Flutter in the car by int

May 18, 2022
[Example APPS] Basic Flutter apps, for flutter devs.
[Example APPS] Basic Flutter apps, for flutter devs.

Show some ❤️ and star the repo to support the project This repository containing links of all the example apps demonstrating features/functionality/in

May 20, 2022
Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose
 Flutter-Apps-Collection: a collection of apps made in flutter for learning purpose

Flutter-Apps-Collection This is a repository of a collection of apps made in flutter for learning purpose Some Screenshots . . . Apps build in Flutter

Nov 3, 2021
Projeto do curso Criação de Apps Android e iOS com Flutter 2021-Crie 14 Apps. Professor: Daniel Ciolfi

agenda_contatos Projeto do curso de Flutter Getting Started This project is a starting point for a Flutter application. A few resources to get you sta

Nov 27, 2021
Projeto do curso Criação de Apps Android e iOS com Flutter 2021-Crie 14 Apps. Professor: Daniel Ciolfi

busca_gifs A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if th

Nov 25, 2021
This is an apps that implements fundamental features of Flutter (Android Apps Only)

rpl_apps_flutter A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Dec 28, 2021
CARP Mobile Sensing for Flutter, including mobile sensing framework, data backend support, and the CARP mobile sensing app.
CARP Mobile Sensing for Flutter, including mobile sensing framework, data backend support, and the CARP mobile sensing app.

This repo hold the source code for the CACHET Research Platform (CARP) Mobile Sensing (CAMS) Flutter software. It contains the source code for CACHET

May 25, 2022