Creating a new Flutter project

Have you ever tried creating a new Flutter project? Me neither. 

Why not do it together so you can learn from my mistakes and hopefully I can show that it’s possible to do for everyone, no matter your prior programming skills. I have been working in Flutter since November 2019 where I became head of our Flutter development in my company, DecorRaid. There is still not a lot of Flutter Developers out there and as we didn’t have money to pay for a Flutter developer, I decided to take over the development. This meant that a Flutter Developer had written the app as we had ordered and released it to App – and Play Store. But now every update or new feature to the app I had to develop. 

This was my introduction to Flutter. Just to make it clear I’m not an experienced developer – I’m selftought and initiated my journey into programming in 2018 simultaneously with starting DecorRaid. I had experience in Python and Angular prior to starting programming in Flutter. I’m telling you this just to make it clear that it’s possible for you to begin no matter your background.

Lets get to the fun part of programming. 

Flutter is written in Dart, so that’s the programming language we are going to be working with. 

Create a new Flutter Project

I like working in VS Code so everything is going to be done using that code editer. If you haven’t already setup your code editer for Flutter, they have great documentations on that.

First step into the world of Flutter is to install a new project.

Go to VS Code

1. Open the Command Palette (Ctrl+Shift+P (Cmd+Shift+P on macOS)).
2. Select the Flutter: New Project command and press Enter.
3. Enter your desired Project name.
4. Select a Project location.

When the project is installed add the folder to your workspace, by going to File > Add Folder to Workspace.

Now go to your folder > lib > main.dart here you will find the main code of your new app. Lets try to run the app, connect your device or simulator and press fn5 or write flutter run in the terminal.

Your code should be up and running and look something like this: 

Create a Flutter web application

One of the reasons we choose Flutter as our programming Framework for DecorRaid Swipeshop was cross platform and the ability to use the same codebase for web as well. Unfortunately, web is still in beta. But I always wanted to try it out, so let us try to make our new Flutter project ready for web. 

To enable web support run these commands in your terminal:

That was actually, not that hard. If you have any questions or problems please leave a comment and I will see if I can help. Do you want to know what each file and folders is used for and how to structure your new application go to my post on Flutter Scalable App – Folder Structure.

Now you are actually ready, to coding on your new flutter project. If you don’t know what the project should be about go to the next post Choosing a Flutter project.

Have a great day and happy coding 👩🏽‍💻