DEV Community: Aspiiire

Flutter - Riverpod how to install it

Aspiiire — Thu, 20 Jan 2022 08:04:20 +0000

In this simple and brief tutorial we are going to see how to install this fantastic package when using Flutter.

So.. How to install Riverpod?

The easiest way to install this package is by simply running "flutter pub add flutter_riverpod" in your terminal; The package will be added automatically in your pubspec.yaml

Since I don't want to give you the fish but I want to learn to you how to fish, that's why I am going to explain about the entire process!

First before installing the package you can retrieve it on pub.dev named "riverpod_flutter"; Pay attention and don't confuse it with "riverpod" only, cause this last one is meant to work with only Dart.

This is the page: Pub.dev Riverpod Flutter

Now you can go under the install tab and copy the line to add it manually, it something like this:

flutter_riverpod: ^1.0.0

I showed you the entire process cause, most probably the version will be changed when you are going to see this tutorial. So you shouldn't copy my line but I suggest you to check the last version from the website.

After copying this line you should head on to the "pubspec.yaml" and paste it under dependencies

dependencies:
 flutter:
 sdk: flutter
 flutter_riverpod: ^1.0.0 <--- You can copy it HERE!

In this case will be put under dependencies because we need it in production too!

There are some packages that should be put under dev_dependecies cause are needed only under development, like debugging helpers, loggers etc.

Now if you are using Visual Studio Code, by Saving, a command should start automatically and update your packages, if not or you want to do it manually you can type this command on your command line, also known as Terminal or Shell.

flutter pub get

Now the package has been installed and the only thing that you need to do to use it is to import it on the files that is needed.

If you prefer the video version here it is

Flutter - Futures, Async and Await

Aspiiire — Wed, 08 Sep 2021 14:31:26 +0000

An important topic that inshAllah(God willing) will allow us to communicate with the external world!

If we want to talk about async and await we should first talk a little bit about Futures...

Futures? What?

Futures allow you to work with asynchronous code, let's pause 1 minute here....

When you write code you could have Synchronous code and Asynchronous code.

With Sync code we mean the normal code that you write, it works in a linear way, an instruction then follows the next one, then the next, you know that the last line it is the last one that will be executed!

On the other hand with Async code works in a non linear way. it waits for some code to return in the future, a function that is Async it will run when it has done his job.

I KNOW, I KNOW, IT IS NOT TOTALLY CLEAR... LET ME ELABORATE BETTER

You define a code asyncronous by using the async keyword before the body; Now that your code will be async you can use inside the body the await keyword (await can be used only if you define a code asyncronous).

As example now I'll use same invented name function that late inshAllah I'll use in the code to let you understand how everything works.

