How to create your own business (with Flutter).

Photo by Tyler Franta on Unsplash

Creating your own business — the dream of every developer. But this is often easier said than done. You need to plan, design, develop, market, update, etc. your app.

That’s why I’m going to give you a basic guide on how to do this right. I’ve helped several people improve their business. From that experience, today I want to talk and show you what many are doing wrong.

I hope you enjoy reading: Happy Reading!

PS: In this post I often mention Robert Brunhage. However, this article is (unfortunately) not a collaboration, as he only gave me permission to use questions he answered.

Planning the app

One step that many don’t like so much and others love is plannjng a project.

But actually it is quite easy to do this.

First, of course, you need to have an idea that you want to implement. Then you write it down. Once you have done that, then you can write down a more detailed version of it. This can be done in Notion, a program where you can write down anything you want. We’ll be using this program a lot more in this post (I’m prewriting this post in Notion right now).

Once you’ve done that, you can start mindmapping.

For this, MindNode is very good for Apple users. This is a very easy to use program that has limited features, but is definitely sufficient.

Another program is XMind, which works on Windows, Android, Linux and all Apple devices. The advantage to this is that you clearly have more features, but if you want to import your MindMap, you get a really fat watermark on it that doesn’t look pretty.

So bottom line, if you use Apple and don’t want a watermark on your file, use MindNode. If you have a device of your choice and don’t have a problem with having watermarks on your file, I definitely recommend XMind.

Great! Planning done, now you can start designing your project!

Design

Now it comes to the design. If you want to go completely crazy (which is highly recommended for very large projects), you can start by making notes in Notion about how you want your design to be, where you want each element to go, and so on. If you want, you can also do it as a MindMap, but I have rather negative experiences with that, but others have very positive ones. Therefore it’s your decision how you do it.

“But Tomic, I’m not good at designing, how can I learn to do that?”

Robert Brunhage made a great tip about this on his Discord server.

You can find at https://www.refactoringui.com/ a lot of cool tutorials and get inspired by the designs. Robert also learned a lot from the following YouTube channel. When I first discovered this channel, I was fascinated by his knowledge and am still watching all the videos!

https://www.youtube.com/watch?v=dGYCn9qYjUQ

The last tip Robert gave was to just watch as many YouTube videos as possible AND go to any websites and just look at the design there. What font does the website use (WhatFont is a very good Chrome extension for this), how much spacing do the elements have from each other, are animations used, if so which ones etc.? All these are important things when designing an app or website.

Okay, now that we have clarified how you can improve your designs, you can already create the design of the app.

For this you can use Figma, AdobeXD or Framer. For beginners I recommend Figma and AdobeXD. For people who want to add a bit more interactivity to their app and want to create a lot of animations, Framer is clearly the better alternative.

I’m currently working my way into Framer, but before that I also started with Figma and AdobeXD.

Okay, now you’ve chosen your program, but what next?

You should logically have a basic theme in mind and then go by that. I always start with the screens that the user sees first. So first comes Introduction, then Sign in & Sign up, then the homescreen with the respective tabs and with the tabs then the respective pages you come to if you clicked something there.

Then there are small screens like “Sign in Success” etc. and then you are done. Be sure to take your time with it and pay attention to detail if you don’t want to have to do so much later.

Coding

Okay, now we come to the exciting part.

But, before we get to the writing of the code, we have to do some other things first. Setting up the project, folder structure etc.

How to do that, Robert Brunhage answered in a FAQ on his Discord. I follow the same principle, so I speak from experience that this sequence is very good. First, of course, the project is created. Once this is done, linting is set up. For this we both use the lint plugin. Once this is done, the linting rules are set up. Everyone should set up their own lint rules and see which ones are best for them.

When you have set up your own rules, you should consider which folder structure you use. You can use your own or design a new one, or you can use folder structures from YouTubers. Reso Coder has designed a great structure. https://www.youtube.com/watch?v=KjE2IDphA_U&list=PLB6lc7nQ1n4iYGE_khpXRdJkJEp9WOech

