1-What do we want? Data! How do we Get? — The web coder path to Flutter
Every web coder wants to get some data!
I’m a web programmer coming from Visual Studio ASP.NET projects. Very small team, usually one developer for the entire project.
The projects I work on, are usually a one person job, from evaluating project requirements, needs it has to fill, to Database creation, Web App development, design (I’m not a designer! I like dark themes!), testing, etc, etc…
This article expects that there is some familiarity with SQL and ASP.NET(C#)
Because of this, my articles won’t just be about one topic, it will have SQL, C#, Flutter, and it will most certainly have things done the wrong way! Important things will be overlooked at first, because I had to learn things the wrong way.
I need to have results, and sometimes I have to learn on the way, and mostly on a limited time, so this is the way I do it, it’s not the right way, or the best way.
So, like I said, I will need a Database to get started… For now I will do something simple, because I want to interact with Flutter, MS SQL Database, with a single table and a single Stored Procedure for selecting. On another article I will also go into creating more interactions with the Database and Web API, because I don’t work with just one thing, I will add things everywhere as the project evolves.
When I started using Flutter, I already had a Database, but for this example, I will start from scratch.
We always need a Database…
Now, the ASP.NET Stuff…
Some projects might not need to expose their Data further than the Web, but now we need to share it with the Mobile Platform!
Enter the API Realm
I start by creating a regular ASP.NET Web Application (C#) on Visual Studio…
What I need to feed my App, will be a WEB API type of project.
After the project is created, all I got is a solution with a lot of folders. Ugly.
Better get started with this…
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.
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”
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).
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…
I google a lot, and I just found out there is this awesome site ( pub.dev ), with awesome packages (like the http package)!
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.
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…
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);)
- I can fix missing imports like usual on my Visual Studio
That light bulb is a 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.
- 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!
Expect more SQL and ASP.NET along the way!