You should use the await keyword for a Future function , in our example we are going to call it "getSomethingFromInternet" ,in this way you are saying that that function it has something that will return in the future (We don't know when and how much it takes), after the Future end his job, will return a Future of the type defined by the future, in our case "String" since we have defined our Future as "Future";

"Future" means that we expect a string when the future is completed.

Note: On async code, al the code before the await will run syncronously, when it find the first await it will wait for the value to completely return, as completed, with value or error!

Now, on our main we use a variable to store our future, calling await under our Future like this:

String gotSomething = await getSomethingFromInternet();

We want to store the result of our function inside the "gotSomething" variable, If we don't use the await keyword we will have inside the variable a Future, but since we are using it, at the end we will have a string with the value "Something from the internet".

// We define our function as async
void main() async {
 print('This line runs before await');
 // Until here the code get executed syncronously
 // Here it see the await keyword, it waits to to value to return
 // In our case will return a string with 
 // "Something from the internet" after 4 seconds
 String gotSomething = await getSomethingFromInternet();
 // After 4 seconds continues to execute the remaining code
 print('This line waits for the values from the future');
 // Now we are ablet to use our variable with value fetched asynchronously
 print(gotSomething);
}
// We define a function that will return something from the future
Future<String> getSomethingFromInternet(){
 return Future.delayed(
 const Duration(seconds: 4),
 () => 'Something from internet', 
 );
}

In this example when we use Futures in this way waiting for 4 seconds we simple are simulating a internet call without going too much specific, in real case scenario you will use usually futures to make calls to a web api for example.

APIs have endpoints that could return something, as explained on my previous article; When you define for example an endpoint from your Rest API and you want to get the results from Flutter you use Futures cause you don't really know if and when the server would reply;

The server could reply to you after 10 seconds cause you are in U.S. and my server is in Germany, or to me could reply after 1 second.

We don't know how it will reply, if the server at the moment of the call is working fine and it has no problems, or if it down because some black hat hacker just attacked it.

To make things simple and unserstandble we use this simple example.

But, since we don't know

But, there is a but, there is always a but!

Since we don't really know if the server will reply with a value or with an error, that means that we should take some sort of precautions, am I right?

We cannot pretend that it will always return us a value because it doesn't work in this way, if you call a web API endpoint you don't know if at the moment it is working or it has some issues, if you made the wrong query etc.

The way to be safe and not break you application is by using the try catch keywords.

With those keywords you are basically saying "Please try this code, if there is any error then catch it and execute the catch block"; When there is any error, the execution inside the try block stop and the catch block executed the code inside it with the error received as parameter.

Now, we should really do an example to make things more interesting and easy to understand!

This is an example that i found on the dart documentation.

// It is void cause we are only printin the order value
Future<void> printOrderMessage() async {
 try {
// We use the await keyword get the async code
var order = await fetchUserOrder();
print('Awaiting user order...');
print(order); // We print our content
} catch (err) {
 print('Caught error: $err');
 }
}

Our application starts from here, as explained before the code inside the try runs but if we have any error the code stops from there and continues inside the catch block;

Now we really want to know what's inside fetchUserOrder so we are able to understand better the flow of the code.

// Here we return a string if the future completes with value
Future<String> fetchUserOrder() {
 // Imagine that this function is more complex.
 var str = Future.delayed(
 const Duration(seconds: 4),
 () => throw 'Cannot locate user order');
 return str;
}

Here if you watch carefully you'll se a throw, that means that the function will throw an error "Cannot locate user order".

Well let's take a look again at our printOrderMessage

// THIS IS A COPY OF THE PREV FUNCTION
Future<void> printOrderMessage() async {
 try {
 // We use the await keyword get the async code
 var order = await fetchUserOrder();
 print('Awaiting user order...');
 print(order); // We print our content
 } catch (err) {
 print('Caught error: $err');
 }
}

Now that we know that our cool function fetchUserOrder() will throw an error, we know that when it reaches the point where it is called the flow of our code stops from there and moves to the catch block of code;

Inside the error parameter we will be able to access our error!

But why we should use try and catch?

That's a good question! It seems that we are complicating our life by adding try and catch, but in reality we are not.

When we write code and there is any error that means that the execution of the code is going out of our plan, the plan that we have wrote, you user must follow the main road and not go outside!

If we have errors it also means that our application will break and eventually stop.

We use them so we can have a plan B ready, in case if...

There are some cases where you want to stop the user from going forward, as an example you have the classic user login.

In other cases you want your user to still continue his navigation, for example, if the user want to add an article as bookmark but you have some issues in that specific endpoint, you may want to show a simple popup that says something like "We have some troubles now, please retry later" or "We are updating our service, please retry later", you probably come over one of this cases.

Another useful thing that you may want to do is to save the errors in a log file to be accessed in the future by you (Developer) to have a better view on why things brake down so you could improve you application.

Yes! We did it

That's the end my friend, inshAllah (God willing) I hope that you found this content easy, enjoyed it and most importantly, you have learned something from it!

Please let me know if and how I could improve more my content.

If you still have some troubles, please check out the Youtube video related to this article, I have explained 2 example from the dart website piece by piece.

Why testing is important?

Aspiiire — Mon, 02 Aug 2021 12:36:19 +0000

Testing is by far one of the most important things to do during programming, but it as well one of the most overlooked things.

Testing ensure that you have a well working Website, Application or Software, let me explain.

Why Testing is important?

We are humans, we forget, we make mistakes, we change things, ideas; This if we work solo, imagine when you are in a team!

When we add new features or edit previously made code, to be clear, when we touch stuff, sometimes you can create some issues in the other part of your application;

Wouldn't be cool if someone could check for you that is everything fine or you have broken 3 modules of x or y class, function, or whatever?

Nah, it takes time

Yes, it takes time, following for example TDD takes a little bit of time, but, if you count the time that you will not spend looking for bugs after you find that 50% of you application is broken, it is better.

I would say that it will takes a little bit of time at the beginning, but at the end will take less time.

Instead if you code without testing when you have a full production application and, for example, you add a new feature breaking parts of you Application, I'm pretty confident that you'll have a harder time.

The beautiful thing about testing is that you are able to follow the exact point in which your function has problems.

Yes you guessed it, this is the purpose of testing...

We are not perfect, testing allows us to check that everything is as it was before nothing has changed and every behavior is exactly how we have coded it before, the function receives the same inputs and gives the same outputs, the overall Application works as intended.

If you could catch minor problems before they transform in huge holes in your software in the same moment you create them I think that it's a fantastic news.

If you don't, a simple bug after days and days, weeks, months, more people working on the project and you have to solve a huge problem that you could have solved by implementing some tests.

More tests, better quality

If you cover a well amount of your Application's modules, you can be pretty confident that you have a well working Software, that means that the quality is better since your double check everything.

Another important benefit of testing, is that helps you and other to understand more about x or y function, since you will have a descriptive name that give the reader what are you testing.

How I should start?

I suggest you to follow the Test Driven Development process always abbreviated as TDD;

It works like this, first before you write any function that you want to test, you begin by creating the test, yes before even the actual thing that you want to test exist.

You write a test for that function with the main goal that you want to achieve in your mind, then you develop the function.

Probably you would not expect this point when you follow TDD but it helps you to be more productive!

More?

There are many types of testing, the one that I've described is defined as Unit Test, there are many types of testing.

Unit Testing focuses only on a single unit, as the name suggests, and it doesn't care about the connection of your function with other parts, in which you should follow another type of testing, for example, Integration Testing.

This is it!

I've learned about testing in many sources that I cannot recall now, but one book that I remember for sure is Clean Code...

I link a referral here, if you prefer the digital version, I suggest you to get a bundle by the author of Clean Code and Clean Coder at a lower price.

---- US ----

---- IT ----

Thank you for reading 😀👋

I hope that you enjoyed the content and it was nice to read, inshAllah in the future I want to release a more specific example about testing, with Flutter and Javascript.

If you want to follow me on other socials here I'have some links...

Youtube
Twitter

Flutter Web SEO problem workaround

Aspiiire — Tue, 22 Jun 2021 09:34:52 +0000

Flutter Web has a big problem, you like Flutter but then you get to know that Flutter it is not well optimized and has some problems with SEO.

Check this out! I'll give a few trick to use until, they, if, fix this problem.

So what's the problem?

For Web Flutter use the canvas tag! For those who don't know, the canvas is a tag used for drawing;

It is a really powerfull tag, it let you achieve goals that otherwise are not possible, like complex animations, new ways of interacting with data etc...

Ways that are not possible with the standard HTML, CSS, JS at all.

So what's the problem? seems good right? No bro! The problem is that the Search Engine has not way to understand how your content is made, since it only understands textual content.

No Flutter?

Flutter is a great SDK it saves you a ton of time, so I don't se why you should use it anymore, I mean yes it has this problem, but we can find some workarounds.

Before they solve this problem it may take a lot of time, let me tell you how to.

How to!

I would say that when you want to develop for the Web you should one take in consideration the project that you want to create!

If you want to create an article based Website like Priiimo.com or This one Dev.to then you can split your website in 2 parts, the part that will show the articles to serve it with node, php or other ways and the hidden part that needs authorization to do it with Flutter; So all the complex part that, for example, contains the management of users, analytics etc...

What do you think? I'll give you another Idea, for example, you can as before use Flutter to create a sort of CMS that will generate HTML pages.

In this way your contente will be visible by search engines without problems.

Don't do this!!!

You have to be careful when serving content to search engines, one solution that probably you had in your mind was to show a clone content of what's visible on your App in a way or another, BUT....

This MAY be a violation of the of Google's guidelines if you are targeting this one; It is called Cloaking.

Here you have a link that explains more about this thing.

Video?

Javascript Closures the easy way

Aspiiire — Tue, 15 Jun 2021 16:18:28 +0000

Closures in javascript seems a hard topic as it is portrayed by the majority of people, in this simple explanation i will break it down and show you that in reality it is not.

Let's start with a simple well known example:

function createCounter(){
    var i = 0;
    return function(){
        console.log(i++);
    }
}

var x = createCounter();

In this example i firstly have defined a function createCounter that contains a var definition i initialized to 0 then i return an anonymous function.

Inside this function i simply increment the value of i.

At the end i have defined the variable x that once executed it will contain the returned anonymous function, to clarify it will contain something like this:

function(){
    console.log(i++);
}

I said "something like this" because it will not only contain the function seen before but it will enclose the i variable, what i mean is that this function will have a reference to the outer scope's previously defined i variable.

Now... What happens when we execute the x variable? It prints out the value 0, 1, 2, 3.... but the strange thing is that it remembers the state of the i variable and it increments it, well, this feature it's the so called closure.

You have access from your function to the outer scope to a reference of i, if you see the definition given in the Javascript MDN you will see that fits in perfectly:

Another example

Let's do another example, this time i will add a new little little difference:

function createCounter(){
    var i = 0;
    var m = 5;
    return function(){
        console.log(i++);
    }
}
var x = createCounter();

If we execute this example you will see that inside the x variable enclosed in you have only the i variable and you can't see the m variable; That means that you have only enclosed the used variables.

To try this type console.dir(x)

I hope that in this breaf explanation i have clarified a lot of misconceptions about closures.

Design your App or Website now for FREE

Aspiiire — Mon, 07 Jun 2021 06:39:54 +0000

You must design your Website or App instead of rushing to programming, this if you value your time and you don't want to waste it!

Those apps are really easy and fast to learn, so it will take only a few minutes.

Not only you can design you can even prototype and see how it will look line in various devices, you can even try it on a physical device.

I suggest 2 applications, the ones in the image above:

BUT, You should take into consideration that... Figma is used in your browser and can be used anywhere, even if you are using Linux, Adobe Xd can be used only by Mac and Windows users.

The cool thing about Figma is that now you can open it in any place you want you just need a connection, and a browser, not installations required;

If you have an iPad you can open it with an App called figurative, sadly Adobe XD it is not accessible, since the Application present on the IOS store is only used to test the result of your prototype

Using Adobe XD you must have it installed with the Creative Cloud sync (Place where you have stored all your adobe files) you can get your document from the network.

Both offer a Free version, which is perfect to get started.

inshAllah we are going to see how to use Figma, don't worry about Adobe XD you can find the same written tutorial at the end!

Video or Article?

How to use Figma (Fast easy tutorial)

After you login, you will see a screen like this one, if you press the upper right part ( Were the arrow is pointing) you can create a new document.

Now click on "Design File" to create your document.

You have just created a new document, you will see this upper menu with all the tools that you need to design your super cool stuff 😁

The tools in order are:

- Selection tool to select objects
- Frame tool to create frames
- Create shapes or place images
- The pen tool to create paths
- To create text
- To move around, you can click the middle mouse to move around

Now that you are ready to jump in, let's select the rectangle, so we can draw some stuff.

If you click the arrow near the square icon a popup will appear with all the shapes that you can insert, not only this but even images.

Now let's create a simple shape, you have to click on the blank space, move your mouse until you create you rectangle then release the mouse click.

You can always adjust it at your liking, for more precise misurations you can use the right panel to change the Width near "W" or Height near "H".

In the same panel you can change colors by clicking the cyan rectangle.

Now from the panel use the move tool. we want to change our borders radius.

Simply drag from the inner dot to start changing the corners. You can do this operation from the right panel too; Near the corner symbol under "H" present in the image, where you can see the value 26.

By applying this steps you can play as you wish and easily you can come up with really cool stuff just like the one that you see here, basically now we are ready and done with the first screen.

Now let's select the rectangle by clicking on the rectangle tool, NOT the arrow since in this way it will open a menu with all shapes.

Create a new simple square; I suggest you to press shift and then create show it will lock the width and height and you'll get a prefect square instead of rectangle.

After doing so if you move one of those inner circles you are able to change the box radious, you can do this from the right properties panel too.

Now let's add a light shadow; From the right panel, near effects, click the plus button e choose dorp shadow as effect, then click the sun icon near the drop down input and tweak your shodow as you wish.

It should look like this one, it's barely visible.

Now press ctrl then drag to the right our circle to clone it.

We want o add some icons to add inside our created boxes. Basically to do so we should first press the right arrow near the shape, you will see a "Place images..." click it and you are ready to go.

You can even upload multiple images if you, want or need.

In my case I'll upload 2 images.

This is how it should look like after moving the images inside our circles!

Now let's add a new text box below and.....

Prototyping

Now we are ready to create our first prototype.

Prototypes are used to test your design and to get a feel on how it will look like when ended.

You have some basic actions like tap and scroll and you can create multiple connections between pages.

You have different preset resolutions, like iPhone X, Samsung Edge etc.

Now you should select everything and then frame it so we can use it for the prototyping phase.

Basically when you frame them you are creating a wrapper for those layers, you can also directly create a frame at the beginning by using the frame tool;

I did it now cause I wanted to make thing easy and let you understand things phase by phase, but next time you could start by creating a frame directly.

Now you should see a frame like the one in the image. If you expand it you are able to see all the layers that we have created before.

Now you have to duplicate your frame so we will have 2 similar screens;

Tweak the second frame so that may represent a second phase, a page to transition to, in my example the first image represent a sort of list of images and the second screen the details page.

Under the second page we have the previous page button so we can go back if needed.

We can make the transitions in the prototype page.

Now you are able to prototype, you should go into the prototype tab in the right panel to start.

From there you will see bunch of options to help you tweak the settings of your proto.

If you want you can choose a resolution in witch will be seen the result, or you can set it to default value 'none'.

If the resolution doesn't match your screens you can change your frames resolution by clicking on them and tweaking the right panel width and height.

When you are ready press the play button at point 2 and you are ready to preview your work

Now we can start to create our first connection. Hover over the white wrapper element and you will see a little '+' icon with a circle border.

Press is and drag until the next frame of page2 that we have cloned earlier.

You will see a new popup that will appear attached to the right panel, you will find all the settings about this specific interaction.

The first option is used to choose the type of option that you want to do, for example in our case we want perform the transition action when we "tap", just to clarify more, that means, that when you tap into the box that we have connected previously you will go into the second frame as specified on the other tabs, "Navigate to", "Frame 2".

We can change our animation from the default from "instant" to slide in.

Now we want to create another interaction that can help us go back to the previous page; Just follow the previous process.

Now by clicking outside you will see all your connections and if you click on one of your connections you will see the previous popup near the right panel for tweaking the Interaction.

That's our result if you try it by clicking the play button a new popup will open up and you'll be able to try your prototype, now if you try to click on your first item you will get to the second page.

After you are on the second frame, if you click previous page, you'll get back to the first page.

That's it, as you have assisted is not difficult and it's really to use.

Now we are going to see how to do the same process with Adobe Xd.

How to use Adobe Xd (Fast easy tutorial)

Adobe Xd must be installed and can be installed on Windows or Macintosh, documents can be saved with the creative cloud to be retrieved from other places.

I prefer Xd over Figma but this is only my opinion; Sadly I have to switch from Linux to Windows every time to work with it.

One thing that offers Adobe Xd that is not present on Figma is plugins.

Now we are ready, let's begin
😁

From the first screen select you preferred size, I would go for the iPhone one but it doesn't matter to me since I want only to show you how to use Adobe Xd.

At the right you will see all the tools that you can use, you have the various Shapes that you can insert, you can use the to create complex results and group them.

The line to insert lines, the pen tool to create paths, text tool form text insertion, and at the end the artboards;

You should see the artboard as a page, for example for every screen that you have in your app you should create another page.

We are going to change the resolution, just to adapt it to our liking, you can do the same if you want.

For websites you may want a much higher height size.

The blue dotted bar indicates how much of the viewport will be visible during the preview.

If you have for example an article page, you should drag the height of the artboard to make it let's say for example 1000px and the viewport should be the height of the device that you want to take into consideration.

During the preview, you can scroll down and up automatically, don't worry about that.

Now create a new box inside our artboard by choosing the shape rectangle from the menu.

At the right, you have the tab in which you can change the settings of any object when you click on it.

We want to change our background color. To do so, at the bottom of this panel, click the fill box, a new popup will appear.

Here you are able to select any color you like. Choose one and let's move to the next step. 😄

You can change the radius in 2 ways; Hover over the shapes that we have created earlier and you'll see an inner dot near the border, click on it and move it up and down to change the radius.

The second way to change the radius is from the right panel.

From the tools select the text tool, it's time to create a new text for the title.

Create a simple text and change his fill color to white, we need a little bit of contrast.

Let's create a new shape for the items, let's create a box, change the radius and fill the color to white.

Try to practice without going back and to remember what we have done.

From the right panel, we want to add some light shadow.

You can change the X and Y axis to change how the shadow will be projected, Blur if you want to change the blur.

Now let's clone the box that we have just created by pressing the D button and dragging it in the right direction.

Let's add 2 images, or icons to our project by drog-n-drop, you can use this feature from result images too.

We want to put this images inside our boxes.

Now let's use the radius to make the square circle since I think that it'll look better in this way and let's adjust our images to be inside.

Select the image with the box behind and click the right mouse button and select 'group' to group them; Do the same thing with the other image.

Now you have a group of images if you want to edit it just double click it and you able to change the individual parts.

Add some text at the bottom.

We want to duplicate our artwork so we can create a second page to use when prototyping, to do so you have to press ctrl and drag to the right or any position that you want your screen to be on.

Now tweak it a little bit and you should have a new screen, add a previous page under the title so we later we can create an action to return back to our first screen if needed.

Time for prototyping 😍

In the upper left part click the "Prototype" tab to start prototyping.

On this page you the elements will respond differently when hovering over them, you are not able to edit them, to do that you should go back to the "Design" tab.

As you can see when you hover over the "previous page" text you will notice that a little button with an arrow will appear to the right center part, click it and drag until you reach the first screen(Like the next image) to create a connection to the first page.

From the right tab, you can change the options about your animation, n our case we want to transition to the home page with a "Slide right" animation.

Do the same operation by creating a new connection from the first element to the second page.

You can change the settings for your animation just like before.

When you are ready and you want to try your application just head to the upper right part and press the play button.

You'll see a new window with the screen result.

This is our final result, if you try to tap on the first screen you'll go to the next page, after clicking previous you'll go back to the first screen

That's it 😊

If you want to see more stuff be sure to check the Youtube video, I've made a the connection of the second page in both tutorials, the one about Figma and Adobe Xd.

We can say that the applications are similar, with this examples you are able to choose the one that suits you.

Error 410, save your Website

Aspiiire — Wed, 03 Mar 2021 16:07:48 +0000

One thing that is really scary about SEO is if Google penalizes our website for some sort of mistake that you do since You don’t want your website to go down and “POOF” vanish. So, I think that you should check this out!

Why you should care?

If Google serves a resource to x clients and you suddenly delete this resource that means that google now serves a broken resource; I don’t think that if you had a shop you would ever serve to your client a broken thing!

That is the main reason why you should care to serve an appropriate code status, since if you leave the status to 404 you telling Google that you have a problem with this page but it will be solved soon.

What is 410 Status code Error?

The 410 Gone status code error, indicate that the resource is no more available as stated on the Mozilla resource

410 Gone client error response code indicates that access to the target resource is no longer available at the origin server and that this condition is likely to be permanent.

When to use the 410 Error?

It’s important that if you delete a resource, more importantly, if you have websites that let people insert, edit or delete articles just like dev.to or hashnode.com to send the 410 Error status code.

Don’t let the page float with the 404 error, it’s more appropriate if you return a 410 error.

This status must be returned only when you are sure that the resource will not be available anymore.

When to not use it?

If the resource is no more available for a limited time then you should use a 404 status

Thanks for reading 😀👋

Should you learn Flutter in 2021?

Aspiiire — Fri, 19 Feb 2021 16:35:55 +0000

👋 HEY, so my goal in this article is to reply to some important questions that usually beginners have with Flutter… Should you learn Flutter? should you use it or not? When you should not use it?

I’m a web developer with 5 or more years of experience, I learned Flutter so I can develop applications for multiple platforms at the same time, BUT… I still make websites with Javascript, Node, HTML, etc…

In this article, I’ll give you some information about that 😀

Prefer the video? 🔥

Let’s talk about Flutter since it’s a technology that is getting more popular every day.

The main questions are

You should learn Flutter? When and Why?

Multiple platforms

If you want to learn a technology that allows you to develop on multiple platforms at the same time then this is for you.

Flutter allows you to develop with the same codebase on multiple platforms EVEN THE WEB!!!!

You can develop your applications for Android, IOS, TVs, Web, Windows, Linux. Upcoming FUCSIA!!

As you can see it works with all known technologies of today, using it will allow you to write with the same code and ship it for multiple platforms, this is a HUGE benefit in my opinion!

Waste less time!!!

If you want to make any change you will not lose time having to build your application but you can see it changed in the same second you save with the hot reload feature.

The most beautiful thing is that you will not even lose the state; So if you are working on the styling of a button after a popup opens you don’t have to reload every time to see the changes!!

I have also to add that since you develop for multiple platforms you will have more time free so you can chill out more… Just kidding programmers never chill out, maybe you’ll have more time learning new technologies 😉

Flutter is FAST

I’m not only referring to the fact that Flutter runs really fast and smoothly even in older devices!!!! (I have tried it and I was impressed how it works soo good 🤯)

I’m also referring to the fact that with it the development process is really fast compared to all my previous experiences!

How feels?

Sooo… Working with it is really enjoyable I have always worked with web technologies like Js, Node, Sass and all this cool stuff… but… Flutter was so cool to work with… probably for his different approach with all those widgets.

I’m not the only one that says that! As I red it’s a known thing, so it isn’t only my personal opinion.

But… Here is when you shouldn’t

This is just advice! in my opinion, you shouldn’t use Flutter if you want to create something that requires a deep dive into the device stuff. If you need to do that is better if you go with the native language, you have more open access to the device; Or you can create your own packages that do your wanted feature!

Since Flutter works with packages that means that you have to use a package that someone wrote in the native language, or you can write it yourself!

But these are only rare cases!!! cause for the majority of people you can work with it absolutely without any problem.

For example, for websites, I still use Node, JS, HTML, CSS etc cause I’m obsessed with SEO, so if you like me want a perfect performing SEO website and you want to stay in control at the minimum level you should think about that, but as I said before usually you can go fine with Flutter!!

Flutter is backed and used by Google

Since Flutter is used by Google that means that they rely on it! and it will not be a lost project, and even the community responded in a positive way.

It is used even in the Fuchsia project, which means also that Google will always push it and try to improve it!!

Yes

That’s it! thanks for reading, let me know what I should improve about my writing or share your opinion about what I have said! In this way we can learn together 👋🔥🔥🔥

TRICK to level up your HTML?

Aspiiire — Sat, 16 Jan 2021 15:24:32 +0000

If you are lazy or curious you can watch the video version, please consider to subscribe, help me to reach 100 subs :D

Why you should care?

The first times writing HTML it's cool and nice but when you learn it and get used to it starts to be a lot annoying to write every time open tag, close tag and all those brackets!!

Now I would show you a way that let you get the same result (output) with less code, so you will not have to write the redundant part of HTML but only the essential!

THAT'S FANTASTIC (YOU WILL SAVE SO MUCH TIME!)

COME ON!! give us the trick!

I'm talking about PUG, a well known template engine! But now you may ask why i should use it why loosing time... first of all you really don't have to learn something new, let's see the main benefits.

Cleaner code

As you can see on the first hand written image the code at the bottom it's a loooooooot cleaner and easy to understand; This applies so much when you have tons and tons of code.

Faster Development Time

Insted of loosing time opening and closing brakets repeating tag names you will go a looooot faster (I know snippet exists) but it always better to write .my_class instead of a snippet IMHO :D

More Power

Things doesn't end here, with pug you could use all the power of javascript, you could use conditions, loops, mixins, import other pug files, extend layouts and more...

Let's try it out

If you want to jump right into it without wasting even a second you could use codepen.io, open the website and you are ready to go!

On the homepage press the "Start Coding" button then from the left cog near HTML click it and on the settings under "HTML Preprocessor" select "Pug"

If you want to use SASS like me (since in my opinion they are amazing together) go into the left "CSS" voice on the Pen Settings or click the cog near "CSS" and choose "SASS" as Preprocessor.

Let's test it out :D

.simple__block
  .simple__title
    h1 This is a title
  .simple__desc
    p This is a description

Super fast and super easy as you can see ;)

