https://github.com/ethiel97/flutter_tip_calculator
https://github.com/ethiel97/flutter_tip_calculator
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ethiel97/flutter_tip_calculator
- Owner: Ethiel97
- License: other
- Created: 2021-11-18T16:15:16.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-11-18T16:17:43.000Z (over 3 years ago)
- Last Synced: 2025-02-07T17:38:37.441Z (4 months ago)
- Language: C++
- Size: 827 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Flutter sample project
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.
## Sample project requirements
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.
## General setup
In this section you create your sample app with settings that will apply to all platforms.
### Use the stable channel
Make sure you're on the stable channel with the most recent version of Flutter.
```
flutter channel stable
flutter upgrade
```
### Set the base package name
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.
### Add the Razeware license
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](https://github.com/raywenderlich/flutter-sample-project/blob/master/LICENSE). Change the date to the current year if needed.
### Set up linting rules
Adding linting rules will help you to follow the Flutter team coding style and just write better code in general.
Add a file named **analysis_options.yaml** to the root of your project. Paste in the [Flutter Team linting rules](https://github.com/raywenderlich/flutter-sample-project/blob/master/analysis_options.yaml), which you can find in the root of this repository.
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.
### Update pubspec.yaml
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.0` in 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.
### Use .gitignore
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.
### Remove unused folders
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.)
## Image assets
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.
### Android 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.
### iOS assets
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.
### Web assets
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.
## App display name
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.
### Android
Open **AndroidManifest.xml** in **android/app/src/main** and set the app display name by editing the `android:label` property.
```
CFBundleName
Super App
```
This name will appear under the app's launcher icon on the user's iOS device.
### Web
Open **index.html** in the **web** folder of your project root. Then set the display name by editing the `title` property.
```
Super App
```
This will change the display name used in the page's browser tab next to the favicon.
## Testing it out
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.
## Future changes
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.