DEV Community: Afolayan Ademola Segun

Drowdown Button In Flutter

Afolayan Ademola Segun — Wed, 26 Oct 2022 17:40:01 +0000

Hey Guys,

Have you ever been stuck and you dont know exact thing to do anymore, trust me, there are some bugs that won't just let you kill them (if you like use Bagon😂)...

Well I came across this bug 🐞 , yeah and I checked through Flutter documentation, Stack Overflow and the likes, couldn't get my solution.

I was able to figure it out after couple of hours and I will like to share my solution. Also I will be sharing some other solutions I came across just in case my solution doesnt fit. You can get all soluton in one stop, yah.

In this article you will be learning how to use DropDownButton and learn various properties of it in flutter and also get the solution to common bugs associated with this widget.

Lets dive in...

What is a Dropdown Button 💁🏽‍♂️?
Dropdown Button is a Material Design button for selecting from a list of items.

DropdownButton<String>(
  value: dropdownValue,
  icon: const Icon(Icons.arrow_downward),
  elevation: 16,
  style: const TextStyle(color: Colors.deepPurple),
  underline: Container(
    height: 2,
    color: Colors.deepPurpleAccent,
  ),
  onChanged: (String? value) {
    // This is called when the user selects an item.
    setState(() {
      dropdownValue = value!;
    });
  },
  items: list.map<DropdownMenuItem<String>>((String value) 
  {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),

The Dropdown Button has some properties and methods, To use this widget, you need to have a list of items that you will use in your dropdown. For the above example here is the list that was used

const List list = ['One', 'Two', 'Three'];

and when you run this in your flutter project, you will get something like this: 👇🏼👇🏼👇🏼👇🏼👇🏼👇🏼

There you go!!!

Dropdown Button has a major?
You have to use this widget right, and if not, you get stuck. This is the major issue with using a Drondown Button.

Error meesage:
_Drop down Either or 2 more dropdown were detected with the same value???? _

Lets take this example as our point of focus.

  String _value1;
  String _value2;

  final List<String> nameList = <String>[
   "Name1",
    "Name2",
    "Name3",
    "Name4",
    "Name5",
    "Name6",
    "Name7",
    "Name8"
   ];

   @override
  Widget build(BuildContext context) {
    return Scaffold(
     appBar: AppBar(
     elevation: 2.0,
     title: Text('Hello'),
     ),
    body:  ListView(
        children: <Widget>[
          Row(
            children: <Widget>[
              Text('Name: '),
              Center(
                child: DropdownButton(
                  value: _value1,
                  onChanged: (value) {
                    setState(() {
                      _value1 = value;
                    });
                  },
                  items: nameList.map(
                    (item) {
                      return DropdownMenuItem(
                        value: item,
                        child: new Text(item),
                      );
                    },
                  ).toList(),
                ),
              ),
            ],
          ),
          Row(
            children: <Widget>[
              Text('Name: '),
              Center(
                child: DropdownButton(
                  value: _value2,
                  onChanged: (value) {
                    setState(() {
                      _value2 = value;
                    });
                  },
                  items: nameList.map(
                    (item) {
                      return DropdownMenuItem(
                        value: item,
                        child: new Text(item),
                      );
                    },
                  ).toList(),
                ),
              ),
            ],
          ),
        ],
      ),
    backgroundColor: Colors.grey[200],
   );
  }
 }

One:
Always make sure the value of the property "value" is not empty.

         DropdownButton(
          // Initial Value
          _**value: dropdownvalue,**_

          // Down Arrow Icon
          icon: const Icon(Icons.keyboard_arrow_down),   

          // Array list of items
          items: items.map((String items) {
            return DropdownMenuItem(
              value: items,
              child: Text(items),
            );
          }).toList(),
          // After selecting the desired option,it will
          // change button value to selected value
          onChanged: (String? newValue) {
            setState(() {
              dropdownvalue = newValue!;
            });
          },
        ),

Two:
If the value is going to be promised, that is at a later time the property will get its value, then. check if the value is empty first, if it is empty replaced with a default value.

 DropdownButton(
   value: _value1.isNotEmpty ? _value1 : null, // guard it 
     with null if empty
    items: nameList.map((item) {
       return DropdownMenuItem(
          value: item,
          child: new Text(item),
        );
      }).toList(), 
    );

Three:
If you are getting your list from the database, make sure the function you call in not in your build context, it should be called once. And the reson why that is so is because when call your api that will get the list within your build context, its get called multipble times as you are using setstate to update the selected value. Here is a complete example code ------
See here. 👇🏼👇🏼👇🏼👇🏼👇🏼👇🏼👇🏼

  class _ParentBankState extends 
  State<ParentCategory> {
  final _formKey = GlobalKey<FormState>();

   String? _selectedBankCategory;
    // List category = [];
   final List<String> _parentCategory = [
    "Select Category",
   ];

   _//Make sure you do your calls here_

  @override
  void initState() {
    //do your calls to get the list from your database 
   //here so that it will be called once...

  final category = context.read<AddMoneyCubit>. 
  ().loadBankList();
   super.initState();
  }

@override
 Widget build(BuildContext context) {

 //Do not call your api here, why?
 //because buildcontext get build multiple times and that 
 //will make your dropdwon throw that error, because it is 
 //seeing the value beeing used repeatedly...

  var businessBankDropDown =
    BlocBuilder<AddMoneyCubit, AddMoneyState>(
  builder: (context, state) {
    return Form(
      key: _formKey,
      child: ButtonTheme(
        alignedDropdown: true,
        child: DropdownButtonHideUnderline(
          child: DropdownButton<String>(
            menuMaxHeight: 300,
            isExpanded: true,
            value: _selectedParentCategory,
            hint: const Text(
              "Parent Category",
              style: TextStyle(fontSize: 14),
            ),
            items: state is LoadBankList
                ? state.categoryListModel.map((e) {
                    return DropdownMenuItem<String>(
                        value: e.text,
                        child: Row(
                          children: [
                            Text(
                              e.text,
                              style: const TextStyle(
                                  fontSize: 14.0, color: 
              IposColors.black),
                            ),
                          ],
                        ));
                  }).toList()
                : _parentBank.map((String value) {
                    return DropdownMenuItem<String>(
                        value: value,
                        child: Row(
                          children: [
                            Text(
                              value,
                              style: const TextStyle(
                                  fontSize: 14.0, color: 
                    IposColors.black),
                            ),
                          ],
                        ));
                  }).toList(),

            onChanged: (value) {
              setState(() {
                print(value);
           _selectedBankCategory = value;
              });
            },
            style: const TextStyle(fontSize: 30),
           ),
           ),
          ),
         );
         },
        );

    return Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height / 16.4,
       decoration: BoxDecoration(
       color: Colors.white,
       borderRadius: BorderRadius.circular(10),
       border: Border.all(
        color: Colors.grey,
       ),
     ),
     child: businessBankDropDown);
    }
  }

