Things I wish I knew when I started Flutter
By: Muhammad Hamza
Tags: Flutter, Flutter Ui, Flutter App Development, Dart, Flutter Widget

I’m going to share the following topics so that you can jump to the one which seems relevant to you otherwise you can read all of them 😃

Android SDK Error Flutter DevTools Stateless vs Stateful widget “build function returned null” Error Icons & Colors in Sidebar Hot reload vs Hot restart Emulator or Real Device for flutter run

Let’s Begin…

Android SDK Error

The first error or problem that you might get into includes statements like:

Android SDK Version (some version mentioned) license agreement not accepted

New SDK is required

Android SDK license status unknown

or any other statement including any error along with your version of SDK mentioned. All you need to do is:

Open your terminal and type

flutter doctor --android-licenses

2. Press Y to accept all the licenses

This will resolve your issue of licenses not accepted like statements. If not? Then simply Open SDK Manager in android studio

SDK Manager Button

Or you can also navigate to:

Files>Settings>Appearance & Behavior>System Settings>Android SDK

Android SDK Manager

Simply check the specific version of SDK mentioned in the error statement and click apply, it will get download and help you in resolving such kind of errors.

Tip: Don’t leave any SDK partially installed, either install it completely or remove it

Flutter DevTools

DevTools is a suite of performance and debugging tools for Dart and Flutter. It’s currently in preview release, but is under active development. ~flutter.dev

visit Flutter Official Documentation of DevTools

What you can do with DevTools?

Here are some of the things you can do with DevTools:

Inspect the UI layout and state of a Flutter app.

Diagnose UI jank performance issues in a Flutter app.

Source-level debugging of a Flutter or Dart command-line app.

Debug memory issues in a Flutter or Dart command-line app.

View general log and diagnostics information about a running Flutter or Dart command-line app.

DevTools in Action

Stateless vs Stateful Widget

When I started flutter development this was the biggest confusion I was in. What is a stateless widget? What is stateful widget? Is there any difference? Which one is better? and other similar questions.

They’re both widgets, so to find out their difference look at what methods they have:

Stateless widget: you build a widget, that’s it.

Stateful widget: you have access to the initState and setState methods. These methods exist so that you can update values (such as text, height/width etc) of the widget that you build.

Let’s say you have two rooms A & B and there’s a bulb in each one of them. In room A the bulb is always ON and you break it before going to bed and built new one every morning. While in room B you can simply switch the bulb ON and OFF. So, your room A is Stateless widget and room B is Stateful widget where you didn’t just build a widget but you are controlling its state.

I hope you get the point, you can change the state of a widget if it is Stateful and you don’t need to rebuild it every time. While you cannot change the state of stateless widget. Like, you were installing new bulb every time instead of switching it ON and OFF. Hence,

Stateless Widget is immutable while Stateful Widget is mutable

Generally, always use Statless until you can’t.

“build function returned null” Error

This is something like “Kids stuff” for programmers out there because this error is just due to missing return keyword most of the times.

Your build method which looks like this

@override

Widget Build(BuildContext Context) { //code here }

should return some widget that will be built and show up on your screen. The concept of this build method goes something like:

Hey Build function! I’m giving you this widget please build it and return it to me 😊

So, if you are not putting return keyword before whatever widget you have given it, it won’t return it, although its built and hence you might get into this error. So, make sure this stubborn word is there in your Build Function

@override

Widget Build (BuildContext context) {

return Container();

}

Gimme back my Widget! You Idiot!

Icons & Colors in Sidebar

Every icon or Color that you are using while coding in Flutter is put on the side like this.

So, you don’t need to search icons or colors in code. Just look for them on the side and the code will be in front. Helpful?

Hot Reload vs Hot Restart 🔥

Okay! Let’s face it. To be honest I didn’t know the difference between hot reload and hot restart when I started flutter. 😅

So, the concept of these two goes like:

Hot Reload == Refresh the app Hot Restart == Reset the app

That’s it! If you want to refresh a screen where you have made change like height of container, or moved the text widget a bit upward then Hot Reload will do the job. Hot reload simply refreshes the screen. It is like setState(). So, if you want to see the changes that you made do hot reload!

But, if you want to reset the state of your app then Hot Restart is there for you. Hot restart initialize all the variables, functions and whatever is inside the initState() method.

G enerally, It is recommended to use Hot Restart when you’ve added some asset, custom font, custom icons, added new package etc.

🔥 Shortcut Android Studio

Hot reload : Ctrl + S or Ctrl + \

Hot restart : Ctrl + Shift + \

Flutter’s Hot reload is Stateful meaning if you are at 5th screen and you have called 2–3 APIs there and data is being fetched then you do Hot Reload, it won’t open first screen of your app instead it will refresh your app by keeping you at the same screen

Android Developer be Like 😜

Emulator or Real Device to run Flutter App

A lot of new people goes for Android Studio and running app on Emulator and complains that their laptop or PC gets very slow. 😧

Well, here’s the thing if you have at least 8GB RAM and an SSD or any GPU then Emulator along with Android Studio is good and there’s no problem

But, if you have a laptop like mines 😅 with no SSD or not enough RAM and no GPU then please run your app on real device and use VS Code. Please for God’s Sake!

Your PC loves you! It always perform the task which you assigned it❤️

That’s all. I hope I was a little help here 😧

If (yes) => Clap();

else => HelpMeImprove();

Thanks y’all and #happyfluttering 💙