Forem: Praveen Varma

Anatomy of a Flutter App

Praveen Varma — Mon, 26 Jul 2021 04:22:23 +0000

Widgets, widgets and widgets!

So, as I mentioned before, everything inside a Flutter app is a widget. And you build widgets upon widgets just like Lego blocks on Lego blocks in order to create your app.

So let's say that we decided to create a brand new app.

The first thing we might do is we might create a Scaffold. And this is just a blank screen for our app. And inside the scaffold, we're going to add an app bar at the top. And this is a pre-built widget that simply looks like an app bar and acts like an app bar. And it's also super easy to create.

Now, the other thing I'm going to put into my scaffold is a container. And this container is just a box and it's going to contain the content of my app. Now, the container is going to have a column. So this is a column. And so now we can put widgets inside the column that stack vertically.

So, for example, the first thing I might put into my column - at the top - is a row. And the second thing is - I might put in - a piece of text. So now I have a column with two items - with two widgets: a row at the top and some text at the bottom. Now I can go deeper into my widget tree. And in my row, I'm going to add some text and an icon.

So when I want widgets to be positioned vertically - one on top of the other - then I'll use a column to lay them out. If I want widgets to be side by side horizontally, then I'll use a row. And if I wanted to add in a piece of text, then I would use a text widget. If I wanted to add an icon, then I would use an icon widget. If I want to add an image, then I would use an image widget.

So you get the point.

And by the end of building our app, we end up with a widget tree like what you see on the right here
Now, our widget tree is just a whole bunch of widgets that are nested within each other.

Thanks for the read,
Praveen Varma :)
More Flutter repos can be found here.

What gives Flutter the edge over its other alternatives?

Praveen Varma — Fri, 16 Jul 2021 06:54:41 +0000

Hey there! In the previous post we have walked through the Introduction of Flutter, incase you haven't read that, you can read it here.
Now let's see what makes Flutter, the projected next big thing in Mobile App Development!

There are as of mid-2020, over 50,000 Flutter apps on Google Playstore. Over half a million developers use Flutter every month and how much they love it is evident in forums of GitHub and StackOverflow. Clearly, Flutter is emerging a winner in the cross-platform app development space and proving a worthy competitor to React Native.
In fact, the popularity of Flutter has soared significantly despite its being such a young framework.

How unique is Flutter?

Now as I said in the previous post, Flutter simply compile that Dart code to native code for these different platforms and that happens with the help of the Flutter SDK and as a result, you get real apps spit out with highly optimized high performance code that's based on your code but that's not your code itself, instead it's the compiled version of that code and therefore you really ship code that runs on the different platforms and that's optimized and high performant because performance is actually a huge advantage of Flutter apps, Flutter out of the box gives you high performance applications.

The Flutter advantage

It's important to understand that Flutter does not use platform primitives. Now what do I mean with that? We're having our Flutter app and we're targeting iOS and Android. Now if we want to add a button then in Flutter with this UI as Code approach, we do so by adding a RaisedButton.

Now this is just an instruction in your Flutter code which tells Flutter to render a button in that part of your widget tree.
Now you could think that what happens when the code gets compiled to that native code is that this RaisedButton is translated to "hey iOS, please give me your default button", which would be a UI button element in the iOS development world and for Android, a widget.button, that we get these native buttons which are of course part of the native development environments and that's NOT what happens!

Instead Flutter has its own implementations and that's really important to understand and to keep in mind, directly controls every pixel on the screen. So Flutter does not compile your code to some native equivalence or native alternatives, instead Flutter ships with its own engine which controls the entire screen, everything the user sees and renders every pixel on its own and that gives Flutter a lot of control and a lot of flexibility, sounds great right?

Conclusion

Now you don't have to care too much about that because Flutter does it for you but it's important to be aware of that because that gives Flutter more control and less limitations and therefore, you implicitly, indirectly benefit from that.
You have a good performance, you have a lot of power, a lot of things you can configure, you have full control over how you want to build your user interface!

Thanks for giving this a read, have a great day!
Praveen Varma.

Understanding Flutter - a beginner's guide

Praveen Varma — Thu, 15 Jul 2021 05:51:19 +0000

What is Flutter?

Flutter is a tool that allows to build native cross-platform apps and that means for iOS and Android, with the one programming language and codebase. So let's have a closer look at this nice sentence here. Important is that we build native cross-platform apps, so we build both an iOS app and an Android app. We're not building a web app that runs in the browser, we're not building an app that gets wrapped by native apps, we build real apps, two different kinds of apps in the end for iOS and Android, which you then distribute through the different app stores, so through the Apple App Store and the Google Play store, that's what you get as a result.

Now you get there by using one programming language, so that you don't have to learn two different programming languages, one for iOS, one for Android, instead you have one programming language, Dart and also one codebase.

So you work in one project, you write your code once and you still get two different apps as a result and that's the cool thing about Flutter, you only learn one programming language, you only write your code once and you get two apps. Without Flutter, you would normally build an iOS app by writing some Swift or Objective C code and using the iOS development environment and for Android, you would be using Java with the Android framework or you would be using Kotlin and also the Android development environment and you would have to learn all these different languages and tools and you would have to write two totally different apps or work in two totally different projects and with Flutter, that's not the case, one programming language and one codebase!

How it works?

The term Flutter refers to two major things. One is an SDK, a Software Development Kit, you could say a collection of tools that allows you to write one codebase with one programming language because it includes tools to then compile this code, which normally would not run on iOS and Android, into native machine code that does run on these platforms because if there would be one programming language that would work on both platforms, we wouldn't need Flutter, but there isn't one!

Now therefore, the one programming language Flutter uses doesn't work on iOS and Android, so it needs to be compiled to native machine code for iOS and native machine code for Android so that we have code that has run on these platforms and that compilation task, along with a couple of other things, that's all part of Flutter but of course, it's not just a collection of tools, it also gives you everything you need to create beautiful applications.

It gives you a framework, a widget library for that one programming language which is called Dart which you can use to build beautiful Flutter apps.

It gives you a vast collection of reusable UI building blocks, these so-called widgets, so these are things like buttons, tabs, text inputs, drop downs, you get all of that out of the box. You can style them and customize them and then you build user interfaces with these tools. In addition, you get a couple of utility functions and generally, some packages that help you build what your users see and what your users interact with and then that code which you built with the help of that framework, that is then compiled native machine code with the help of the SDK.

Dart

Now as I mentioned, Flutter uses a programming language called Dart. Dart is a programming language which is focused on building front-end user interfaces, front-end apps. It's not limited to building mobile apps, that's just what Flutter uses it for but Dart is independent of Flutter and you can also build web apps with it. So it's a programming language built to make it really simple to build front-end user interfaces.

It was developed by Google, just like Flutter, so these are actually two independent teams in Google but of course they're working together to improve each other and therefore, we have a hand in hand solution here and in case you already have some programming experience, it's an object oriented and strongly typed language and its syntax is a bit like a mixture of JavaScript, Java, C#.

In a nutshell

Flutter builds up on Dart, it's a framework for Dart and Dart actually is the programming language which we're using, Flutter then just is a collection of tools, a set of features, utility functions and these widgets which are implemented using Dart, so that you don't have to reinvent the wheel there but you can write your own Dart code and use these existing widgets in your code so that you don't have to again reinvent how a button should look like and work but use the pre-built button instead and then just customize it to your requirements, that's how this works.
And in addition as mentioned, Flutter also gives you that SDK, so all these tools for compiling your code in the end.

Thanks for reading, hope you have a great day :)
Find me on GitHub here to have a look at my Flutter repositories!😊