This was my Solution.

Thank you for taking your time to go through this.

I hope you have learned to use this awesome widget and this helps you resolve your bugs 🐞🪲 issues...

If you would like to discuss this or any related issueChat Me. Follow me on Twitter for More...

How To Display A SnackBar In Flutter

Afolayan Ademola Segun — Mon, 21 Feb 2022 13:29:27 +0000

Hi, It's Kest Again And I am about to show you how to display a snackbar in Flutter.

What's a SnackBar anyway? 🤔🤔🤔
A SnackBar can be useful to briefly inform your users when certain actions take place. For example, when a user swipes away a message in a list, you might want to inform them that the message has been deleted. You might even want to give them an option to undo the action.

You will be able to display a Snackbar in three easy steps:

Create a Scaffold.
Display a SnackBar.
Provide an optional action.

1. Create a Scaffold

Creating a Scaffold is one of the easiest things to do in Flutter, as a piece of general knowledge, > everything in Flutter is a widget, And Fortunately, it's the same for Scaffold.
The Scaffold widget, from the material library, creates this visual structure and ensures that important widgets don’t overlap.

    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
          appBar: AppBar(
          title: const Text('SnackBar Demo'),
          ),
         body: const SnackBarPage(),
        ),
      );

2. Display A SnackBar

With the Scaffold in place, Its time to Display a Snackbar, you can do that with the code snippets below:

    const snackBar = SnackBar(
        content: Text('Yay! A SnackBar!'),
       );

     // Find the ScaffoldMessenger in the widget tree
     // and use it to show a SnackBar.
     ScaffoldMessenger.of(context).showSnackBar(snackBar);