Time for some SASS code, I absolutely love that to write my sass code I have only to copy the PUG code and put it inside SASS!! 😍️

.simple__block
  background-color: blue
  .simple__title
    background-color: cyan
    h1
  .simple__desc
    background-color: purple
    p

This is the codepen version:

Time to try it locally

For those who are convinced and want to try it directly into their PC now we are ready to do it. Prepare you terminal.

To install it I will use node with express to create a local server, but! but... there are other ways to install it.

Let's start by creating a new folder that I'll call install-pug, enter it and type "npm init"... follow with the instructions bla bla bla

We are ready to install some packages... you have many ways for the instructions to install PUG for example nmpJs or their website pugJs or even github!

let's copy the install command "npm i pug --save" and throw it inside our terminal press enter and wait.......

Time to go inside the ExpressJs website and as before copy up the install command under "Getting started > Installing" copy "npm i express --save"

As before put it inside your terminal and press "ENTER"

Time to CODE!!!!

To go fast(since this article is not about ExpressJs or node) Let's copy up this code that i got from the ExpressJS website :

const express = require('express');
const app = express();
const port = 5000;

app.set('view engine', 'pug');

app.get('/', (req, res) => {
  res.send('Hello World!');
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
})

I have added to it a line of code "app.set('view engine', 'pug')" that let express know that you want to read PUG files instead of HTML!

