This repository is a mini-tutorial to help you create the sample app for your tutorial on raywenderlich.com. The repository here includes the resources you'll need to make your app look good wherever your readers build the app.
All projects for raywenderlich.com Flutter tutorials should include the following items:
- com.raywenderlich base package name (Android, iOS)
- Razeware license
- Flutter team linting rules
- A clean pubspec.yaml file
- Splash screen (Android and iOS)
- App icons for all sizes (Android, iOS, web)
- App display name
The following directions will give further details on how to do that.
In this section you create your sample app with settings that will apply to all platforms.
Make sure you're on the stable channel with the most recent version of Flutter.
flutter channel stable
flutter upgrade
Next create a Flutter project using the base package name for raywenderlich.com in reverse notation.
flutter create --org com.raywenderlich appname
Replace appname with your project name. This is used for both the Android package name and the iOS bundle identifier.
The guides require adding the license to the top of each code file, but many developers expect to find a file called LICENSE in the root of the project also. So create that file. You can find the text for the file in this repository. Change the date to the current year if needed.
Adding linting rules will help you to follow the Flutter team coding style and just write better code in general.
In pubspec.yaml add effective_dart to the dev dependencies:
dev_dependencies:
effective_dart: ^1.3.1
Also add a file named analysis_options.yaml to the root of your project. Paste in the Fluter Team linting rules, which you can find in the root of this repository. They contain most of Effective Dart as well as some additional rules specific to publishing code on the web.
These linting rules will let your IDE give you warnings or errors if you aren't following the Flutter Team's coding style. This also means that you should fix all of the IDE warnings and errors before you submit your sample app.
Here is a checklist for things to pay attention to in pubspec.yaml:
- Set the app name and description.
- Set the minimum Dart SDK to no lower than
2.12.0in order to take full advantage of sound null safety. The only reason you wouldn't do this is if your app absolutely requires a package that hasn't been upgraded to null safety. - Remove all the default comments.
There is a sample pubspec.yaml file in the root of this repository for your reference.
When you create a new Flutter project it comes with a good .gitignore file. Go with what's in there. Also consider this a good list of things not to include when you upload your project to raywenderlich.com.
Hint: If you develop your project with GitHub, all you have to do is download it from GitHub before uploading it to raywenderlich.com. This is an easy way to ensure that there are no unnecessary files in the project.
If your project doesn't include any tests, then remove the test folder. The same is true for platform folders if you are specifically not supporting that platform. (See the Web assets section below.)
Including image assets in your app makes it look better and feel more polished. You can either create your own or use the standard raywenderlich.com assets.
On Android you need to add a splash screen and launch icon. To use the raywenderlich.com assets for these, replace the contents of your project's android/app/src/main/res folder with the contents of the android_assets/res folder in this repository.
You also need to add an iOS splash screen and launch icon. To use the standard raywenderlich.com image assets, replace the contents of your project's ios/Runner/Assets.xcassets folder with the contents of the ios_assets/Assets.xcassets folder in this repository.
You should also add a favicon and other asset images for the web. To use the standard raywenderlich.com asset images, go to your project's web folder and replace favicon.png and the contents of the icons folder with the image assets found in the web_assets folder in this repository.
Note: If your project does not support the web, then delete the entire web folder.
Rather than having your launcher icon use your project name, which might be something unsightly like appname, you should update the display name for each platform that Flutter supports.
Open AndroidManifest.xml in android/app/src/main and set the app display name by editing the android:label property.
<application
android:label="Super App"
This name will appear under the app's launcher icon on the user's Android device.
Open Info.plist in ios/Runner and set the app display name by editing the CFBundleName string property.
<dict>
<key>CFBundleName</key>
<string>Super App</string>
This name will appear under the app's launcher icon on the user's iOS device.
Open index.html in the web folder of your project root. Then set the display name by editing the title property.
<head>
<title>Super App</title>
This will change the display name used in the page's browser tab next to the favicon.
Run the app on an Android and iOS device or emulator/simulator to make sure the splash screen, launcher icon and app name display correctly. If you don't have a Mac, then mention that on the Trello card so that the TE or FPE can double check the iOS version.
Run the Flutter web app in a browser to make sure that the favicon and app name show on the browser tab.
This guide is up to date for Flutter 2.0. When desktop versions enter the stable channel without the need for any special flags, the required resources should be added for them as well.
Are there new Flutter updates that break this guide? Please open a GitHub issue or submit a pull request.