Yay!! that's it. It's as easy as that. However if you would like your snackBar to perform more functions other than displaying messages about users actions. You can add other properties to the widget.

3. Provide an optional action
You might want to provide an action to the user when the SnackBar is displayed. For example, if the user accidentally deletes a message, they might use an optional action in the SnackBar to recover the message.

Here’s an example of providing an additional action to the SnackBar widget:

     final snackBar = SnackBar(
         content: const Text('Yay! A SnackBar!'),
         action: SnackBarAction(
         label: 'Undo',
         onPressed: () {
          // Some code to undo the change.
          },
         ),
        );

And that's a wrap. Shikena🤗 (that's all). I hope this article has been able to enlighten you and make building awesome, beautiful, and useful apps.

If you would like to discuss this or any related issueChat Me. Follow me on Twitter for More...

How TO DELETE DATA OVER THE INTERNET IN FLUTTER

Afolayan Ademola Segun — Tue, 16 Nov 2021 14:48:17 +0000

Hi, I am Kest,

If you have been following my CRUD operation tutorial series you will already know without the title that this is the last part of the series on CRUD operation.

Users are used to this feature (ability to delete input fields) that are now available in almost every application that involves inputting fields. They do not only want to be able to edit their input, they also want to be able to delete it.

This tutorial which is the last of the four CRUD operation, is the simplest of them all, so grab a chair 🪑 and a drink 🍹🥤 let's go over it.

In just three simple steps, you will be able to implement the Delete operation in flutter your application, here are the steps:

Add the Http Package.
Delete data on the server.
Update the screen.

😯😯😯 is that it? Yes, it's as simple as that. Let go deep into the steps.

1. Add the Http Package.

As usual to install the http package, add it to the dependencies section of the pubspec.yaml file. You can find the latest version of the http package on pub.dev.
That famous pubspec.yaml file is pronounced(pubspec dot yamul or yamil depending on where you coding from... 😂😂😂).

2.Delete data on the server.

Using the JSONPlaceholder as a case study, we want to delete a particular album. we will make use of the http.delete() method.
Note that this requires the id of the album that you want to delete. For this example, use something you already know, for example id = 1.

    Future<http.Response> deleteAlbum(String id) async {
       final http.Response response = await http.delete(        
       Uri.parse
     ('https://jsonplaceholder.typicode.com/albums/$id'),
        headers: <String, String>{
       'Content-Type': 'application/json; charset=UTF-8',
         },
       );
       return response;
      }

The http.delete() method returns a Future that contains a Response.

Future is a core Dart class for working with async operations. A Future object represents a potential value or error that will be available at some time in the future.
The http.Response class contains the data received from a successful http call.
The deleteAlbum() method takes an id argument that is needed to identify the data to be deleted from the server.

3.Update the screen.

In order to check whether the data has been deleted or not. First, fetch the data from the JSONPlaceholder using the http.get() method, and display it on the screen. (See my tutorial on how to fetch Data from the internet here for a complete example). You should now have a Delete Data button that, when pressed, calls the deleteAlbum() method.

  Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(snapshot.data?.title ?? 'Deleted'),
        ElevatedButton(
           child: const Text('Delete Data'),
           onPressed: () {
              setState(() {
              _futureAlbum =
              deleteAlbum(snapshot.data!.id.toString());
            });
         },
       ),
      ],
     );

Now, when you click on the Delete Data button, the deleteAlbum() method is called and the id you are passing is the id of the data that you retrieved from the internet. This means you are going to delete the same data that you fetched from the internet.

Returning a response from the deleteAlbum() method
Once the delete request has been made, you can return a response from the deleteAlbum() method to notify our screen that the data has been deleted.

   Future<Album> deleteAlbum(String id) async {
        final http.Response response = await http.delete(
          Uri.parse('https://jsonplaceholder.typicode.com/albums/$id'),
        headers: <String, String>{
       'Content-Type': 'application/json; charset=UTF-8',
           },
          );
        if (response.statusCode == 200) {
       // If the server did return a 200 OK response,
      // then parse the JSON. After deleting,
      // you'll get an empty JSON `{}` response.
      // Don't return `null`, otherwise `snapshot.hasData`
      // will always return false on `FutureBuilder`.
      return Album.fromJson(jsonDecode(response.body));
      } else {
      // If the server did not return a "200 OK response",
      // then throw an exception.
      throw Exception('Failed to delete album.');
        }  
       }

