Create A Better Flutter App.
--
Create a better Flutter app using a better custom template.
Create Flutter
As you know, the command, ‘flutter create .’, will create the de facto ‘counter app’ as the starter app every time you begin a new Flutter project. It’s not a very complicated app — you may even say, it’s not a very helpful one either. An ‘app template’ supplied by the Flutter SDK is used to create this humble little app.
It’s possible, however, to switch out that template and replace it with a better one. In this article, I’ll do just that and introduce a more elaborate template that will deliver a more comprehensive and likely more helpful starter Flutter app for you. In fact, it’ll produce a starter app made up of three separate apps and will implement a number of standard functions and features you would likely find in more production-worthy Flutter apps. Below, are two gif files. The one on the left, you’ll recognize as the original ‘counter app’ while the one on the right you can see is a little more worthy of a typical Flutter app.
I Like Screenshots. Tap Caption For Gists.
As always, I prefer using screenshots in my articles over gists to show concepts rather than just show code. I find them easier to work with frankly. However, you can click or tap on their captions to see the code in a gist or in Github. Tap or click on the screenshots themselves to zoom in on them for a closer look.
No Moving Pictures, No Social Media
There will be gif files in this article demonstrating aspects of the topic at hand. However, it’s said viewing such gif files is not possible when reading this article on platforms like Instagram, Facebook, etc. They may come out as static pictures or simply blank placeholder boxes. Please, be aware of this and maybe read this article on medium.com
Let’s begin.
The template that creates that better starter app comes with the package, app_template. When you install it, you’ll find this package under the folder, pub.dartlang.org, on your machine. It is from there where you can copy the folder called, app, and the file called, template_manifest.json, to the ‘templates’ folder in your own Flutter SDK.
Go to that package's ‘ templates’ folder to retrieve the more elaborate template. The accompanying template_manifest.json file is necessary to list and install the template’s contents. They’re highlighted below. Note, there are two additional templates, contacts_template and counter_template. Both are included under the folder, app, as two of the three separate apps in the starter app. They’re separated out if you want to use either of them as a template instead.
In the screenshot below of my own Flutter SDK’s location, you can see I’ve backed up the original template files and simply copied over the items highlighted. Go to your own Flutter’s SDK location, and find the ‘app’ template through the directories: packages>flutter_tools>templates.
Copy over those items and with that, the next time you issue the command, ‘flutter create .’, you’ll get a more comprehensive starter app. Again, I would suggest you first backup the original template files, and be aware this better template is always overwritten with every Flutter upgrade. I know, such ‘user templates’ would be a great idea to help you make future projects, and upgrading Flutter should allow for this, however, just such a suggestion was made to the Flutter team some three years ago now with little progress: Support user-supplied project templates for flutter create.
Although, they do seem to be experimenting since Flutter 2.5 now offers an additional template called skeleton:flutter create . — template=skeleton
This better starter app will supply all the ‘must have’ functions and features for a typical app — leaving you to work on the core of your own app. As for why the template is delivered inside the Dart package, app_template. It’s thought that, in future versions, it will be a more elaborate ‘app maker’. Until then, please dig out the templates provided. You’ll be glad you did.
Cheers.
A Better Flutter App #1
