How to Use Future Builder and Progress Indicator Flutter

How to Use Future Builder and Progress Indicator Flutter
Hello everyone, back again at porkaone. On this occasion we will get to know the future builder and how to use it in flutter. Curious?, let's follow in full below.


Future Builder

Future Builder is a widget provided by flutter to support asynchronous processes. Future builder really helps developers to find out every state or state that occurs in a process. Example: We can add progress or loading indicators to provide information that the application is in progress.

But more than that, the future builder can provide several variations of states such as: state not created, state is active, state is waiting, and state is complete. But on this occasion, we will not apply all of these statuses. We will only use the done status. Later, we will display process indicators until the process is complete. After the process is complete, the indicator process will be deleted and the data will be displayed. To see the results, you can directly scroll to the bottom of this article.


How to Use Future Builder and Progress Indicator

1. Create a new flutter project with a free name. In this tutorial I have used the null safety version of Flutter.

2. Open pubspec.yaml. Then add the http: package under cupertion_icon. Then save the file to download the package. For more details, follow the picture below.

Menambahkan package http
Add package



3. Open the main.dart file. Then edit with the script below.
    
// ignore_for_file: prefer_const_constructors, unused_local_variable, avoid_print, unused_import, unrelated_type_equality_checks import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({Key? key}) : super(key: key); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { Future getData() async { //get data from api var dataJson = await http.get(Uri.parse('https://www.themealdb.com/api/json/v1/1/filter.php?c=Vegetarian')); //convert data string to array object var data = jsonDecode(dataJson.body); //return data return data['meals']; } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Future Builder & Indicator Process'), ), body: FutureBuilder( //method to be waiting for in the future future: getData(), builder: (_, snapshot) { //if done show data, if (snapshot.connectionState == ConnectionState.done) { print(snapshot.data); var list = snapshot.data as List; return ListView.builder( itemCount: list.length, itemBuilder: (context, index) { return ListTile( contentPadding: EdgeInsets.all(8), leading: Image.network( list[index]['strMealThumb'] ), title: Text(list[index]['strMeal']), ); }); } else { //if the process is not finished then show the indicator process return Center(child: CircularProgressIndicator()); } }, ))); } }


4. We've gone through all the steps, it's time to try it out. Please run your emulator and if it works then it will look like below.

Cara Menggunakan Future Builder dan Progress Indicator Flutter
Final Result



So now you know what a future builder is and how to use it. So later you don't have to be confused about the difference between a future builder and a listview builder.

Ok, so this tutorial is about How to Use Future Builder and Progress Indicator Flutter. Hopefully it will be useful, if there are problems, please ask directly in the comments column or ask on the sahretech fanspage. That is all and thank you.

Post a Comment

0 Comments