FutureBuilder() now rebuilds when it receives a response. Since the response won’t have any data in its body if the request was successful, the Album.fromJson() method creates an instance of the Album object with a default value (null in our case). This behavior can be altered in any way you wish.

Yeah 🕺🕺🕺🕺🕺

That’s all! Now you’ve got a function that deletes the data from the internet.

Congratulations. If you have been following you should be able to perform the CRUD operations in flutter now.

kindly follow me on Twitter for More...

How To Send Data To The Internet In Flutter!

Afolayan Ademola Segun — Wed, 27 Oct 2021 14:03:48 +0000

Hey Guys,

In My Last Article, we learned how to Fetch Data from the internet using the http package.

Now what about Sending Data to the Internet 🤔, yeah it so easy also...

Sending data to the Internet is necessary for most apps. The http package has got that covered, too.

These few steps below show us how we can achieve this.

Add the http package.
Send data to a server using the http package.
Convert the response into a custom Dart object.
Get a title from user input.
Display the response on the Screen.

So we will go through these steps together,

Add the http package

To install the http package, add it to the dependencies section of the popular pubspec.yaml file (pronounced pubspec dot yamul or yaamu file 😂).
You can find the latest version of the http package on pub.dev.

-Sending data to Server

We will be using the instance of sending an Album to the Server and we can do that by sending an Album title to JSONplaceholder using the http.post() method.

 Future<http.Response> createAlbum(String title) {  
    return http.post( Uri.parse(
    'https://jsonplaceholder.typicode.com/albums'
      ), 
    headers: <String, String>{ 
     'Content-Type': 'application/json; charset=UTF-8', 
     }, 
  body: jsonEncode(<String, String>{
   'title': title,
    }),
   );
 }

The http.post() method returns a Future that contains a Response.
Just like we have learned previously:

Future is a core Dart class for working with asynchronous operations. A Future object
represents a potential value or error that will be available at some time in the future.
The http.Response class contains the data received from a successful http call.
The createAlbum() method takes an argument title that is sent to the server to create
an Album.

Convert the http.Response to a custom Dart object

To make your life easier, it is better to convert raw data into Dart objects.
How do we convert our Data into Dart object?

Create an Album Class
Convert the http.Response to an Album

But I don't know how to create an album class, and I can't even converts http.Response to an Album!!! Dont worry mate. I gat you covered! 🤝
Just follow this instance of a class.

class Album {
  final int id;
  final String title; 
 Album({required this.id, required this.title}); 
   factory Album.fromJson(Map<String, dynamic> json) { 
  return Album( 
      id: json['id'], title: json['title'], 
       );
   }
  }

Converting http.Response to an album, very easy:
Use the following steps to update the createAlbum() function to return
a Future:

Convert the response body into a JSON Map with the dart:convert package.
If the server returns a CREATED response with a status code of 201, then convert the JSON Map into an Album using the fromJson() factory method.
If the server doesn’t return a CREATED response with a status code of 201, then throw an exception. (Even in the case of a “404 Not Found” server response, throw an exception. Do not return null. This is important when examining the data in snapshot,
as shown below.)

I hope this is not too difficult to do, check this code snippet below to have a better understanding...

Future<Album> createAlbum(String title) async {  
   final response = await http.post( 
   Uri.parse(
    'https://jsonplaceholder.typicode.com/albums'), headers: <String, String>{ 
     'Content-Type': 'application/json; charset=UTF-8', 
       }, 
  body: jsonEncode(<String, String>{
   'title': title,
    }), 
    ); 
  if (response.statusCode == 201) { 
      // If the server did return a 201 CREATED response,\
     // then parse the JSON. 
   return Album.fromJson(jsonDecode(response.body)); 
 } else { 
  // If the server did not return a 201 CREATED response, 
 // then throw an exception.
 throw Exception('Failed to create album.'); 
   }
 }

YES!!! Now you’ve got a function that sends the title to a server to create an album.

-Get a title from user input