Open up your project with your editor, I'll go with Visual Studio Code!

Create a new file called "index.js" and paste inside it the code that you have just copied...

Now run you server by pressing "F5" and let's see if everything is running our terminal should log a message with "Example app listening at http://localhost:5000".

Open the browser and go into this address you should see a Hello Word! String :D

Yeah ready to write pug code

Create a new file under /views/home.pug and write inside it some pug code for example

.simple__block
    .simple__title
        h1= someStuff
    .simple__desc
        p This is a desc

Go back into your index.js file and change the 10th line from "res.send('Hello World') into res.render('home').

Restart your server and you will see that everything works great :D

Bonus

You could pass data before you render your PUG file to do that you have to pass an object as second parameter let's see how

instead of this:

res.render('home')

write this:

res.render('home', {
    someStuff: 'Wow thats cool'
});

Now if you go into your home.pug file and change your p tag

from this:

p This is a desc

to this:

p= someStuff

Restart and you will see the magic (This is not a feature of PUG though)

Super Mega Bonus

It was long journey man, for me that I had to write all this stuff and for your that you had to read all this!!! (people that jump back and forth are not included 😅️)

Now let's see a simple example of iteration

change your last class from this:

.simple__desc
    p= someStuff

to this:

.simple__desc
    - 
        const anotherVariable = 'some stuff';
        let i = 0;
    while i < 10
        p This is a desc
        - i++;

