The use of APIs is becoming increasingly common today and has become an important part of modern software development processes. APIs (Application Programming Interfaces) are basic tools that mainly enable communication between software applications and facilitate data exchange. They facilitate integration between different platforms by enabling sharing of services and data resources on the Internet. Working with APIs allows application developers to enrich their applications and make them more functional. APIs also support collaboration and integration between different companies and developers, making the software ecosystem more flexible and extensible. Working with API is preferred today, especially in mobile applications.
Flutter is a modern and fast mobile and web application development framework that can easily integrate with REST APIs. REST (Representational State Transfer) is a type of architecture of web-based services that provides access to data sources on the web. Flutter offers various packages and libraries to manage HTTP requests and provides developers with ease of interacting with REST APIs. Working with API in Flutter’s popularity is based on its ability to offer developers flexibility, speed, and reliability, as well as a large community and strong resource support. In this article, we will get to know Flutter, the open-source mobile application development SDK developed by Google, and then we will work with an API on Flutter.
Table of Contents
Unveiling Flutter’s Essence
Flutter is a free and open-source mobile UI framework created by Google and released in May 2017 that you can use to develop mobile, web, and desktop applications. Flutter is cross-platform, it enables both IOS and Android-based applications to be developed using the same codebase.
Why Flutter
- Flutter is a system that is easy to learn and can be used practically. So with Flutter, you can easily create your mobile applications in a modern framework.
- With Flutter, you can change code quickly. In this way, you can see the results with a click. When you make very important changes, you do not need to take time-consuming actions such as reloading.
- It is very cheap to develop a mobile application using Flutter. Developing and maintaining mobile apps for both Android and IOS can be costly.
- Native applications are always preferred for high performance in mobile application development. However, it is difficult to see a difference between the Flutter app and native apps in terms of performance.
- The widgets offered by Flutter are easy to use and flexible. Thanks to this feature, developers can create a quality user interface, provide a high user experience, and customize their mobile applications as they wish. Also working with APIs is quite easy.
Are you Doing Windows Development?
One of the best solutions for Windows development is Embarcadero Delphi. Delphi is the original IDE for building single-source multi-platform native apps with powerful visual design features best-in-class Windows integration and up to 5x productivity gains. In addition to Windows, Delphi also supports Android, iOS, macOS, and Linux with a single codebase and a single UI. It is part of RAD Studio which also includes C++Builder for Windows development. C++Builder is an advanced IDE for modern C++ with high-productivity libraries that enable developers to deliver blazingly fast native apps with great user experience on Windows and iOS.
Creating a Boilerplate Application
In this section, we will create an application that runs on Flutter and perform an API integration. In this app creation process, we will interact with an API using the widgets provided by Flutter and create a mobile application using this data. API integration allows the application to retrieve data from external sources and interact with users. With the completion of this project, we will experience real mobile application development using the power and flexibility of Flutter.
Discover what API integration is!
Create Project
First, let’s create our sample project by running the command below.
|
1 |
flutter create my_application |
Let’s edit the default codes according to our project.
File: main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Yugioh_List(), ); } } class Yugioh_List extends StatefulWidget { @override _Yugioh_ListState createState() => _Yugioh_ListState(); } class _Yugioh_ListState extends State { @override Widget build(BuildContext context) { return Container(); } } |
Include the HTTP Package
After creating our project, let’s include the HTTP package in the “pubspec.yaml” file so that we can bring our data via HTTP.
File: pubspec.yaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
name: my_application description: Flutter Application version: 1.0.0+1 environment: sdk: ">=2.7.0 < 3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^1.0.1 http: ^0.13.0 dev_dependencies: flutter_test: sdk: flutter integration_test: sdk: flutter |
After defining the necessary packages for the project, let’s import the “http” package to our Main.dart file.
|
1 |
import 'package: http / http.dart' as http; |
Create Model
We will work with sample JSON data in our project. Yugioh data will be used for this application. You can access the data from here.
Learn how to integrate and call an API from WordPress.
We are bringing our Yugioh data in JSON format to a format to be used in Flutter using the https://app.quicktype.io/ site. Then we open the “Models” folder in the directory of our project and then open a file named “Yugioh.dart” into it and copy the codes we brought to the Flutter format here.
Create Homepage
Now, when we want to use a field in our model class, we can create an object from this class and pull the relevant field.
In this step, we will take the necessary steps in the “main.dart” file.
File: main.dart
|
1 2 3 4 5 6 7 8 |
Yugioh _yugioh; Future getCards() async { var response = await http.get("https://raw.githubusercontent.com/KianBennett/Yugioh-Database-Downloader/master/cards.json"); var responseBody = json.decode(response.body); var _yugioh = Yugioh.fromJson(responseBody); return _yugioh; } |
We created a method called getCards of type future. In this method, we first said that we would request a get to our URL address. There are String statements in our request. We specified that we would take the body part of the string expression that comes with “json.decode” and assign it to the variable named “responseBody”. So we converted the body part of the incoming String expression to the JSON object.
We used the Yugioh.from JSON method to create a Yugioh object from the JSON object. This method allows us to create an object from the Yugioh class using the incoming JSON object.
File: main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Yugioh"), ), body: FutureBuilder( future: getCards(), builder: (context, AsyncSnapshot snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return Center( child: CircularProgressIndicator(), ); } else if (snapshot.connectionState == ConnectionState.done) { debugPrint("successfully connected"); return Center(child: Container(child: Text("successfully connected"),)); } else { return Center( child: Text(snapshot.error.toString()), ); } }, ), ); |
Let’s create our script and define a Future builder in the body part. In the future feature of the builder widget, we will define our getCards method, which will take a long time. We will create our main structure in the Builder section. First, let’s carry out our checks on the connection.
After this step, after making a small design, we will pull data from the Yugioh class and place them on the page.
Pick up how to improve user experience with API integration!
Copy the following codes to the “else if” code block we just added.
File: main.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
else if (snapshot.connectionState == ConnectionState.done) { debugPrint("successfully connected"); return GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2), itemBuilder: (context, index) { return InkWell( onTap: (){ Navigator.of(context).push(MaterialPageRoute(builder: (context)=>yugiohDetail(mycards: snapshot.data.cards[index],))); }, child: Hero( tag: snapshot.data.cards[index].id, child: Container( height: 500, width: 500, child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [ Expanded( child: Padding( padding: const EdgeInsets.all(8.0), child: Container( height: 400, child: FadeInImage.assetNetwork(fit: BoxFit.fill, placeholder: "assets/loading.gif", image: snapshot.data.cards[index].imageUrl, ), ), )), ]), ), ), ); }); } |
We used the imageUrl in the Yugioh class and preferred to use Gridview for viewing. We also chose to use Inkwell to give card clicks. Then we mentioned that the Inkwell widget should redirect the onTap feature to the yugiohDetail page. When we run the codes, we will get the following output.
Create Detail Page
Let’s create a structure that will display the properties of the relevant card when clicking on any card on this page.
Let’s create a file named “yugiohDetail.dart” in the project directory and paste the following codes into this file.
File: yugiohDetail.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class yugiohDetail extends StatelessWidget { Cards cards; yugiohDetail({this.cards}); @override Widget build(BuildContext context) { return Scaffold(resizeToAvoidBottomInset: false, backgroundColor: Colors.green, appBar: AppBar( elevation: 0, title: Text(cards.title), ),body:Stack(),); } } |
On this page, we created a constructive method to bring the Yugioh card clicked. We will use the Stack structure in the Body part. We will create a Card Widget in the middle of the page, insert the image of the relevant Yugioh card at the top of this Widget, and print the information of the relevant card in the Card Widget.
Let’s continue by pasting the following codes into the “yugiohDetail.dart” file.
File: yugiohDetail.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
Stack( children: [ Positioned( height: MediaQuery.of(context).size.height * (3 / 4), width: MediaQuery.of(context).size.width - 20, left: 10, top: MediaQuery.of(context).size.height * 0.1, child: Card( elevation: 3, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15)), child: Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ SizedBox( height: 200, ), Text( "Card Name", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold), ), Text( cards.title, style: TextStyle(fontSize: 15), ), Text( "Card Effect Types", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold), ), Text( cards.effectTypes.toString(), style: TextStyle(fontSize: 15), ), Text( "Card Info", style: TextStyle(fontSize: 15, fontWeight: FontWeight.bold), ), SingleChildScrollView( child: Text( cards.lore, style: TextStyle(fontSize: 15), ), ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Expanded( child: Column( children: [ Text( "Tips", style: TextStyle( fontSize: 15, fontWeight: FontWeight.bold), ), Chip( label: Text( cards.sets.map((e) => e.setName).toString(), style: TextStyle(fontSize: 10), ), ), Chip( label: Text( cards.sets.map((e) => e.rarity).toString(), style: TextStyle(fontSize: 10), ), ), ], ), ) ], ), ], )), ), Align( alignment: Alignment.topCenter, child: Hero( tag: cards.id.toString(), child: Container( height: 300, width: 300, child: Image.network( cards.imageUrl, fit: BoxFit.contain, ), ), ), ), ], ),); |
In the Card Widget, we showed the “name” of the card in our Cards class, the “property” of the card, the “lore” value where the information about the card is kept, and the “type” properties of the card.
We showed the image of the corresponding Yugioh card using the Align Widget.
Let’s see how the application works.
Conclusion
To sum up, the growing importance of APIs and the ease of using APIs with Flutter has a significant impact on modern software development processes. While APIs increase the functionality of applications by enabling data exchange between different platforms, this integration with Flutter provides many conveniences and advantages to developers. The widgets and easy integration mechanisms offered by Flutter make interacting with APIs and retrieving data from external sources very simple.
Find many free services for working with APIs!
FAQs
Q: What are the advantages of working with APIs in Flutter?
A: Flutter facilitates integration with APIs and enables easy retrieval of data from external sources. This increases functionality by allowing the application to quickly leverage various services and data sources.
Q: How can I interact with an API in Flutter?
A: Flutter provides various packages and libraries for sending and receiving HTTP requests. Using these libraries, you can interact with APIs, and receive and send data.
Q: What are the benefits of using an API in Flutter?
A: The benefits of using an API in Flutter include giving the app access to dynamic and up-to-date data, enhancing user experience, and extending app functionality. This makes the app more competitive and user-friendly.