Next, create a TextField to enter a title and an ElevatedButton to send data to the Server. Also, define a TextEditingController to read the user input from a TextField.

When the ElevatedButton is pressed, the _futureAlbum is set to the value returned by createAlbum() method.
Something Like this: 👇👇👇👇👇👇👇👇👇👇👇👇👇

Column( 
   mainAxisAlignment: MainAxisAlignment.center, 
   children: <Widget>[ 
     TextField( controller: _controller, decoration: const InputDecoration(
        hintText:  'Enter Title'
      ), ), 
     ElevatedButton( onPressed: () { 
      setState(() { 
          _futureAlbum = 
         createAlbum(_controller.text); 
     }); 
    },
  child: const Text('Create Data'), 
   ),
   ], 
  )

On pressing the Create Data button, make the network request, which sends the data in the TextField to the server as a POST request. The Future, _futureAlbum, is used in the next step.

From Here its as simple as saying ABC ✌️

- Display the Response on the Screen

To display the data on the screen, use the FutureBuilder widget. The FutureBuilder widget comes with Flutter and makes it easy to work with asynchronous data sources. You must provide two parameters:

The Future you want to work with. In this case, the future returned from
the createAlbum() function.
A builder function that tells Flutter what to render, depending on the state of
the Future: loading, success, or error.

Note: The snapshot.hasData only returns true when the snapshot contains a non-null data value. This is why the createAlbum() function should throw an exception even in the case of a “404 Not Found” server response. If createAlbum() returns null, then CircularProgressIndicator displays indefinitely.

FutureBuilder<Album>(  
     future: _futureAlbum, builder: (context, snapshot) {
      if (snapshot.hasData) { 
          return Text(snapshot.data!.title); 
       } else if (snapshot.hasError) {
         return Text('${snapshot.error}'); 
         } 
      return const CircularProgressIndicator(); 
     },)

*Done! * You have successfully, sent Data to a server on the Internet!!! what you can't do doesn't exist 😉. congratulations

if you would like to discuss this or any related issue Chat Me.
Follow me on Twitter for More...

How To Update Data Over The Internet -- Flutter

Afolayan Ademola Segun — Wed, 27 Oct 2021 13:56:42 +0000

Hi guys, It's Kest again. I have taken the time to explain how you can Read and Create DATA over the internet using the HTTP package in Flutter.

what if I tried to post and I make a mistake? you know there is a cliche about making mistakes, it says

"no one is above mistakes".

You wonder how it was possible for you to edit your Posts and Comments on some of your social media applications. Wonder no more 😉😉

Updating data over the internet is necessary for most apps. The http package has got that covered!

The following are the steps to take when updating Data over the internet in Flutter

Add the http package.
Update data over the internet using the http package.
Convert the response into a custom Dart object.
Get the data from the internet.
Update the existing title from user input, update and display the response on the screen.

1. Add the HTTP package :

The first step always is to add your package to the popular pubspec.yaml as a dependency. Go to pub.dev to get HTTP package.

2. Updating data over the internet using the HTTP package.

Using the JSONPLACEHOLDER as our API, this is how to update Data over the internet.

  Future<http.Response> updateAlbum(String title) {
    return http.put(
      Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
       headers: <String, String>{
       'Content-Type': 'application/json; charset=UTF-8',
        },
       body: jsonEncode(<String, String>{
      'title': title,
    }),
   );
 }

3. Convert the http.Response to a custom Dart object.

While it’s easy to make a network request, working with a raw Future isn’t very convenient 😤. To make your life easier, convert the http.Response into a Dart object 😊😊

*Create an Album Class *
First, create an Album class that contains the data from the network request. It includes a factory constructor that creates an Album from JSON.

This is how to create a class:

  class Album {
    final int id;
    final String title;
    Album({required this.id, required this.title});
     factory Album.fromJson(Map<String, dynamic> json) {
       return Album(
         id: json['id'],
         title: json['title'],
       );
    }
   }

Then Convert the http.Response to an Album

Now, use the following steps to update the updateAlbum() function to return a Future:

Convert the response body into a JSON Map with the dart:convert package.
If the server returns an UPDATED response with a status code of 200, then convert the JSON Map into an Album using the fromJson() factory method.

If the server doesn’t return an UPDATED response with a status code of 200, then throw an exception. (Even in the case of a “404 Not Found” server response, throw an exception. Do not return null. This is important when examining the data in snapshot, as shown below.)