Ooook now?

Now with this trick you have saved soooo much time, in the time that you have left maybe you could subscribe on my Youtube channel since i'm new and looking for subs or maybe not 😅️

Jokes aside, if you want more tutorials like this let me know so maybe I can write some... or maybe not 🤣️

Easy way to write FORMS in Flutter

Aspiiire — Mon, 16 Nov 2020 10:37:02 +0000

Hey guys, today I'll try to explain to you in the most easy way possible how to create forms with Flutter.

Before we start we need to know....

Why we should use forms

Forms help us in automating the manipulation of our inputs For example with only on trick we could validate all our inputs without extracting every single one!

But... how forms work?

I will use two important features about the forms, the validate and save methods.

As I said before about automating, the validate method once called it will validate all our inputs by calling the validator inside each Input.

The same thing applies for the save method, it will call all the onSaved functions inside each Input.

It seems obvious but every input must be inside the form Widget.

I simple summary about what I have just said :D

Time to show something

We start by using our form widget and put inside it all our inputs.

Forms needs a GlobalKey so we can identify it when needed.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: MyForm(),
      ),
    )
  );
}

class MyForm extends StatefulWidget {

  @override
  _MyFormState createState() => _MyFormState();

}

class _MyFormState extends State<MyForm> {

  final _keyForm = GlobalKey<FormState>(); // Our created key

