I will need to add a new controller on that “Controllers” folder from my Visual Studio project, controllers are what will get me the Data I need, I will go with the usual Web API Controller, other than that, the C# code is still mostly the same (for Web Form or API), Select the Data, and return it.

There are other type of controllers, but this one will serve me right!

I’ve added the controller with some basic code to call my Stored Procedure and return a Json (Json will be easy to use on the Flutter side), the only thing here that is missing, is saying what “[BasicAuthentication]” is.

Because I don’t like leaving my door completely open, I will use some basic authentication, not everyone is going to see this Data without some “BasicAuthentication”.

I will just right click on the project and add a new .cs file called “BasicAuthentication.cs”

Some Authentication

This authentication will just check if the user and password given, are the same that is saved on our web.config file, nothing special.

If I run my project, and try calling on the browser, the default controller that came with the project, I will get the values, unlike my new controller, all I get is 401 (because I need to pass the authentication header).

Default Values Controller

MyDataAPI Controller, all I get is nothing!

This authentication is only for the API’s with “[BasicAuthentication]” on top of it, like it’s shown on the “MyDataAPIController.cs”.

Publish it!

Now is finally time get to the Flutter Stuff!

Going back to Flutter, this is where I start from…

This is where we start!

I google a lot, and I just found out there is this awesome site ( pub.dev ), with awesome packages (like the http package)!

pub.dev

I like using packages published by certified publishers, they always have a good score! I’ve also found a lot of other package creators with awesome work! Good job everyone!

There is nothing like good documentation!

When I enter a package page, I like to keep an eye mostly on the Readme (useful info), Changelog (I like to see what they fix!), and Example (How am I gonna use this?!) tabs.

I’m going to use this package… let’s see what is on the Installing tab, looks straight forward, I’m gonna find that “pubspec.yaml” file on the root of my Flutter project, and add it!

This is one of those things, where indentation matters! I have to keep everything aligned! Now i just save the file, and it will download the package automatically, awesome! Now, don’t forget to import it on the main.dart file!

There are a lot of things on Flutter that I’m sure I’m ignoring at the moment, but that doesn’t matter for now, I just want to get the data.

I will figure things out and fix problems as they happen!

Since we’ve just added an http package, we can use something like Get! Get that Data!

So, the closest thing I found to “PageLoad”, was this “initState”, the difference is that it only runs on the beginning. For now I’m going to use that to call the function I’m going to create.

Get me my Data! Yum!

If i run the project, calling my Web API with the headers defined for my user and password (also added accept-encoding because compression doesn’t usually hurt!), I’m going to finally get what I wanted! But to see it, I’m just gonna have to add a stop (watchdog) to it, like on Visual Studio…

Data!

Finally, that took long enough…

So finally I’ve got the data, but if for some reason I didn’t pass the header with the authentication, all I would get is a 401 on my response statusCode, and a big empty body!

Things I skipped on Flutter to get where wanted for now:

A lot of things!

I still didn’t look into Stateless or Statefull Widgets

I still don’t even know what Widgets really are (spoiler: everything)

Print stuff to my console! (print(response.body);)

print it

I can fix missing imports like usual on my Visual Studio

That light bulb is a saver

Time saver!

I have something called “Hot Reload”, runs most changes just by coding and saving (orange icon)

If something doesn’t run right, better do a “Restart” (green icon)

If for some reason, something still doesn’t run like it should, just stop it and debug again (red icon), this happens for me more than I would like.

The bar with all the buttons!

I used an “async” function to get my Data from the http (Flutter App is single threaded, uses “Futures” to handle a heavy process, we use async for the web call, we don’t know how long it will take, this way the app won’t get stuck waiting for the process to end)

I don't need to use “new” for declaring anymore (time saver!)

I don’t need to say what kind of type is returned from a function (but I should! Will be a time saver if I make some mistake and don’t return something where it should)

So, I got that done, but my App output is still the same “Hello Flutter!”.

Next, I will have to work on using what I got, and displaying it in some way, and maybe edit/get more Data!