{"id":16179158,"url":"https://github.com/jonashackt/how-to-flutter","last_synced_at":"2025-03-19T01:30:55.609Z","repository":{"id":40404100,"uuid":"490616826","full_name":"jonashackt/how-to-flutter","owner":"jonashackt","description":"A backend engineer looking into cross-plattform mobile development","archived":false,"fork":false,"pushed_at":"2025-03-04T21:56:47.000Z","size":8102,"stargazers_count":1,"open_issues_count":7,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-17T01:35:13.444Z","etag":null,"topics":["android","appstore","dart","dartlang","flutter","flutter-app","ios"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonashackt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-10T08:53:51.000Z","updated_at":"2025-02-25T16:49:37.000Z","dependencies_parsed_at":"2023-10-05T08:01:21.127Z","dependency_job_id":"59484947-0207-4302-9b6a-433cad27b47e","html_url":"https://github.com/jonashackt/how-to-flutter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonashackt%2Fhow-to-flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonashackt%2Fhow-to-flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonashackt%2Fhow-to-flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonashackt%2Fhow-to-flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonashackt","download_url":"https://codeload.github.com/jonashackt/how-to-flutter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244336133,"owners_count":20436773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","appstore","dart","dartlang","flutter","flutter-app","ios"],"created_at":"2024-10-10T05:25:40.921Z","updated_at":"2025-03-19T01:30:54.731Z","avatar_url":"https://github.com/jonashackt.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"# how-to-flutter\n[![Build Status](https://github.com/jonashackt/how-to-flutter/workflows/flutter-build/badge.svg)](https://github.com/jonashackt/how-to-flutter/actions)\n[![License](http://img.shields.io/:license-mit-blue.svg)](https://github.com/jonashackt/how-to-flutter/blob/master/LICENSE)\n[![renovateenabled](https://img.shields.io/badge/renovate-enabled-yellow)](https://renovatebot.com)\n\nA backend engineer looking into cross-plattform mobile development\n\n\n## My goal: get into both App Stores as quickly as possible\n\nAs a \"DevOps / backend focussed engineer\" I finally wanted to have a look into app development.\n\nFor me it was crucial to get a head start without much friction. My goal was to get a running app out into both the Android and Apple AppStores as quickly as possible.\n\nSo I opted for cross-platform development frameworks and read some current \"popular frameworks in this space\" articles like https://hackernoon.com/9-popular-cross-platform-tools-for-app-development-in-2019-53765004761b\n\nSoon I realized both React Native and Flutter are the top dogs today, so I read more about them https://hackr.io/blog/react-native-vs-flutter\n\nEating my own dogfood I asked myself: what are my requirements? The \"when to use Flutter section\" got me:\n\n```\nWhen to Use Flutter\n\n    Small budgets\n    Short development timeline\n    UI-centered apps\n    Iteration (Hot Reload)\n```\n\n`small budgets` and `short development timeline` both sound like the thing I was looking for to \"get into both App Stores as quickly as possible\".\n\n\n## Flutter \u0026 Dart\n\nhttps://flutter.dev is based on Google's https://dart.dev programming language, which is focussed to be a `a client-optimized language for fast apps on any platform` - sounds good, although I need to learn a new language.\n\nDart is compiled to ARM \u0026 x64 machine code for mobile, desktop, and backend. Or compiled to JavaScript for the web. It also uses AOT-compilation for performance and should be much faster than React Native, since there's no separate thread using JavaScript anymore. **Everything is compiled to native!**\n\nSounds really nice, so let's get our hands dirty: https://flutter.dev/learn\n\n\n## Prepare your dev environment for Flutter\n\n### Install Dart SDK\n\nThis is mainly to have a Dart SDK available in IntelliJ (which we might also have using only flutter installation, but will check that later):\n\nhttps://dart.dev/get-dart\n\n```shell\n# MacOS homebrew\nbrew tap dart-lang/dart\nbrew install dart\n\n# Linux Manjaro\npamac install dart\n```\n\n### Install Flutter SDK\n\nhttps://docs.flutter.dev/get-started/install/macos\n\nOn a Mac we can install Flutter using brew:\n\n```shell\nbrew install flutter\n```\n\nOn Manjaro Linux or Arch things get maybe a bit more complicated. Running `pamac install flutter` produced a\n\n```shell\nError: Failed to prepare transaction:\ncould not satisfy dependencies:\n- unable to satisfy dependency 'flutter-engine-linux=3.22.1' required by flutter-target-linux\n- unable to satisfy dependency 'flutter-target-linux=3.22.1' required by flutter\n- unable to satisfy dependency 'flutter-engine-android=3.22.1' required by flutter-target-android\n- unable to satisfy dependency 'flutter-target-android=3.22.1' required by flutter\n- unable to satisfy dependency 'flutter-engine-web=3.22.1' required by flutter-target-web\n- unable to satisfy dependency 'flutter-target-web=3.22.1' required by flutter\n```\n\nBut reading through some comments on https://aur.archlinux.org/packages/flutter it turned out that the dependency structure of the complex flutter package changed recently and thus it will help to build the depending packages yourself:\n\n```shell\npamac build flutter-engine-linux flutter-target-linux flutter-engine-android flutter-target-android flutter-engine-web flutter-target-web\n\npamac build flutter\n```\n\nThe command `flutter install` didn't work for me at all. See https://forum.manjaro.org/t/difference-between-pamac-install-and-pamac-build/116712 for the differences between `pamac install` and `pamac build`.\n\n\nYou can grab yourself a coffee now - this may take a while (2.8 gigs).\n\nWhen this finished, you should run \n\n```shell\nflutter doctor\n```\n\nThis should show you, what is missing on your machine!\n\n\n### iOS simulator\n\nUsing the iOS simulator no device is required.\n\nhttps://docs.flutter.dev/get-started/install/macos#set-up-the-ios-simulator\n\nOpen it via\n\n```\nopen -a Simulator\n```\n\n![iphone-simulator](screenshots/iphone-simulator.png)\n\n\n\n### iOS setup\n\nThese steps are required if you want to use your iPhone device itself to testdrive your Flutter app.\n\nhttps://docs.flutter.dev/get-started/install/macos\n\n\u003e To deploy your Flutter app to a physical iOS device you’ll need to set up physical device deployment in Xcode and an Apple Developer account. If your app is using Flutter plugins, you will also need the third-party CocoaPods dependency manager.\n\n#### Update MacOS, XCode \u0026 CommandLineTools\n\nFirst be sure to have your latest MacOS installed:\n\n```shell\nsoftwareupdate --all --install --force\n```\n\nhttps://docs.flutter.dev/get-started/install/macos#install-xcode\n\nFor iOS development we need XCode to be installed (e.g. via the Mac App Store).\n\n\n#### CocoaPods\n\n```shell\nsudo gem install cocoapods\n```\n\nIf that does fail with \n```\nThe compiler failed to generate an executable file. (RuntimeError) You have to install development tools first.\n```\n\nyou should know that https://stackoverflow.com/a/65481787/4964553\n\n\u003e Recent versions of macOS and Xcode (e.g. Catalina, Big Sur and so on) definitely have this broken.\n\nTherefore follow the so answer. On my BigSur this was what made the `cocoapods` installation work\n\n```\ncd /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0/ruby/\nsudo ln -sf ../../../../Headers/ruby/config.h\ncd /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX12.1.sdk/System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/include/ruby-2.6.0\nsudo ln -sf universal-darwin21 universal-darwin20\n```\n\n#### Xcode signing flow\n\nRun the following in the root of the project:\n\n```\nopen ios/Runner.xcworkspace\n```\n\nThis should fire up Xcode using our Flutter generated project:\n\n![xcode-started-in-flutter-project](screenshots/xcode-started-in-flutter-project.png)\n\nNow select a __Team__ using __Add Account...__ under __Signing \u0026 Capabilities__ inside the __Runner__ configuration.\n\n![xcode-team-chosen](screenshots/xcode-team-chosen.png)\n\nYou definitely need to trust the new Xcode generated developer certificate on your iPhone (sorry, I only have a german iOS here): \n\n\u003e go to the Settings app on the iOS device, select General \u003e Device Management and trust your Certificate. For first time users, you may need to select General \u003e Profiles \u003e Device Management instead.\n\n![iphone-trust-dev-cert-flow](screenshots/iphone-trust-dev-cert-flow.png)\n\nFor more details have a look at https://docs.flutter.dev/get-started/install/macos#deploy-to-ios-devices\n\n\u003e Development and testing is supported for any Apple ID. Enrolling in the Apple Developer Program is required to distribute your app to the App Store (see https://developer.apple.com/support/compare-memberships)\n\n\nNow click onto the run icon in Xcode or execute `flutter run` on command line. Your app should be started on your iPhone! :)\n\nIf you experience `iproxy` beeing blocked on your Mac like this:\n\n![flutter-iproxy-blocked-macos](screenshots/flutter-iproxy-blocked-macos.png)\n\nrun the following (see https://stackoverflow.com/a/71359133/4964553):\n\n```shell\n# look where flutter sdk is located - if you used brew that is\n/usr/local/Caskroom/flutter/2.10.5/flutter/bin/\n# then cd to flutter-sdk-path/bin/cache/artifacts/usbmuxd\ncd /usr/local/Caskroom/flutter/2.10.5/flutter/bin/cache/artifacts/usbmuxd\n# deactivate MacOS blocking for iproxy\nsudo xattr -d com.apple.quarantine iproxy\n```\n\n\n\n### Android setup\n\nhttps://docs.flutter.dev/get-started/install/macos#android-setup\n\nInstall Android Studio (do not use `brew install android-sdk`, since it has been officially discontinued upstream)\n\n```shell\n# MacOS \nbrew install android-studio\n\n# Manjaro Linux\npamac install android-studio\n```\n\nThen start Android Studio and you should see the Wizard waiting. Here choose the standard installation and the `Android SDK` and other needed tools for Flutter will be downloaded for you.\n\n### Run another flutter doctor\n\nNow running `flutter doctor` there should only the Android SDKs commandline tools should be missing:\n\n```shell\n$ flutter doctor\nDoctor summary (to see all details, run flutter doctor -v):\n[✓] Flutter (Channel stable, 2.10.5, on macOS 11.6.5 20G527 darwin-x64, locale de-DE)\n[!] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)\n    ✗ cmdline-tools component is missing\n      Run `path/to/sdkmanager --install \"cmdline-tools;latest\"`\n      See https://developer.android.com/studio/command-line for more details.\n    ✗ Android license status unknown.\n      Run `flutter doctor --android-licenses` to accept the SDK licenses.\n      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.\n[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)\n[✓] Chrome - develop for the web\n[✓] Android Studio (version 2021.2)\n[✓] IntelliJ IDEA Ultimate Edition (version 2021.2.2)\n[✓] VS Code (version 1.62.0)\n[✓] Connected device (2 available)\n    ! Error: Failed to prepare device for development. Please unlock and reconnect the device. (code 806)\n[✓] HTTP Host Availability\n```\n\nInstall the Android SDKs command line tools via Android Studio (the described way in the docs is not working! https://developer.android.com/studio/command-line):\n\nWhat works: Open Android Studio and create a sample project. Go to Preferences and __Languages \u0026 Frameworks / Android SDK__ and check the box __Android SDK Command-line Tools__:\n\n![android-studio-android-sdk-command-line-tools](screenshots/android-studio-android-sdk-command-line-tools.png)\n\nThe Android Command Line Tools should now be downloaded.\n\nAnd finally run `flutter doctor --android-licenses` to accept the SDK licenses.\n\nNow another `flutter doctor` should give you everything green:\n\n```\n$ flutter doctor\nDoctor summary (to see all details, run flutter doctor -v):\n[✓] Flutter (Channel stable, 2.10.5, on macOS 11.6.5 20G527 darwin-x64, locale de-DE)\n[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)\n[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)\n[✓] Chrome - develop for the web\n[✓] Android Studio (version 2021.2)\n[✓] IntelliJ IDEA Ultimate Edition (version 2021.2.2)\n[✓] VS Code (version 1.62.0)\n[✓] Connected device (2 available)\n[✓] HTTP Host Availability\n\n• No issues found!\n```\n\nOnly if Chrome isn't found and you're using Chromium:\n\n```shell\n$ flutter doctor\n...\n[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)\n    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.\n```\n\nyou need to edit your `~/.zshrc` or `~/.bashrc` and [add the `CHROME_EXECUTABLE` env var](https://stackoverflow.com/questions/70277511/how-to-execute-flutter-app-in-chromium-browser-on-linux):\n\n```shell\n### Flutter Chrome configuration to use Chromium\nexport CHROME_EXECUTABLE=\"/bin/chromium\"\n```\n\n\n### Setup the Android emulator\n\nJust as we did with the iOS simulator, we'd also like to use the Android emulator (as [the docs state](https://docs.flutter.dev/get-started/install/macos#set-up-the-android-emulator)).\n\ntbd\n\n\n### Setup your Android phone for Flutter development\n\nhttps://developer.android.com/studio/run/device\n\nIf you want to use your Android device and run your developed app, you first need to enable the developer options first by clicking on the build number 7 times (the build number [is mostly located](https://developer.android.com/studio/debug/dev-options) inside the `about phone` tab inside your `Settings` menu).\n\nNow head over to the `Developer options` menu now showing up under `Settings` and enable `USB debbugging`. On a Mac now everything should be set up (see [other OSes in the docs](https://developer.android.com/studio/run/device)).\n\nConnected with an USB cable you can now run your app on the Android device from within IntelliJ/Android Studio or by running `flutter run` in the root directory of your project. \n\n## Start with Flutter development\n\nNow let's dive into building our first app. There's a really nice codelab to quickstart your Flutter development skills: \n\nhttps://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0\n\nand later also https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0\n\nStart by creating a Flutter app template with\n\n```shell\nflutter create how_to_flutter\n```\n\nThis will create a new folder `how_to_flutter`, which contents I then integrated into my root directory.\n\nPaste the `hello world` example code into [lib/main.dart](lib/main.dart):\n\n```dart\nimport 'package:flutter/material.dart';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Welcome to Flutter',\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text('Welcome to Flutter'),\n        ),\n        body: const Center(\n          child: Text('Hello World'),\n        ),\n      ),\n    );\n  }\n}\n```\n\nBe sure that the iOS simulator is running (`open -a Simulator` if not) and then run\n\n```shell\nflutter run\n```\n\nNow your app should run inside the simulator:\n\n![frist-hello-world-app-run-simulator](screenshots/frist-hello-world-app-run-simulator.png)\n\n### Install Dart and Flutter Plugins in IntelliJ \u0026 configure correct SDK paths\n\nYou can choose any IDE you want (e.g. Android Studio, VSCode etc.). I went with IntelliJ and there are some plugins you should install first, which will assist you in Flutter/Dart development:\n\n* the official Dart plugin https://plugins.jetbrains.com/plugin/6351-dart\n* the Flutter plugin https://plugins.jetbrains.com/plugin/9212-flutter (and https://github.com/flutter/flutter-intellij)\n\nIn both plugins you need to configure the correct Dart and Flutter SDK paths in order to make them work.\n\nIf you use `brew install dart` for the Dart installation, the path for me was \n\n```\n/usr/local/Cellar/dart/2.16.2/libexec\n```\n\n![intellij-dart-plugin](screenshots/intellij-dart-plugin.png)\n\nFor Flutter using `brew install flutter` the path was: \n\n```\n/usr/local/Caskroom/flutter/2.10.5/flutter\n```\n\n![intellij-flutter-plugin](screenshots/intellij-flutter-plugin.png)\n\n\nIf you installed both plugins correctly, you might need to remove the `.iml` file and import the project as a new one again (at least that fixed project view for me). Now your IntelliJ has everything ready for Flutter development - including autocompletion like typing `stful` to generate a `StatefulWidget`:\n\n![intellij-working-autocompletion-flutter](screenshots/intellij-working-autocompletion-flutter.png)\n\n\n## Debugging Flutter apps from within IntelliJ\n\nhttps://docs.flutter.dev/development/tools/devtools/android-studio\n\nAs described in [this blog post](https://dhanushkac.medium.com/how-to-fix-cannot-find-runner-for-main-dart-with-flutter-in-intellij-88789e8eefaa) be sure to have the Flutter IntelliJ plugin's Flutter SDK path configured correctly (as described in the section above).\n\nThen in IntelliJ you should also be able to see your device:\n\n![intellij-flutter-plugin-sdk-configured-device-showing](screenshots/intellij-flutter-plugin-sdk-configured-device-showing.png)\n\nNow you should also be able to __Run__ or __Debug__ your app from within IntelliJ.\n\nThis also allows e.g. for side-by-side development possibilities:\n\n![intellij-simulator-side-by-side](screenshots/intellij-simulator-side-by-side.png)\n\n\nTo access the [Flutter DevTools](https://docs.flutter.dev/development/tools/devtools/overview) simply click on the Button after running the app:\n\n![intellij-start-devtools](screenshots/intellij-start-devtools.png)\n\nNow the DevTools should open in your Browser:\n\n![flutter-dev-tools](screenshots/flutter-dev-tools.png)\n\n\n# Links and Ideas\n\nhttps://blog.codecentric.de/en/2019/03/flutter-new-mobile-promise/\n\nhttps://blog.codecentric.de/en/2018/10/is-flutter-ready-for-production-apps-in-q4-2018/\n\nhttps://docs.flutter.dev/whats-new#may-11-2022-google-io-edition-flutter-3-release\n\nhttps://medium.com/flutter/introducing-flutter-3-5eb69151622f\n\n\n\nhttps://docs.flutter.dev/resources/faq#why-did-flutter-choose-to-use-dart\n\n### Learn\n\nhttps://codelabs.developers.google.com/?text=flutter\n\nhttps://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0\n\nhttps://docs.flutter.dev/development/packages-and-plugins/happy-paths\n\nhttps://codelabs.developers.google.com/codelabs/flutter-boring-to-beautiful#0\n\nhttps://docs.flutter.dev/cookbook\n\nhttps://docs.flutter.dev/resources/bootstrap-into-dart\n\nhttps://developers.google.com/codelabs/from-java-to-dart#0\n\n#### Layout tutorials:\n\nhttps://docs.flutter.dev/development/ui/layout\n \nhttps://docs.flutter.dev/development/ui/layout/tutorial\n\nhttps://docs.flutter.dev/development/ui/interactive\n\nDebugging Flutter layouts visually: https://docs.flutter.dev/development/tools/devtools/inspector#debugging-layout-issues-visually\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonashackt%2Fhow-to-flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonashackt%2Fhow-to-flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonashackt%2Fhow-to-flutter/lists"}