  @override
  Widget build(BuildContext context) {

    // The form widget
    return Form(
      key: _keyForm,

    );

  }

}

It's time to create the fields that we want to add to our cool form!

Let's suppose that we want 3 fields...

name
password
email

To add these field we will use a simple widgets that will provide us with the basic graphics of the material design, this widget is called TextFormField.

The field that will contain our password will have an extra property "obscureText" to show the black dotted chars instead of the actual visible password. 😉️

Only for style purpose we add a hint text so the user knows what to insert in that field 😁️

class _MyFormState extends State<MyForm> {

  final _keyForm = GlobalKey<FormState>();
  final _name = TextEditingController();
  final _password = TextEditingController();
  final _email = TextEditingController();

  @override
  Widget build(BuildContext context) {

    return Form(
      key: _keyForm,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: ListView(
          children: [
            Container(
              padding: const EdgeInsets.symmetric(vertical: 20),
              child: Text('Some inputs...'),
            ),            
            TextFormField(
              controller: _name,
              decoration: InputDecoration(hintText: 'Insert your name.'),
            ),
            TextFormField(
              controller: _password,
              obscureText: true,
              decoration: InputDecoration(hintText: 'The password to log in.'),
            ),
            TextFormField(
              controller: _email,
              decoration: InputDecoration(hintText: 'E-mail to use for log in.'),
            ),
          ],
        ),
      ),
    );

  }
}