I have always used my own so far, but will definitely use this one in my next project as it is very clean and simple.

Now you still need to set up cicd if you want to. You can set up Codemagic or GitHub Actions for example.

Once that’s done, you finally get to code!

Ok ok, slow down. You also go about coding in a structured way.

You always go in a sequence. There are different ones, which I present to you here. At the end I will show my own order.

first server side, then the UI

I personally haven’t used this technique yet, however many are supposed to do quite well with it. I imagine it’s very hard because if you do the server side first, you still have to create a very basic UI so you have to test the functionality of it. Also, you have to write all your UI code after that, and as a result, something from the server side can quickly go wrong, as you then forget a FutureBuilder, etc.

first UI, then the rest

This setup is used very often, because it is practical and you keep the motivation to continue working at the beginning, because you see something right away and don’t just do something server-side. This method is clearly easier to use from my point of view, because if you build the UI first, then later you only have to wrap your widgettree with a FutureBuilder etc. and then only call the methods at onPressed. This way you avoid having to reprogram everything.

always have one functionality with UI and server side.

I use this method in combination with the folder structure of Reso Coder. Since I use this myself, I can clearly write more detailed here than with the others. The advantage here is that after a few days you really already have the first finished features and can also quickly go into an alpha and beta version. In addition, you never have to reprogram anything, etc.

In the following I describe my complete process with this technique.

First I create the main class, which is actually quite standard. call main() function and a small widget, nothing more.

Now it gets interesting when I define my routes. I don’t just write them into the MaterialApp class, but I create an extra file called “routes.dart”, which contains all routes.

This class then looks something like this:

After that I come to the theme. There I define all colors, spacings, textstyles etc.

When this is done, I really start with the functionalities of the app.

First I always create the introductionscreen and authscreen. With the authscreen, logically, the server side comes into play. When that is done, I take care of the homescreen. Since it is different in each app, what is with the homescreen, I can not evaluate this. In any case, all the subpages are already added there and all of them are also already linked to the server. When this is done, I take care of the settings screen, where you can edit and delete your account, log out, but also change the theme, etc, so everything that belongs to a settings screen.

Okay, and now you are actually already done.

But now comes a part that I personally hate, but for an app that really should be in the AppStore, you should already do that. Testing.

To be honest, I can’t say much about it. I rarely do it myself and only when I want to publish my app in the stores.

But a pro at it is also Robert Brunhage, who uses the integration_test package.

Are we done now? Yes, almost. The very last step is to clean up your code. What does that mean? Well, take out all unnecessary comments, change your imports to relative imports, use the const keyword everywhere you can, etc.

Here are a few more questions that are often asked:

Which backend or cloud service should I use?

That all depends. If you want to build a large app that a lot of people will use and you use a lot of features, then you should choose between Google Cloud, AWS and Microsoft Azure. Personally, I’ve gotten into Google Cloud, but I’d like to get into AWS as well.

If you want your app to be a little smaller, then you can definitely use Firebase or Amplify.

Which StateManagement solution should I use?

That depends entirely on you. Robert, Tadas & I use Rivperpod, however that is entirely up to you.

Now we are finally done writing the code! Congratulations!

Marketing

But before we publish the app, you need to come up with a strategy on how to market your app. There are many different ways to do this. First, of course, you can hire an agency. The advantage of this is that it is really professional and the chances are very high that your app will reach interested people. The disadvantage is that it costs a lot of money. So, if you don’t have a lot of money at the moment, you need to find another strategy.

Luckily, there’s Google DigitalGarage, where you can learn all sorts of things about online marketing. I completed the certified 40-hour course, but it’s enough if you only complete a few courses.

Well, now you’ve learned the basics and can finally start creating your video. I can’t give you tips on where to create your video, etc., because it depends on the industry. For example, if you’re creating an app for a coffee shop, then using illustrations wouldn’t be very appropriate.

Nevertheless, I’ll give you a few tips here that you should definitely keep in mind:

1. always use the same font and font size
2. the font should best match the font in the app
3. have a consistent theme — it should have the same primary colors as your app
4. when you mark up text parts, always use the same color — consistency is important
5. when you create illustrations, always use the same kind of illustrations. Here is an example of how you should not do it. As you can see, the right character has outlines and definitely more detail than the left. 1 design and no other, that’s the golden rule.

6. for illustrations — use the same background. And a little tip: Use white. White sounds standard now, but just have a look at the following picture. Does it look really nice? Not in my opinion, but white would always look good. You can also use colors like in the upper right picture, they often look very good and are not so standard.

(All 3 pictures are from a single promo video, which fortunately has not been published yet and was checked by me before).

Okay, that’s it for this tips list.

Now you know how to create your own product videos and how to market them on social media.

Publish to the AppStore

Now comes the exciting moment. Your app is ready, your product video is ready and you can finally take off. But… how do I publish my app anyway?

Well… sometimes Flutter Documentation can help you.

Publish App on Android

https://flutter.dev/docs/deployment/android

Publish App on iOS

https://flutter.dev/docs/deployment/ios

Okay, you’re about to publish your app and then you have to specify images?! What am I going to do now?

Ok, ok, take it easy. You can take screenshots of your app via your emulators, which you then use for your images.

Then to create really nice images that stand out really well, you should use AppLaunchpad. It’s super easy to use and even huge companies like Alphabet (Google), Spotify etc. use this tool.

Phew, finally your app is published!

Now you can go celebrate for now, but only for a short time, because from now on you have to be always ready to work on this app:

Updates & bug fixes

Your app is now released and so gradually user feedback is coming in via reviews. Oh, one customer wants an improvement in this area. And the other one has found a bug.

You know what’s coming now: reply to the review, improve it and publish it.

And that again and again and again.

To not lose the overview there, you should make a table in Notion with all tasks that are still open.

“But Tomic, why shouldn’t I use Trello?”

Okay, for my sake you can use Trello, but if you did the rest of the project in Notion, why not now? Besides, with Notion you can also create a board like you do with Trello (I’ll show you how later).

You decided to use Notion?

Great, then here’s how to make the perfect overview for yourself:

First, create a table. This table has different columns, which I will list and explain here:

Title — A title is very important. This way you know immediately what it is about.

Bug, new feature or improvement of a feature? — You can easily answer this question by making a column called “Type” which is a type of “Select”. There you create the 3 choices Bug, New Feature and Feature Improvement. Now you can see right away what you are dealing with.

Priority — You should prioritize your tasks. To do this, create another column with the name “Priority” of the type Select. There you create the choices Very high (black), high (red), medium (orange), low (green). The Priority is not only there to see right away which tasks are very important, they are also there for something else we will see in a moment.

Description — Very self-explanatory, but still important so you always know exactly what’s coming up.

Okay, now that you have (almost) all the columns created, let’s move on to the table settings. First you click on Priority and then on “Sort ascending”. If you set your selections so that Very high is at the top, high is below, medium is next to last and low is last, then your whole list is sorted so that very high is at the top and low is at the bottom.

Great, you finished something from the list and have now completed it. Instead of deleting the task now, we add another column, a “finished” column. This one is of the type checkbox and comes at the very front of the table. Now click on the text “Finished”, then on “Add filter” and then on “when finished is unchecked”. Okay, as soon as you click on the checkbox for a task, you won’t see it anymore, but it’s still there in case you remember that you forgot something.

You still want to know how to create a board like in Trello? Just go there to Add View and then select “Board”. That’s it.

Conclusion

Okay okay, that was really a very long article! My full respect if you made it this far and read it through!

As you can see, there is a lot to do if you want to build your business, however, I really hope that I could help you with this post.

If so, I would be very happy about a few claps and maybe a follow, because this article took 6 hours from start to finish. Oh, and if you have feedback, please write me that! I try to get better with every post, so your feedback is very important!

Thanks for reading, have a great day, bye!