Apps From Scratch

Build a Wallpaper App with Flutter From Scratch

Add commentJune 13, 202010 min read

We are going to learn how to build a Wallpaper app with flutter and pixels API (free), so you will learn how to use API in a flutter app creating a flutter project

If you like to learn via video then you can watch it on Youtube, Or you can watch the demo at least and then start the flutter project

https://youtu.be/EKdAU3l_0gA

Full App Source code: github.com/theindianappguy/wallpaperhub

📕 In this flutter project Learn How to:

Fetch data from an API with flutter.
useState in a flutter app.
pass down data in flutter widgets.
show a grid view.
Using Hero Animation.
Save the image to local storage (Gallery) for both Android And IOS.

Prerequisite: Install Flutter if not already https://flutter.dev/docs/get-started/install

Live Example https://wallpaperzone.web.app/, Watch App Demo on Youtube here

So let’s get started coding or flutter wallpaper app from scratch,

Step 1: Get Pexels API Key (FREE)

visit http://pexels.com/api and signup then click on request access and you will get Your API Key

Step 2: Create flutter projects

I did it with terminal, you can also create with Android Studio/Visual Studio or cmd, there will be no difference

Step 3: We will start by getting rid of all the comments in the main.dart and getting rid of MyHomePage() stateful widget

Step 4: Create a folder/package inside the lib we will create all the screens in this folder so I am going to name this “views”.

then create a file for every screen

Step 5: Building Home Page

Import material in home.dart
create a stateful widget (use shortcut write stf and hit enter) called Home.
now _HomeState class will be returning container change it with scaffold so that we can use all the out of box material widget-like app bar, body, floating action button, and more.
create a package/folder called widgets then create widgets.dart file

since all the screen will have the same app bar title we will create it once in widgets.dart and use it everywhere

so add this in widgets.dart

in this, we basically have arranged two widgets horizontally ( better option to do this can be richtext) and we also provided some styling to each

now make sure to update the home: in main.dart to Home().

then add this appBar in home.dart

appBar: AppBar(
        title: brandName(),
        elevation: 0.0,
      ),

once done let’s work on creating the search bar,

The search bar is simply horizontal arrangement of widgets which is a text field(used to get user input) and icon

Now let’s create the categories option, which is a horizontal list view.

For this we will create a new file where we will save these categories locally with their imageUrl;

so create a new package/folder inside lib name it data and create data.dart file inside it

Now since we want to save a list of different variables be it the category name, imageUrl, so we will create a new model so create a model package/folder inside lib and create categories.model

class CategorieModel {
  String categorieName;
  String imgUrl;
}

okay now inside the data.dart file we will create a function getCategories() which will return List<CategorieModel>

here is the code, I have also added the string apiKey add your API key here.

now we have the data now lets work on creating the list item then getting the data to home.dart and show it in a listview

For the list item, I call it CateogorieTile which accepts two string which is categorie(name), and imageUrl.

since the UI is that the text is above the image we will use stack and then provide styling here is the code.

now to get data from data.dart inside initState() method.

So first create a variable inside _HomeState

List<CategorieModel> categories = new List();

then add this.

@override
  void initState() {
    categories = getCategories();
    super.initState();
  }

it will show error since getCategories() is in data.dart so import by clicking on the bulb icon

now let’s create the List after the search also to add little vertical spacing between the list and the search use SizedBox(height:8)

then add this,

and run the app either on android or IOS…

Running? 👍, if not comment on this video I will reply

Now Let’s fetch the data from the Pexels API

So pexels have two API for images,

search image with a query
other is curated images API which updates regularly and is the same as what can be seen on pexels homepage.

okay so let’s create that function and add above the initState().

✋ some things to clear async, await, Map,http I have also created one more model called Photos Model

First, this is what API is returning.

So this is what we are getting, this is actually Map with a list of Map of Photos, What is Map? The map is a collection of key-value pairs and {…..} represents a map while [] represents a list