Future<Album> updateAlbum(String title) async {
  final response = await http.put(
   Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
   headers: <String, String>{
   'Content-Type': 'application/json; charset=UTF-8',
    },
   body: jsonEncode(<String, String>{
   'title': title,
  }),
 );
if (response.statusCode == 200) {
 // If the server did return a 200 OK response,
 // then parse the JSON.
  return Album.fromJson(jsonDecode(response.body));
 } else {
  // If the server did not return a 200 OK response,
  // then throw an exception.
 throw Exception('Failed to update album.');
  }
 }

Hooray! Now you’ve got a function that updates the title of an album.

4. Get the Data from the Internet.
Get the data from the internet before you can update it. For a complete example, see the Fetch data recipe on flutter.dev.

   Future<Album> fetchAlbum() async {
      final response = await http.get(
       Uri.parse('https://jsonplaceholder.typicode.com/albums/1'),
   );
    if (response.statusCode == 200) {
      // If the server did return a 200 OK response,
      // then parse the JSON.
        return Album.fromJson(jsonDecode(response.body));
      } else {
       // If the server did not return a 200 OK response,
       // then throw an exception.
       throw Exception('Failed to load album');
       }  
    }

Ideally, you will use this method to set _futureAlbum during initState to fetch the data from the internet.

5. Update the existing title from user input.
Create a TextField to enter a title and a ElevatedButton to update the data on server. Also define a TextEditingController to read the user input from a TextField.

When the ElevatedButton is pressed, the _futureAlbum is set to the value returned by updateAlbum() method.

   Column(
    mainAxisAlignment: MainAxisAlignment.center,
     children: <Widget>[
      Padding(
      padding: const EdgeInsets.all(8.0),
       child: TextField(
       controller: _controller,
        decoration: const InputDecoration(hintText: 'Enter Title'),
       ),  
       ),
     ElevatedButton(
     onPressed: () {
       setState(() {
       _futureAlbum = updateAlbum(_controller.text);
        });
       },
       child: const Text('Update Data'),
         ),
        ],
      );

On pressing the Update Data button, a network request sends the data in the TextField to the server as a POST request. The _futureAlbum variable is used in the next step.

*5. Display the response on screen. *
To display the data on screen, use the FutureBuilder widget. The FutureBuilder widget comes with Flutter and makes it easy to work with async data sources. You must provide two parameters:

The Future you want to work with. In this case, the future returned from the updateAlbum() function.
A builder function that tells Flutter what to render, depending on the state of the Future: loading, success, or error.
Note that snapshot.hasData only returns true when the snapshot contains a non-null data value. This is why the updateAlbum function should throw an exception even in the case of a “404 Not Found” server response. If updateAlbum returns null then CircularProgressIndicator will display indefinitely.

FutureBuilder<Album>(
  future: _futureAlbum,
  builder: (context, snapshot) {
   if (snapshot.hasData) {
   return Text(snapshot.data!.title);
    }  else if (snapshot.hasError) {
    return Text('${snapshot.error}');
    }
     return const CircularProgressIndicator();
    },
   );

That it 🤔? Yes, that is it!!!

Note: You can choose where to updated the changes its sample codes are just for guidance on how you can effect an update.

If you would like to discuss this or any related issue Chat Me . Follow me on Twitter for More...

HOW TO FETCH LIVE DATA FROM THE INTERNET IN FLUTTER

Afolayan Ademola Segun — Fri, 06 Aug 2021 11:37:37 +0000

HOW TO FETCH LIVE DATA FROM THE INTERNET IN FLUTTER

In computer programming, create, read, update, and delete (CRUD) are the four basic operations of persistent storage. CRUD is sometimes used to describe user interface conventions that facilitate viewing, searching, and changing information using computer-based forms and report.

To READ or Fecthing data from the internet is necessary for most apps. Luckily, Dart and Flutter provide tools, such as the http package, for this type of work.

In this tutorial I will be taking you through how to perform these operations in flutter.
This process uses the following steps:
1.Add the http package.
2.Make a network request using the http package.
3.Convert the response into a custom Dart object.
4.Fetch and
5. Display the data with Flutter.

Add the http package

