Use Unsplash API to fetch images for your Flutter App


In this article , I will explain you how to use unsplash api to fetch images from server and used it in flutter app .







Steps by step :-
  1. goto https://unsplash.com Sign Up with your credentials ,




Use Unsplash API to fetch images for your Flutter App

2. click on API/Developers
3.click on “Your Apps”
4.create new application
5.accept all terms and conditions .
6.Now enter your application name and description and click on “create application”.
7.below that their is Access key , copy and paste it in your application .
8.add Dependency to your pubspec.yml file :-









Use Unsplash API to fetch images for your Flutter App

pubspec.yml file
9. add this import statements :-
import ‘package:http/http.dart’ as http;
import ‘dart:convert’;
import ‘dart:async’;
Fetching images through unsplash api is super easy .
here per page=30 means Number of items per page. (default: 10)
  1. Function to fetch images through api and decode the json format :-
Future<String> getjsondata() async {
try{
var response= await http.get(‘https://api.unsplash.com/search/photos?per_page=30&client_id=it1PXzVQRnxgz8v8hazcst7G9rNfXk1qiS8FgHTTMMk&query=${_search}');
setState(() {
var converted = json.decode(response.body);
data=converted[‘results’];
});
}
catch(e){}
return ‘success’;
}


2.To display images we use ListView :-
body:new ListView.builder(
itemCount: data == null ?0:data.length,
itemBuilder: (BuildContext context,int index){
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Card(
child: new Container(
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.network(
data[index][‘urls’][‘small’],
width: MediaQuery.of(context).size.width,
),
],
),
),
),
],
),
),
);
},
)


4. code :-
import ‘dart:io’;
import ‘dart:typed_data’;
import ‘package:flutter/material.dart’;
import ‘package:http/http.dart’ as http;
import ‘dart:convert’;
import ‘dart:async’;
import ‘package:material_design_icons_flutter/material_design_icons_flutter.dart’;
import ‘package:dio/dio.dart’;
import ‘package:path_provider/path_provider.dart’;
class Homepage extends StatefulWidget {
@override
_HomepageState createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
var now = new DateTime.now();
List data;
String _search=”nature”;
@override
void initState() {

super.initState();
this.getjsondata();

}
Future<String> getjsondata() async {
try{
var response= await http.get(‘https://api.unsplash.com/search/photos?per_page=30&client_id=it1PXzVQRnxgz8v8hazcst7G9rNfXk1qiS8FgHTTMMk&query=${_search}');

setState(() {
var converted = json.decode(response.body);
data=converted[‘results’];
});
}
catch(e){}
return ‘success’;
}
Icon cusicon=Icon(Icons.search);
Widget custext=Text(“Awesome Wallpaper”);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Awesome Wallpaper’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
leading:IconButton(
onPressed: (){},
tooltip: ‘menu’,
icon: Icon(Icons.menu),
),
title: custext,
actions: <Widget>[
IconButton(
onPressed: (){
setState(() {
if(this.cusicon.icon==Icons.search){
this.cusicon=Icon(Icons.cancel);
this.custext=TextField(
autofocus: true,
onChanged: (text){
setState(() {
_search=text;
});
getjsondata();
},
textInputAction: TextInputAction.done,
decoration: InputDecoration(
border: InputBorder.none,
hintText: “Search Wallpaper”,
hintStyle: TextStyle(
color: Colors.white,
)
),
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
);
}
else{
this.cusicon=Icon(Icons.search);
this.custext=Text(“Awesome Wallpaper”);
}
});
},
icon:cusicon,
)
],
),
body:new ListView.builder(
itemCount: data == null ?0:data.length,
itemBuilder: (BuildContext context,int index){
return Container(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Card(
child: new Container(
padding: EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Image.network(
data[index][‘urls’][‘small’],
width: MediaQuery.of(context).size.width,
),
],
),

),
),
],
),
),
);
},
)
),
);
}
}









Use Unsplash API to fetch images for your Flutter App

You can check complete example on :-

https://github.com/gaurangkeluskar22/medimumapp

Also Check this out :-