Your First Flutter App: An App From Scratch

Every iOS or Android app starts with an app project. Flutter is no exception and with release Flutter 2.5, we get a whole lot of new options included with the project. With Visual Studio Code, you’ll be creating a new Flutter project and you’ll see that you can create projects in two different ways - using the command line or within Visual Studio Code itself. We’re going to be using that standard Flutter project setup, but there are other app project templates like the skeleton template that provides more configuration options. Just keep in mind when you do create a new app project, it must not have any spaces. Use underscores instead. Let’s get started creating your first flutter app.

To get started creating your Flutter app, you can use the command line or visual studio code. Personally, I like using the command line but in just a moment, I’ll show you to how to create a project in Visual Studio Code. To open the terminal press Command-space and type: terminal. If you are on Windows, press the start button and type command to open the terminal. Navigate to your Desktop by typing: cd Desktop.

Now to create the projects. Simply type: flutter create bullseye. After a few moments, you’ll have a new Flutter project ready to be used.

Okay. Now lets create a project with Visual Studio Code. Select the project and delete it. Then open up Visual Studio Code. Open up the Command Palette. You can find it in the View menu option . You’ll see that I have an option titled, Flutter: New Project. If not, you can search for it. Select the Application option. Select the Desktop and click the Select a folder to create the project in. Then give it the name bullseye. And look at that, you have a new project open. If you are asked to trust the authors, select yes, I trust the authors.

On the left hand side, you’ll see your file explorer - the button with documents - that will show a list of files and folders for the project. There are a bunch of other buttons related to working on your project as well.

The search button - the one with the magnifying glass - allows you to search and replace text if needed. The source control button - the one with the circles - is your source control tab for when you want to work git. The Run and Debug button - that is, the button with the triangle - allows you to run your project. This can be on a device, an emulator or simulator or even in a browser.

The extension button shows a bunch of squares. You should have two extensions already installed: Dart and Flutter. Finally the Testing button is for for unit tests. This is when you want to run automated tests against your code. Finally, the Flutter icon gives you a breakdown of all your Flutter objects.

For the most part, you’ll be working with the Explorer so click the top most icon. You’ll notice if you click it again, the files will disappear. This is useful when you just want to focus on the code itself. We’re going to go through all the various files and folders.

First, you’ll see the .dart_tools and .idea folders. These are used by the Flutter framework to manage dependencies. You don’t need to worry about them.

The android and ios folders are when you need to make specific platform modifications such as adding application icons or launch screens. Needless to say, the more you understand the target platforms, the better you’ll understand how the files affect the compiled app.

The lib folder is for all of your dart files. You’ll see that there is already file called main.dart. You’ll see that there is already sample code in place. You’ll add all your dart code in that folder.

The test folder is for all your unit tests. You won’t be writing unit tests, so delete the folder. .gitIgnore deals with source control. It’s useful if you don’t want to commit certain files to git. You don’t have to worry about metadata and packages. Those are managed by Flutter.

The analysis options is used for built in linting. Linting will evaluate your code. This enforces best practices and coding conventions, potentially making your code more performant and easier to debug.

The iml file is another generated file used by integrated development environments. You don’t have to worry about it. Next we have your pubspec. This is the configuration file for your app. It determines the language and framework version. It lets your dependencies and so forth. You can either manually add to this file, or run commands that will update it for you.

Finally, you have your readme file. When you commit this project to a source control platform such as GitHub, the readme is displayed to the end user. This is a good place to inform people about your project, provide links to documentation as well as any special instructions. Mind you, this is good to include even for private repositories as writing even a little documentation can save you and others time down the road.