How to download network image in Flutter - flutter

Question

I am building a simple wallpaper app with Api by watching tutorials on YouTube. But in the last stage, I can't save the image from the URL in the android simulator. Can you guys help me with how can I do this work?
import 'package:flutter/material.dart';
class ImageView extends StatefulWidget {
final String imageUrl;
ImageView({#required this.imageUrl});
#override
_ImageViewState createState() => _ImageViewState();}
class _ImageViewState extends State<ImageView> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Hero(
tag: widget.imageUrl,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Image.network(
widget.imageUrl,
fit: BoxFit.cover,
),
),
),
//the buttons is here
Container(
alignment: Alignment.bottomCenter,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
//wallpaper download button
GestureDetector(
onTap: () {},
child: Stack(
children: [
Container(
height: 55,
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xff1c1b1b).withOpacity(0.8),
borderRadius: BorderRadius.circular(30),
)),
Container(
padding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
width: MediaQuery.of(context).size.width / 2,
height: 55,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 1,
),
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(colors: [
Colors.blueGrey[100],
Colors.grey[900],
])),
child: Column(
children: [
Text(
'Set Wallpaper',
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
SizedBox(height: 5),
Text(
'Image wil be save in gallery',
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
)
],
)),
],
),
),
SizedBox(height: 16),
//for closeing the showing wallpaper
GestureDetector(
onTap: () => Navigator.pop(context),
child: Text(
'Cancel',
style: TextStyle(
color: Colors.amber,
),
),
),
SizedBox(height: 50)
],
),
)
],
),
);
}
}

Answer 1

You can copy paste run full code below
Step 1: To save image to gallery, add <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> to AndroidManifest.xml
Step 2: Request permission with permission_handler
Step 3: Download file with flutter_cache_manager's DefaultCacheManager().getSingleFile(widget.imageUrl)
Step 4: Save to gallery with image_gallery_saver's ImageGallerySaver.saveFile(file.path)
Step 5: Directly set wall paper with wallpaper_manager's WallpaperManager.setWallpaperFromFile(file.path, WallpaperManager.HOME_SCREEN)
code snippet
_requestPermission() async {
Map<Permission, PermissionStatus> statuses = await [
Permission.storage,
].request();
final info = statuses[Permission.storage].toString();
print(info);
}
...
GestureDetector(
onTap: () async {
File file = await DefaultCacheManager()
.getSingleFile(widget.imageUrl);
print(file.path);
final result = await ImageGallerySaver.saveFile(file.path);
print("gallerysaver result $result");
String resultWall =
await WallpaperManager.setWallpaperFromFile(
file.path, WallpaperManager.HOME_SCREEN);
print("resultWall $resultWall");
},
working demo
full code
import 'dart:io';
import 'package:permission_handler/permission_handler.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:wallpaper_manager/wallpaper_manager.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
class ImageView extends StatefulWidget {
final String imageUrl;
ImageView({#required this.imageUrl});
#override
_ImageViewState createState() => _ImageViewState();
}
class _ImageViewState extends State<ImageView> {
#override
void initState() {
super.initState();
_requestPermission();
}
_requestPermission() async {
Map<Permission, PermissionStatus> statuses = await [
Permission.storage,
].request();
final info = statuses[Permission.storage].toString();
print(info);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Hero(
tag: widget.imageUrl,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Image.network(
widget.imageUrl,
fit: BoxFit.cover,
),
),
),
//the buttons is here
Container(
alignment: Alignment.bottomCenter,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
//wallpaper download button
GestureDetector(
onTap: () async {
File file = await DefaultCacheManager()
.getSingleFile(widget.imageUrl);
print(file.path);
final result = await ImageGallerySaver.saveFile(file.path);
print("gallerysaver result $result");
String resultWall =
await WallpaperManager.setWallpaperFromFile(
file.path, WallpaperManager.HOME_SCREEN);
print("resultWall $resultWall");
},
child: Stack(
children: [
Container(
height: 55,
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xff1c1b1b).withOpacity(0.8),
borderRadius: BorderRadius.circular(30),
)),
Container(
padding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
width: MediaQuery.of(context).size.width / 2,
height: 55,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 1,
),
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(colors: [
Colors.blueGrey[100],
Colors.grey[900],
])),
child: Column(
children: [
Text(
'Set Wallpaper',
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
SizedBox(height: 5),
Text(
'Image wil be save in gallery',
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
)
],
)),
],
),
),
SizedBox(height: 16),
//for closeing the showing wallpaper
GestureDetector(
onTap: () => Navigator.pop(context),
child: Text(
'Cancel',
style: TextStyle(
color: Colors.amber,
),
),
),
SizedBox(height: 50)
],
),
)
],
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ImageView(
imageUrl: "https://picsum.photos/250?image=9")),
);
},
child: Text('To set wall paper')),
])));
}
}