DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Get started with flutter πŸ”₯
Denyse
Denyse

Posted on • Updated on

Get started with flutter πŸ”₯

Sup !!!!, It's been a couple of days when making a dart tour, I strongly recommend to watch the previous serie before starting with this one. We are going to tackle on the key points in flutter thus give a short overview. I am now exciting to start getting our hands dirty with flutter 😊 Let's make this tour together.

GIF

What is flutter πŸ€”?

Flutter is an open source framework by Google and released around May 2017 it is for building beautiful, natively compiled, multi-platform applications from a single codebase.
This means that you can use one programming language and one codebase to create two different apps (mobile, web, desktop, and embedded devices).

So regarding to previous series, flutter is a framework of Dart and since Dart is exciting that means that flutter is interesting and easy to learn too 😝 woww this sounds interesting right?

What are the two main parts of flutter ?

  • An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android)

  • A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs.

moving forward ...

core concepts

Why should you learn and use flutter?

I am going to select this from my own experience πŸ˜‰

  • Flutter is simple and easy to use:

Flutter is a modern framework, and you can feel it since I've first used React native and Java it was kinda tiresome but then when I shifted to flutter booommmm πŸ’₯ things were different I didn't feel the sweetness of mobile development before using flutter πŸ˜‚ . One thing that I liked is that you can build native apps without a bunch of codes.

  • Flutter is fast:

Being fast I mean compared to other cross-platform development applications like React Native that require bridges between their code and native elements, Flutter eliminates additional processing steps that decrease performance making it noticeably faster.

  • Flutter is productive:

But how does Flutter support productivity πŸ€”? Mainly by build-in features that go with Flutter: Widgets, Animations and Hot reload. Hot reload allows developers to see in real-time all changes they have made to an application. In that way, all concerns that arise can be efficiently managed. Significant modifications force you to reload the app. But if you do work like design, for example, and change the size of an element, it’s in real-time!! My best part πŸ˜‚

  • Flutter is flexible:

Flexible is a built-in widget in flutter which controls how a child of base flex widgets that are Row, Column, and Flex will fill the space available to it. The Expanded widget in flutter is shorthand of Flexible with the default fit of FlexFit.

  • Flutter has got good documentation:

To be honest, I learnt flutter through their documentation, everything is very detailed with easy examples for basic use cases. Each time I’ve had a problem with one of my widgets in my code, I have been able to check the documentation and the answer was there

  • Flutter is ideal for startup MVPs:

If you want to develop your app quickly please use flutter since it is cheaper thus you don't need to develop different apps for different devices hence with flutter you will build one beatiful app for all 😊.

  • Flutter has got a growing community 😎 and furthermore it is supported by Vs Code πŸ˜‚ our very own best Code editor.

What are the flutter principles ?

  • Everything is a widget!!! so because of this principle when you hear flutter, all you hear is that every one is talking about widget, so what is a widget ?

Widgets are the central class hierarchy in the Flutter framework. A widget is an immutable description of part of a user interface. Widgets can be inflated into elements, which manage the underlying render tree. Widgets themselves have no mutable state (all their fields must be final).

  • Composition inheritance Inheritance is the capacity of a class to inherit properties and strategies from a superclass and the's superclass, etc. It is exemplified in Dart by the @override metatag. With it, a subclass's execution of inherited conduct can be particular to be proper to its more explicit subtype.

  • Widget tree The widget tree is how you create your UI; you position widgets within each other to build simple and complex layouts. Since just about everything in the Flutter framework is a widget, and as you start nesting them, the code can become harder to follow.

Flutter architecture

Aside from the core concepts that we have previously discussed, Flutter delivers the basic architecture that you can apply to your application and manage its state easily. The architecture that is used in Flutter is called the Business Logic Component (BLOC). Basically, it is an event-state based approach that allows you to trigger events and handle state changes based on them. The BLOC is a good approach that separates your business logic from the user interface and oversees business logic key points by testing. The core ideas that were used for BLOC architecture are simplicity, scalability, and testability, and all these goals were definitely achieved within the BLOC architecture. But this is a very huge separate topic that we will discuss at a later date.