Wait.. User class?

We will create a simple user class only for the purpose to show how we can save our user his properties are not final... 😵️

class User {
  String name;
  String password;
  String email;

  User({ this.name, this.password, this.email });
}

Now it's time to validate and save

Now it's time to add the famous validator and onSaved explained at the beginning

Now it'll look like this..... 👇🏻️

return Form(
  key: _keyForm,
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: ListView(
      children: [
        Container(
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: Text('Some inputs...'),
        ),
        TextFormField(
          controller: _name,
          decoration: InputDecoration(hintText: 'Insert your name.'),
          validator: (value) {
            if (value.isEmpty) return 'You have to insert a name';

            return null;
          },
          onSaved: (newValue) => _newUser.name = newValue,
        ),
        TextFormField(
          controller: _password,
          obscureText: true,
          decoration: InputDecoration(hintText: 'The password to log in.'),
          validator: (value) {
            if (value.length < 7)
              return 'Password must have at least 6 chars.';

            return null;
          },
          onSaved: (newValue) => _newUser.password = newValue,
        ),
        TextFormField(
          controller: _email,
          decoration:
              InputDecoration(hintText: 'E-mail to use for log in.'),
          validator: (value) {
            if (!value.contains('@gmail.com'))
              return 'Only gmail emails allowed.';

            return null;
          },
          onSaved: (newValue) => _newUser.email = newValue,
        ),
      ],
    ),
  ),
);