The http package provides the simplest way to fetch data from the internet.

To install the http package, add it to the dependencies section of the pubspec.yaml file. You can find the latest version of the http package the pub.dev.

The image above shows how to add file to the pubspec,yaml file and also how to import the http package. The third step in the image is showing how to add internet persmission to your app.

The line of code should be added to the AndroidManifest.xml file found in tha Android/app/src/main.

This is all with step one.

Make a network request

Using an album sample from the API from the JSONPlaceholder , we will make a request to read the contet of the album using the http.get() method.
Future fetchAlbum() {

return
http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));
}

The http.get() method returns a Future that contains a Response.
Future is a core Dart class for working with async operations. A Future object represents a potential value or error that will be available at some time in the future.
The http.Response class contains the data received from a successful http call.

Convert the response into a custom Dart object

While it’s easy to make a network request, working with a raw Future is not going to be easy, for convenience it is better to convert the raw files into JSON. To make your life easier, convert the http.Response into a Dart object.

Create an Album class
First, create an Album class that contains the data from the network request. It includes a factory constructor that creates an Album from JSON.

This is an example of how the class should look like
class Album {
final int userId;
final int id;
final String title;
Album({
    required this.userId,
    required this.id,
    required this.title,
});
factory Album.fromJson(Map json) {
    return Album(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
   );
}
}

Convert the http.Response to an Album

Now, use the following steps to update the fetchAlbum() function to return a Future:

 1. Convert the response body into a JSON Map with the dart:convert package.

 2. If the server does return an OK response with a status code of 200, then convert the JSON Map into an Album using the fromJson() factory method.

 3. If the server does not return an OK response with a status code of 200, then throw an exception. (Even in the case of a “404 Not Found” server response, throw an exception. Do not return null. This is important when examining the data in snapshot, as shown below.)

Once again using the flutter Future keyword specifying the object 'album' and creating a fucntion that is async we can and will be able to get our data from the request call and then convert after the if condition is paased which is to test the status of our call, if the satus shows successf which is what the 'if (statusCode ==200) means the we cna convert from Json to dart object. If the condition is not true then it will throw an exception (an error message).

Fetch the data Call the fetchAlbum() method in either the initState()

class _MyAppState extends State {
late Future futureAlbum; @override void

initState() { super.initState(); futureAlbum =
fetchAlbum(); } // ···
}

Display the data

To display the data on screen, use the FutureBuilder widget. The FutureBuilder widget comes with Flutter and makes it easy to work with asynchronous data sources.
You must provide two parameters:

The Future you want to work with. In this case, the future returned from the fetchAlbum() function.
A builder function that tells Flutter what to render, depending on the state of the Future: loading, success, or error.

FutureBuilder(
future: futureAlbum,
builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!.title);
    } else if (snapshot.hasError) {
      return Text('${snapshot.error}');
    }
    // By default, show a loading spinner.
    return const CircularProgressIndicator();
},
)

Hurray!!! You have been able to succesfully read a live data from the internet into your Flutter app.

Congratulations. For More tutorial follow me on Twitter.

Why MongoDB???

Afolayan Ademola Segun — Mon, 02 Aug 2021 16:25:40 +0000

MongoDB is a Document database with the scalability and flexibility that you want
with the querying indexing that you need.
Scalability is the capacity to be changed in size or scale while
Flexibility is the quality of being modified easily without being broken.

Key MongoDB Features
Document Based: MongoDB stores data in documents (field-value pair data structures, No-SQL) instead of rows and column styles in traditional database in No-SQL pronounced (NO Sequel Data abase)
Scalability: It is very easy to distribute data across multiple machines as your users and amount of data grows. so whatever you do MongoDb gives you the room for you to grow.

Flexibility: There is no need to define a documents data schema before filling it with data meaning each documents can have a different number and types of field, and we can also change this fields all the time. And all this is really inline with some real life business situation and therefore it proves really useful]

Performance: Thanks to embedded data models. indexing, shading(divining a larger part into smaller unit), flexible documents, native duplication
MongoDB has proven to be a very performance database.

Open Source: MongoDB is a Free and open source database published under the SSPL license MongoDB is probably the most used Database with Node.js

