Getting started:

Disclaimer:



I didn’t go deep explaining some parts of the app as I think it is too repetitive as most of the widget are very similar to each other.

If you are interested in optimizing this app and making it production ready let me know in the comments or DM me Before we start I must say that this is not a production ready app. All this is a getting started tutorial on how to get data from a NodeJs server in Flutter in simplest, quickest and easiest way.I didn’t go deep explaining some parts of the app as I think it is too repetitive as most of the widget are very similar to each other.If you are interested in optimizing this app and making it production ready let me know in the comments or DM me @cybdom

MyNavigation Class:

In order to preserve state through the different widgets I simply used the Provider package.

I started by creating MyNavigation class that extends ChangeNotifier. This class has two variables, one is the current page index and the second is the UserId.

Along with that the class also has two functions, one called goHome which sets the user id to “” and the currentIndex to 0, the second called goProfile and takes a profileId sets the user id to the giving one and the currentIndex to 1. (1 means profile screen, and 0 means home screen. It is better to use Enum for that but I didn’t.

How does a FutureBuilder widget work:

This widget is pretty simple to use, you start by giving it a future which must be previously obtained and a builder. This builder method gives you have a buildcontext, and an AsyncSnapshot.

Your actual data is in the AsyncSnapshot, but before building your widgets make sure to check if the snapshot has fully obtained the data. (see source code below)

Future < String > _calculation = Future < String >. delayed ( Duration (seconds : 2 ) , () => ‘Data Loaded’ , ) ; Widget build ( BuildContext context) { return FutureBuilder < String > ( future : _calculation , // a previously-obtained Future<String> or null builder : ( BuildContext context , AsyncSnapshot < String > snapshot) { List < Widget > children ; if (snapshot . hasData) { children = < Widget > [ Icon ( Icons . check_circle_outline , color : Colors . green , size : 60 , ) , Padding ( padding : const EdgeInsets . only (top : 16 ) , child : Text ( ‘Result: ${ snapshot.data }’ ) , ) ] ; } else if (snapshot . hasError) { children = < Widget > [ Icon ( Icons . error_outline , color : Colors . red , size : 60 , ) , Padding ( padding : const EdgeInsets . only (top : 16 ) , child : Text ( ‘Error: ${ snapshot.error }’ ) , ) ] ; } else { children = < Widget > [ SizedBox ( child : CircularProgressIndicator () , width : 60 , height : 60 , ) , const Padding ( padding : EdgeInsets . only (top : 16 ) , child : Text ( ‘Awaiting result…’ ) , ) ] ; } return Center ( child : Column ( mainAxisAlignment : MainAxisAlignment . center , crossAxisAlignment : CrossAxisAlignment . center , children : children , ) , ) ; } , ) ; }

Source code from: https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html