As you saw in the first image now when i will call the .validate() method it will call all the validators inside all our inputs and when i will call the .onSaved() method it'll do the same thing for the onSaved functions.

Now the last step is to add a button 'SAVE' that will call our function so we can execute those methods.

  void _saveForm(){

    if(_keyForm.currentState.validate()){

      _keyForm.currentState.save();

      print(_newUser.name);

    }

  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _keyForm,
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: ListView(
          children: [
            Container(...),
            TextFormField(...),
            TextFormField(...),
            TextFormField(...),
            RaisedButton(
              child: Text('SAVE'),
              onPressed: () {
                _saveForm();
              },
            )
          ],
        ),
      ),
    );
  }
}

Time to test 😃️

The only thing that we have to do now is to click into the "SAVE" button.

The save button will call the _saveForm() function where...

We will check if _keyForm.currentState.validate() gives back true. In this case it's not since one or more of them are wrong.

As you can see it's working well, it shows the related errors if we are not in line with the validator.

But... if the validate check gives us true we will enter the if statement and run currentState.save() that will run the save function inside all our inputs.

After that when we will print _newUser.name we will get the updated Instance.

As you can see in the image in the right it's all working fine!

time to say goodbye

I hope that you enjoyed this article :D

If you think that I have to made other articles like this one let me know in the comment section.

If you think that I have said some wrong stuff let me know so i can improve my skills.

Thank you so much for you time, and keep learning stay positive with your attitudes.

If you are interest we make youtube video and articles consider to subscribe for more things like that, se you next time!

Bye 👋️

STOP writing CSS, 10 reasons why

Aspiiire — Mon, 26 Oct 2020 15:10:58 +0000

Prefer video?

In this brief article a want to give you some reasons why you should stop writing CSS and start writing SASS.

At the end the output is the same a cool and well minified .css file.

The order of the list isn't important!

10 ~ Syntax

When you write SASS code you will see the difference instantly when you see that the code is a lot cleaner without brackets and semicolons, that matters here are tabs.

When you write nested selectors you will have an easier time watch this 😁️

9 ~ Variables

That thing was really needed in CSS... the use of variables that will help you a lot to manage your code and even for future refactoring.

For example you can create a palette.sass file and store all your colors and then call that variable inside your buttons or divs...

The most beautiful thing in my opinion is that just changing one line of code (where you have defined the color variable) you can change the color of your entire application.

Take a look here 👇

8 ~ Mixins

Really cool stuff, mixins help you to define reusable portions of code, you can think of them like functions, you can pass a parameter and get back you block dynamically written

7 ~ Functions

mmm.. yes mixins and functions are really similar... but, but with functions you can return something with mixins you have only a predefined block of code

6 ~ Imports

Instead of having a super big main.css file with 200000 lines of code split by strange ### signs with titles or worst stuff you could import and export you sass files.

It is not the same thing as the link rel thing cause when you do that you are making an HTTP request :D

You will have a beautiful structure of your code for example with

header.sass
menu.sass
- profile_image.sass
footer.sass

You can even import CSS files!!

5 ~ Maths

With sass you can do pretty any operation you want, that was a big limitation with only css, now no more!

4 ~ Logic

Another thing missing in CSS is the logic, with SASS you have the possibility to use if statements, for while.

That will help you to write less code with more ease.

3 ~ Clean and easy to read code

Maybe i have said it a lot of times but really, with SASS you will see a beautiful code.

Using the combination of mixins imports variables no way that is like css, you code will be really clear to understand.

The only fact that you have different files that contains different parts of you code it will help you when you want to change something in the future.

For example image that you want to change the main color with css... or the font family

2 ~ Faster development

Clean code means fast development, one of the things that IMHO slowed me a lot was semicolons, and another thing... semicolons, i really hated semicolons...

You can use mixins without having to repeat over and over parts of code respecting the dry principle.

1 ~ Production ready

You will get as output a clean css file the way that you want, if you want multiple css files is up to you.

You CSS will be minimized and ready to be imported...

That's it

I hope that you enjoyed this article, it is my first article, i hope that that stuff my help someone and thanks for reading...

Let me know if you want to know how to install SASS with a youtube video or things like that...

If you enjoyed my style check out my new Youtube Channel

Thank you for your time, have a good day 👋😁