BSON : It is the data format for MongoDB, it is used for data storage. like JSON but typed. So MongoDB document are typed. In relational Each field is called a column. It is arrange in table structures.
Another interesting feature in MongoDB is the concept of Embedded Documents. which is again something not present in relational database.
It is also called De-normalizing. Including related data into a single document. This allows for quicker access and easier data models (its not always the best solution though)
The advantage is that it allow us to read all the data at once
In Relational Database it is not possible to embed data, so you have to create a whole new table for the data and then link with some unique key from the field.

Finally the Maximum size for each Document in BSON is 60mb but this might increase in the future. and then each Documents have a unique ID once which act as a primary key to the document. It is automatically generated once you create a BSON documents. and so we don't have to worry about it.
With this understanding that you have of MongoDB, I believe you will start finding interesting to work with it and if you are SQL fan, yoop It doesn't take anything away to try different stuffs. Try MongoDB; you will love it!!!

MongoDB Document structure in picture.

Nodejs, Blocking Vs Non_Blocking

Afolayan Ademola Segun — Thu, 28 Jan 2021 08:16:18 +0000

Blocking refers to operations that block further execution until that operation finishes while non-blocking refers to code that doesn't block execution. Or as Node. js docs puts it, blocking is when the execution of additional JavaScript in the Node. js process must wait until a non-JavaScript operation completes

Synchronous vs Asynchronous
Synchronous (or sync) execution usually refers to code executing in sequence. In sync programming, the program is executed line by line, one line at a time. Each time a function is called, the program execution waits until that function returns before continuing to the next line of code.

Asynchronous (or async) execution refers to execution that doesn’t run in the sequence it appears in the code. In async programming the program doesn’t wait for the task to complete and can move on to the next task.

I will give this simple illustration so that you will understand this two subject so well. Imagine you visit a restaurant and you order a black coffee, the now the waiter represent the server, he will get your orders but since black coffee isn't yet available, it will just be prepared, the waiter wont wait until they chef finish making your black coffee, he will move to another customer to accept his request or order, keeping in and that you made a request for black coffee and you haven't gotten any yet.

That is how it works. there is a reminder called call back function in Node, that tells the waiter/server that the coffee is finally ready and the customer which is you can finally get your coffee. This is how it works. All of this process is what is called Asynchronous. but when other customer have to wait until your request is being handled completely before they can be serve that is what is called synchronous.

Relating it to node, the waiter is the sever, the customers are the clients/users making requests. and Node.js gives avenue to serve asynchronously without blocking, that is what is called non-blocking. Thank you for ordering our coffee, I hope you enjoyed your coffee...

React Native

Afolayan Ademola Segun — Thu, 02 Jan 2020 23:32:30 +0000

Hey i am kest. Just want to share my personal experience with react native. I aint introducing anything. What do i know? I just want to encourage you out there if you just started. Its not going to be easy but you need to continue learning... You need more than the "i just want to learn". You need the desire and passion to react... 😆. So i was introduced to react by my siwes supervisor who hardly had time for me. But i really want to learn, hence my relentless effort. Glory to God i am trying bit by bit. You can too.
Its interesting. Its captivating and it joy unspeakable when you actually see the result of your work on that device, on that emulator. So sweet.
So dont stop please.
Dont.
Well, have you heard of npm...?
Its gonna piss you off trust me. But you need that piece to react. Keep running npm no matter what! Its an advice from/for a senior dev, they say!
This is for my colleague; beginners.

DEV Community: Afolayan Ademola Segun

Drowdown Button In Flutter

How To Display A SnackBar In Flutter

1. Create a Scaffold

2. Display A SnackBar

How TO DELETE DATA OVER THE INTERNET IN FLUTTER

1. Add the Http Package.

2.Delete data on the server.

3.Update the screen.

How To Send Data To The Internet In Flutter!

Add the http package

-Sending data to Server

Convert the http.Response to a custom Dart object

-Get a title from user input

- Display the Response on the Screen

How To Update Data Over The Internet -- Flutter

1. Add the HTTP package :

2. Updating data over the internet using the HTTP package.

*3. Convert the http.Response to a custom Dart object. *

HOW TO FETCH LIVE DATA FROM THE INTERNET IN FLUTTER

Why MongoDB???

Nodejs, Blocking Vs Non_Blocking

React Native

3. Convert the http.Response to a custom Dart object.