First, add http in pubspec.yaml file like this

import it in home.dart

import 'package:http/http.dart' as http;

Create photos_model.dart inside models package/folder

so PhotosModel contains a PhotoModel.fromMap() which can accept Map and return PhotoModel

🤔 Now what about await and async think of it this way when we will request the data it will take some time for it to fetch that if we get the value before we have received it will always be null right so await means we will wait for it to complete then only we will continue

Okay so now we are getting the curated list of wallpaper now is the time to show it in the list view

here is how.

add this to widget.dart and then add this to home.dart, the reason why we add it in the widget.dart rather than directly in home.dart because we will be using this in all the screens.

wallpapersList(wallpapers: wallpapers, context: context)

so home.dart is done.

Step 6: Building Search Page

open search.dart file and create a new stateful widget called Search, why stateful? because to get the data we will be calling the function in the init state.

Now open home.dart and wrap the search icon with GestureDetector and use ontap() to send the user to Search

to pass the query from home.dart to search.dart for this first we will create a TextEdittingController, why? basically we can assign text editing controller to the TextField and can get the user input

TextEditingController searchController = new TextEditingController();

now to make the Search stateful widget in search.dart to accept this variable we will create variable and constructor

Ok, so now we are in the search screen

First, to add app bar we will first return Scaffold() in the _SearchState class and add appBar

appBar: AppBar(
        title: brandName(),
        elevation: 0.0,
),

Now let’s create the body

for the body, we will First Use container which has column as a child the reason for using a container is we can provide padding and margin if required not a must.

then we will copy-paste the same search here

Similar to what used at home.dart,

The search bar is simply horizontal arrangement of widgets which is a text field(used to get user input) and icon

now what we want is to get image from pexels by query

here is the function

just import apiKey ( which is in the data.dart file), now we will call this function in the initState() So that we can get the wallpapers when this screen opens and we will pass the string we get.

@override  void initState() {    
 getSearchWallpaper(widget.search);    
 searchController.text = widget.search;    
 super.initState();  
}

also, add TextEdittingController as we did in the home.dart and I am providing it the value we get from the home.dart so that the text in the text field is shown

now we also want this to work when a user enters something in the text field and search rather than send as we did in the home.dart we will just call getSearchWallpaper(searchController.text)

Now let’s add the Wallpaper Gridview like this

wallPaper(photos, context),

full source of search.dart can be found here

Step 7: Building Category Page

This is the same as search but without searchBar 😉, we want to open this when someone clicks on the categories at home.dart so

we will send the category name from the categoriesTile wrapping the container in the GestureDetector and using onTap()

Now what we want is when someone will click on the image we should show that in full screen. with a button to save the image to local storage so that they can use it as wallpaper

Step 8: Building Image View Screen:

import material.
Create a stateful widget called ImageView and return Scaffold.

To Set wallpaper , we will accept the imageUrl and show it in full screen

you can notice we have a button which is actually a container with a column as a child having two text widgets

also, the container is wrapped inside a column which also consists of a test widget which is “Cancel”

Now since we want the button to be above the image we will use stack here is the code for image_view.dart

you can notice we have wrapped the button with InkWell and in the onTap() we are checking if it is web or other if web we are open the URL in a new tab so that person can do “save image as” else we call a function to save the image to the gallery

for which add these in the pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.0+4
  cached_network_image: ^2.0.0
  image_gallery_saver: ^1.2.2
  permission_handler: ^4.2.0+hotfix.3
  random_string: ^2.0.1
  dio: ^3.0.9
  url_launcher: ^5.4.2
  url_launcher_web: ^0.1.1+1

we already have imported the http let’s see why others

the cached network helps in caching the image so that less internet is consumed and overall better user experience for the user
image_gallaery_saver is used to save the image to the gallery
permission handler is used to handle permission
random_string for image name
dio is used for saving image function
URL launcher to launch URL

now run 🎉 congratulations now you have an app which you can add to your resume 😉