Bloc architecture

For more information on how to install and setup flutter editor please head to: Install and setup flutter editor

Thank you πŸ”₯ for reading this far .. it was interesting right?
Wanna dive deep into widgets 😝 stay tuned for more articles ...
for more information about flutter please head to flutter.dev

Top comments (22)

Collapse
 
niyodusengaclement profile image
NIYODUSENGA Clement

Your articles wanna make me switch to flutterπŸ˜‚. Great article tho

Collapse
 
dmutoni profile image
Denyse Author

please make it quick πŸ˜‚πŸ˜‚πŸ˜‚

Collapse
 
insidewhy profile image
insidewhy

All android frameworks kinda suck though and flutter is no exception. Dart is quite a conversative language with comparatively poor type inference and often requires a lot of boilerplate to achieve things that would be simple and DRY in kotlin/typescript. There's also very few libraries in the ecosystem.

Thread Thread
 
dmutoni profile image
Denyse Author

nononono, Dart has got a lot of libraries out there, please head to dart.dev for more libraries

Thread Thread
 
insidewhy profile image
insidewhy

No it really hasn't, and flutter has even less.

Thread Thread
 
realsollym profile image
Real Solly M

@insidewhy Your statement is untrue. You don't need a lot of boilerpate to achieve things that would be simple at all.

Dart is no different from C#, Java and Typescript to name a few. In fact, having coded on these 3 especially, you can easily code in dart. You can even achieve the same thing in fewer lines of code in other cases.

I have coded in C# for as long as I can remember, over 15 years and I have been coding in Flutter for the past 3 years. I can tell you that Flutter has made my coding easier and faster because it doesn't require much to get it started. I have also extended my experience into dart (Angel Dart to be specific) and I can tell you that it's better than C#.

I can't compare it much to Typescript as Typescript on its own cannot produce mobile native code like Flutter does.

Thread Thread
 
insidewhy profile image
insidewhy

Dart is very different to TypeScript, the lack of context aware type inference is very frustrating for a start. You're right that it has many advantages over C# but the inability to merge two interfaces is kinda frustrating. I could list so many more annoying things about dart's type system, when you say "Your statement is untrue" I don't think it comes from a place of understanding of TypeScript at least.

Collapse
 
rubensdemelo profile image
rubensdemelo

Hi Denyse, just to clarify: BLoC is a state management. There is no relationship with Flutter architecture. Checkout this link: docs.flutter.dev/resources/archite... to know

Collapse
 
maxfindel profile image
Max F. Findel

I developed a few apps on React Native a few years back and decided to go back to web development, mainly for the flexibility and the productivity bits! But now your article really makes me consider mobile development again πŸ€”

Collapse
 
dmutoni profile image
Denyse Author

Wowww 😝, please consider it again πŸ”₯

Collapse
 
felixdusengimana profile image
Felix DUSENGIMANA

Great explanation. worth reading.

Collapse
 
dmutoni profile image
Denyse Author

sure, thank you

Collapse
 
siddev profile image
Siddhant Jaiswal

Lets begin a wonderful learning journey together @dmutoni.

Collapse
 
yongchanghe profile image
Yongchang He

Nice article and please go deeper ahead!

Collapse
 
ngaboindev profile image
Ngabo Robert

Great Article !!

Collapse
 
twizelissa profile image
Twizeyimana Elissa

great work

Collapse
 
dmutoni profile image
Denyse Author

thank you

Collapse
 
andrewbaisden profile image
Andrew Baisden

Good introduction to using Flutter.

Collapse
 
dmutoni profile image
Denyse Author

thank you

Collapse
 
uwenayoallain profile image
Uwenayo Alain Pacifique • Edited on

Great Article! πŸŽ‰πŸŽ‰

Collapse
 
dmutoni profile image
Denyse Author

thank you

Collapse
 
mikeyolang profile image
Michael Otieno Olang

A very nice Introduction

πŸŒ™ Dark Mode?!

Β 
Turn it on in Settings