Quick Tips: Build a Flutter Wallpaper App with Swipe,Shake and Double TAP to download features in just 30 minutes.
By: Himanshu Ranjan
Tags: Tutorial, Android App Development, Flutter App Development, Dart, iOS App Development

Quick Tips: Build a Flutter Wallpaper App with Swipe,Shake and Double TAP to download features in just 30 minutes. Himanshu Ranjan Follow Aug 7 · 4 min read

So,Today I will walk you guys through my Wallpaper App in Flutter that i built in just 30 minutes.

Features of this app:-

Swipe gesture (horizontal) to browse the images. Double tap gesture to download the wallpaper (anywhere in the screen). Shake gesture to fetch 10 new images from the Unsplash API. Loading screen while the app is fetching images.

Flutter Packages we need:-

flutter_shake_plugin

http:

swipedetector:

So,Let’s get started and build this app live!

Variables declarations

FlutterShakePlugin _shakePlugin;

List data = []; //List to store urls of images

String _search = 'nature';

int index = 0;

int count = 100;

int c = 0; // c:no of left swipes

int r = 0; // r: no of right swipes

bool isloading = false; // parameter to set the loading icon

Fetching Images data from UNSPLASH Api:

Future<String> getjsondata() async {

try { var response = await http.get( 'https://api.unsplash.com/search/photos?per_page=$count&client_id='APIKEY'&query=$_search');

setState(() {

var converted = json.decode(response.body);

data = converted['results'];

isloading = false;

});

} catch (e)

{}

return 'success';

}

So, here we are fetching images from UNSPLASH Api and storing it into our list data. You must use your own Api key after generating it from Unsplash official website.

Showing Images on Screen:

Container(child: Image.network(data[index]['urls']['small'], fit: BoxFit.fill,

),

),

Implementing Swipe to see different images.All these swipe parameters should be wrapped under SwipeDetector().

onSwipeLeft: () {

c = c + 1; //incrementing swipe count on every swipe if (c >= 10)

setState(() {

index = index;

});

else

setState(() {

index = index + 1;

});

},

onSwipeRight: () {

r = r + 1; //incrementing swipe count on every swipe if (index > 0) {

setState(() {

index = index - 1;

c = c -r; //incase we use right swipe while going through images and we left swipe to go back again then the left swipe must not counted again.

});

} else

setState(() {

index = index;

});

}

Let’s setup swipe Configurations now:

swipeConfiguration: SwipeConfiguration( verticalSwipeMinVelocity: 100.0, verticalSwipeMinDisplacement: 50.0, verticalSwipeMaxWidthThreshold: 100.0, horizontalSwipeMaxHeightThreshold: 50.0, horizontalSwipeMinDisplacement: 50.0, horizontalSwipeMinVelocity: 100.0);

These swipe configs will help you configure your swipe movement and velocity.

Let’s implement the image downloading functionality:

void saveImage(int i) async {

var url = data[i]['urls']['small'].toString();

await ImageDownloader.downloadImage(url); // saving image to the gallery

} onDoubleTap: () => {

saveImage(index),

showDialog(context:context,builder:(context)

{

return AlertDialog(

title: Text('IMAGE SAVED!'),

);

},

)

}, // image save functionality on double tap with an alert!

So, the above function call will help you download and save the wallpaper in your gallery.

Full code:

import 'dart:convert';

import 'package:flutter/material.dart';

import 'dart:async';

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

import'package:flutter_shake_plugin/flutter_shake_plugin.dart';

import 'package:image_downloader/image_downloader.dart';

import 'package:swipedetector/swipedetector.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {

@override

_MyAppState createState() => _MyAppState();

} class _MyAppState extends State<MyApp> {

FlutterShakePlugin _shakePlugin;

List data = []; //List to store urls of images

String _search = 'nature';

int index = 0;

int count = 100;

int c = 0; // c:no of left swipes

int r = 0; // r: no of right swipes

bool isloading = false; // parameter to set the loading icon @override

void initState()

{

super.initState();//shake plugin that sets the working of the app when the screen is shaked!

_shakePlugin = FlutterShakePlugin(

onPhoneShaken: () {

//do stuff on phone shake

setState(() { if (c <10) //if we shake the screen before even seeing 10 photos i.e without 10 left swipes.

{

data.removeRange(0, 9);

index = index + ((10 - c) - 1);

c = 0; // setting wipe count to 0 again.

isloading = true;

}

data.removeRange(0, 9);

c = 0; // setting wipe count to 0 again.

index = index + 1;

isloading = true;

});

},

)..startListening();

} @override

void dispose() {

super.dispose();

_shakePlugin.stopListening(); // stopping the shake plugin

}

Future<String> getjsondata() async {

try {

var response = await http.get( 'https://api.unsplash.com/search/photos?per_page=$count&client_id=APIkey&query=$_search');

setState(() {

var converted = json.decode(response.body);

data = converted['results'];

isloading = false;

}); }

catch (e) {}

return 'success';

}

void saveImage(int i) async {

var url = data[i]['urls']['small'].toString();

await ImageDownloader.downloadImage(url); // saving image to the gallery

} @override

Widget build(BuildContext context) {

getjsondata();

return isloading ? CircularProgressIndicator(): GestureDetector(

child: SwipeDetector(

child: Container(

child: Image.network(

data[index]['urls']['small'],

fit: BoxFit.fill,

),

), onSwipeLeft: () {

c = c + 1; //incrementing swipe count on every swipe if (c >= 10)

setState(() {

index = index;

});

else

setState(() {

index = index + 1;

});

}, onSwipeRight: () {

r = r + 1; //incrementing swipe count on every swipe if (index > 0) {

setState(() {

index = index - 1;

c = c - r; //incase we use right swipe while going through images and we left swipe to go back again then the left swipe must not counted again.

});

} else

index = index;

},

swipeConfiguration: SwipeConfiguration( verticalSwipeMinVelocity: 100.0, verticalSwipeMinDisplacement: 50.0, verticalSwipeMaxWidthThreshold: 100.0, horizontalSwipeMaxHeightThreshold: 50.0, horizontalSwipeMinDisplacement: 50.0, horizontalSwipeMinVelocity: 100.0), //Swipe Config

),

onDoubleTap: () => {

saveImage(index),

showDialog(context: context,builder: (context) { return AlertDialog(title: Text('IMAGE SAVED!'),

);

},

)

}, // image save functionality on double tap with an alert! );

}}

Github Repo Link:

https://github.com/Himanshuranjan30/Flutter-Wallpaper-App

App Demo:

So, That’s how you can develop a basic wallpaper with gesture features in just 30 minutes! That’s it for this article,See you guys in the next one.

Till then Keep Coding!

https://www.twitter.com/FlutterComm