How to Pick files and Images for upload with flutter web - dart

I would like to know how to pick an Image from the users computer into my flutter web app for upload

Using dart:html package directly in Flutter is not recommended.
Instead, use this package: https://pub.dev/packages/file_picker.
Example of how to use in Flutter Web:
class FileUploadButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return RaisedButton(
child: Text('UPLOAD FILE'),
onPressed: () async {
var picked = await FilePicker.platform.pickFiles();
if (picked != null) {
print(picked.files.first.name);
}
},
);
}
}
Note that FilePickerResult.path is not supported in Flutter Web.

I tried the code below and it worked.
first import 'dart:html';
// variable to hold image to be displayed
Uint8List uploadedImage;
//method to load image and update `uploadedImage`
_startFilePicker() async {
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();
uploadInput.onChange.listen((e) {
// read file content as dataURL
final files = uploadInput.files;
if (files.length == 1) {
final file = files[0];
FileReader reader = FileReader();
reader.onLoadEnd.listen((e) {
setState(() {
uploadedImage = reader.result;
});
});
reader.onError.listen((fileEvent) {
setState(() {
option1Text = "Some Error occured while reading the file";
});
});
reader.readAsArrayBuffer(file);
}
});
}
now just any Widget, like a button and call the method _startFilePicker()

import 'package:http/http.dart' as http;
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
class FileUploadWithHttp extends StatefulWidget {
#override
_FileUploadWithHttpState createState() => _FileUploadWithHttpState();
}
class _FileUploadWithHttpState extends State<FileUploadWithHttp> {
PlatformFile objFile = null;
void chooseFileUsingFilePicker() async {
//-----pick file by file picker,
var result = await FilePicker.platform.pickFiles(
withReadStream:
true, // this will return PlatformFile object with read stream
);
if (result != null) {
setState(() {
objFile = result.files.single;
});
}
}
void uploadSelectedFile() async {
//---Create http package multipart request object
final request = http.MultipartRequest(
"POST",
Uri.parse("Your API URL"),
);
//-----add other fields if needed
request.fields["id"] = "abc";
//-----add selected file with request
request.files.add(new http.MultipartFile(
"Your parameter name on server side", objFile.readStream, objFile.size,
filename: objFile.name));
//-------Send request
var resp = await request.send();
//------Read response
String result = await resp.stream.bytesToString();
//-------Your response
print(result);
}
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
//------Button to choose file using file picker plugin
RaisedButton(
child: Text("Choose File"),
onPressed: () => chooseFileUsingFilePicker()),
//------Show file name when file is selected
if (objFile != null) Text("File name : ${objFile.name}"),
//------Show file size when file is selected
if (objFile != null) Text("File size : ${objFile.size} bytes"),
//------Show upload utton when file is selected
RaisedButton(
child: Text("Upload"), onPressed: () => uploadSelectedFile()),
],
),
);
}
}

I've tested this package and was very happy with the result imagePickerWeb it returns 3 different types it can be in the form of Image(widget for preview), byte, File(upload)
then you can use this to get the values
html.File _cloudFile;
var _fileBytes;
Image _imageWidget;
Future<void> getMultipleImageInfos() async {
var mediaData = await ImagePickerWeb.getImageInfo;
String mimeType = mime(Path.basename(mediaData.fileName));
html.File mediaFile =
new html.File(mediaData.data, mediaData.fileName, {'type': mimeType});
if (mediaFile != null) {
setState(() {
_cloudFile = mediaFile;
_fileBytes = mediaData.data;
_imageWidget = Image.memory(mediaData.data);
});
}
Uploading to firebase
don't forget to add this to your index.html
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-storage.js"></script>
Uploading to firebase
import 'package:firebase/firebase.dart' as fb;
uploadToFirebase(File file) async {
final filePath = 'temp/${DateTime.now()}.png';//path to save Storage
try {
fb
.storage()
.refFromURL('urlFromStorage')
.child(filePath)
.put(file);
} catch (e) {
print('error:$e');
}
}
See the documentation of the package if you still have problems

The accepted answer is indeed outdated. Like jnt suggested, https://pub.dev/packages/file_picker is a handy package, when it comes to implementing an image upload using Flutter Web.
The problem I was facing is to get a base64 representation of an image, since I was using it to store images in Firestore. As we know, dart:io is not supported on Flutter Web and throws Unsupported operation: _Namespace error. Hence, using File and reading file's bytes was not an option. Luckily, the package provides API to convert the uploaded image to Uint8List. Here is my implementation:
import 'package:file_picker/file_picker.dart';
...
FilePickerResult? pickedFile;
...
void chooseImage() async {
pickedFile = await FilePicker.platform.pickFiles();
if (pickedFile != null) {
try {
setState(() {
logoBase64 = pickedFile!.files.first.bytes;
});
} catch (err) {
print(err);
}
} else {
print('No Image Selected');
}
}
In case you need to display the local image right away, use Image.memory.
Image.memory(logoBase64!);

i have this problem too;
i use https://pub.dev/packages/file_picker but in flutter web path not suppor;
you should to use bytes;
i save file bytes in var _fileBytes and use in request;
var request = http.MultipartRequest('POST', Uri.parse('https://.....com'));
request.headers.addAll(headers);
request.files.add(
http.MultipartFile.fromBytes(
'image',
await ConvertFileToCast(_fileBytes),
filename: fileName,
contentType: MediaType('*', '*')
)
);
request.fields.addAll(fields);
var response = await request.send();
function ConvertFileToCast:
ConvertFileToCast(data){
List<int> list = data.cast();
return list;
}
it`s work for me :)

if anyone is wondering how to get it working on mobile and web :
var bytes;
await file!.files.first.readStream!
.map((asciiValue) => bytes = asciiValue)
.toList();
FormData body;
final MultipartFile file = MultipartFile.fromBytes(bytes, filename: "file");
MapEntry<String, MultipartFile> imageEntry = MapEntry("image", file);
body.files.add(imageEntry);

I can share the way I upload image to AWS s3 from flutter web recently.
May not exact match the case who is looking for answer here but I think it may inpired others somehow.
First I try to use amplify_storage_s3 package but it not support for Flutter Web yet for now. So I use basic http post instead.
The packages I use:
file_picker: For web, FileUploadInputElement (from html package) may do the same thing but I think using this package can make thing simpler.
dio: I'm not sure why I cannot use http's MultipartFile successfully so I use this instead. (maybe someone can provide a version using http package)
mine: transfer extension to mimetype
Code example:
import 'package:flutter/material.dart';
import 'package:dio/dio.dart' as dio;
import 'package:file_picker/file_picker.dart';
import 'package:mime/mime.dart';
class FileUploader extends StatelessWidget {
const FileUploader({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () async {
// 1. Pick an image file
final filePicked = await FilePicker.platform.pickFiles();
if (filePicked != null) {
final file = filePicked.files.single; // PlatformFile
final mimeType = lookupMimeType(file.name) ?? '';
/// 2. Get presigned data somewhere
const url = 'https://s3.amazonaws.com/......';
final fields = {
'bucket': '...',
'X-Amz-Algorithm': 'AWS4-HMAC-SHA256',
'X-Amz-Credential': '...',
'X-Amz-Date': '...',
'Policy': '...',
'X-Amz-Signature': '...',
'x-amz-meta-userid': '...',
'Content-Type': mimeType,
'file': dio.MultipartFile.fromBytes(file.bytes ?? []),
};
/// 3. Send file to AWS s3
final formData = dio.FormData.fromMap(fields);
await dio.Dio().post(url, data: formData);
}
},
child: const Icon(Icons.upload),
),
);
}
}

Here is my working code to upload using dio. I use dio because it has a callback progress function.
class _FileUploadViewState extends State<FileUploadView> {
#override
void initState() {
super.initState();
}
FilePickerResult? result;
PlatformFile? file;
Response? response;
String? progress;
String? percentage;
Dio dio = Dio();
selectFile() async {
result =
await FilePicker.platform.pickFiles(type: FileType.any, withData: true);
if (result != null) {
file = result?.files.single;
}
//print(file?.name);
//print(file?.bytes?.length);
//print(file?.size);
//print(file?.extension);
//print(file?.path);
setState(() {});
}
Future<void> uploadFile(BuildContext context, User user) async {
final navigator = Navigator.of(context);
final storage = FlutterSecureStorage();
String? token = await storage.read(key: 'jwt');
final formData = FormData.fromMap(
{
'file': MultipartFile.fromBytes(file?.bytes as List<int>,
filename: file?.name)
},
);
dio.options.headers['content-Type'] = 'application/octet-stream';
dio.options.headers["authorization"] = "Bearer $token";
response = await dio.post(
user.fileUrl,
data: formData,
onSendProgress: (int sent, int total) {
percentage = (sent / total * 100).toStringAsFixed(2);
progress = "$sent Bytes of $total Bytes - $percentage % uploaded";
setState(
() {},
);
},
);
if (response!.statusCode == 200) {
....
My go code for the server looks like this,
if err := r.ParseMultipartForm(64 << 20); err != nil {
log.Println("error processing multipart form")
log.Println(err)
http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
return
}
file, handler, err := r.FormFile("file")

Related

Flutter Text To Speech: Speak several strings subsequently with different SpeechRates

I have a problem with the Flutter Text To Speech package.
When clicking on a FloatingActionButton I would like to speak/play several Strings (with different Speechrates) subsequently. However, when doing so, I can only hear the last string that I have passed onto the function and not the first one.
As you can see in the code below, I have tried to make use of the asynchronus programming (async / await).
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter_tts/flutter_tts.dart';
class SpeakerClass extends StatefulWidget{
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _SpeakerClassState();
}
}
class _SpeakerClassState extends State<SpeakerClass>{
String text1 = 'eins';
String text2 = 'zwei';
String text3 = 'drei';
String text4 = 'vier';
String currentTtsString;
double ttsSpeechRate1 = 0.5;
double ttsSpeechRate2 = 1.0;
double currentSpeechRate;
Future playTtsString1() async {
currentTtsString = text1;
currentSpeechRate = ttsSpeechRate1;
await runTextToSpeech(currentTtsString, currentSpeechRate);
return null;
}
Future playTtsString2() async {
currentTtsString = text2;
currentSpeechRate = ttsSpeechRate2;
await runTextToSpeech(currentTtsString, currentSpeechRate);
return null;
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: FloatingActionButton (
backgroundColor: Colors.blue,
child: Icon(Icons.volume_up, color: Colors.white),
onPressed: () async {
await playTtsString1();
await playTtsString2();
},
)
);
}
}
Future<void> runTextToSpeech(String currentTtsString, double currentSpeechRate) async {
FlutterTts flutterTts;
flutterTts = new FlutterTts();
await flutterTts.setLanguage("en-GB");
await flutterTts.setVolume(1.0);
await flutterTts.setPitch(1.0);
await flutterTts.isLanguageAvailable("en-GB");
await flutterTts.setSpeechRate(currentSpeechRate);
await flutterTts.speak(currentTtsString);
}
When pressing the FloatingActionButton I expect the program to first carry out the function playTtsString1 ("eins" with a speed of 0.5) and afterwards the function playTtsString2 ("zwei" with a speed of 1).
However, somehow I can only hear the program saying "zwei". I guess the program is not waiting for the first function "playTtsString1" to be finished and already carries out the second function "playTtsString2". I would really appreciate any help on this matter!
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter_tts/flutter_tts.dart';
class SpeakerClass extends StatefulWidget{
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return _SpeakerClassState();
}
}
class _SpeakerClassState extends State<SpeakerClass>{
String text1 = 'eins';
String text2 = 'zwei';
String text3 = 'drei';
String text4 = 'vier';
String currentTtsString;
double ttsSpeechRate1 = 0.5;
double ttsSpeechRate2 = 1.0;
double currentSpeechRate;
FlutterTts flutterTts;
bool bolSpeaking = false;
Future playTtsString1() async {
bolSpeaking = true;
currentTtsString = text1;
currentSpeechRate = ttsSpeechRate1;
await runTextToSpeech(currentTtsString, currentSpeechRate);
return null;
}
Future playTtsString2() async {
bolSpeaking = true;
currentTtsString = text2;
currentSpeechRate = ttsSpeechRate2;
await runTextToSpeech(currentTtsString, currentSpeechRate);
return null;
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: FloatingActionButton (
backgroundColor: Colors.blue,
child: Icon(Icons.volume_up, color: Colors.white),
onPressed: () async {
// Play String 1
await playTtsString1();
// Check String 1 Finish
new Future.delayed(new Duration(milliseconds: 100), () async {
// loop until bolSpeaking = false
while (bolSpeaking) {
await Thread.sleep(100);
}
// play String 2
await playTtsString2();
}
},
)
);
}
}
Future<void> runTextToSpeech(String currentTtsString, double currentSpeechRate) async {
flutterTts = new FlutterTts();
await flutterTts.setLanguage("en-GB");
await flutterTts.setVolume(1.0);
await flutterTts.setPitch(1.0);
await flutterTts.isLanguageAvailable("en-GB");
await flutterTts.setSpeechRate(currentSpeechRate);
flutterTts.setCompletionHandler(() {
setState(() {
// The following code(s) will be called when the TTS finishes speaking
bolSpeaking = false;
});
});
flutterTts.speak(currentTtsString);
}
This should now work with the latest flutter_tts version.
You simply need to set awaitSpeakCompletion before the speaking happens.
You can update your run method like so:
Future<void> runTextToSpeech(String currentTtsString, double currentSpeechRate) async {
FlutterTts flutterTts;
flutterTts = new FlutterTts();
await flutterTts.awaitSpeakCompletion(true);
await flutterTts.setLanguage("en-GB");
await flutterTts.setVolume(1.0);
await flutterTts.setPitch(1.0);
await flutterTts.isLanguageAvailable("en-GB");
await flutterTts.setSpeechRate(currentSpeechRate);
await flutterTts.speak(currentTtsString);
}

Flutter Shared Preferences Auth FIle

I'm trying to write an auth file, with a list of finals with shared preferences values in it. I could import that auth file in my other files and i could get like the name or email without importing shared preferences in every file.
It would probably look way smoother and cleaner.
I thought something like this would have worked but it didn't
/// ------------Auth------------ ///
final email = getEmail();
getEmail() async {
final SharedPreferences prefs = await SharedPreferences.getInstance();
return prefs.getString('email');
}
Does anybody have any idea how to do this?
Greetings,
Jente
I assume you want to use the method in multiple files. The problem with your code is that the getEmail method is marked async that means it will have to return a Future. Think about it like this, when you mark a method as async it means it will return something (or finish executing) in the near future. When ? Well you don't know exactly when, so you'll need to get "notified" when the method is "done", that's why you'll use a Future. Something like this:
Future<String> getEmail() async {
final SharedPreferences prefs = await SharedPreferences.getInstance();
return prefs.getString('email');
}
class ThisIsTheClassWhereYouWantToUseTheFunction {
//let's say you have a method in your class called like the one below (it can be any other name)
void _iNeedTheEmailToPrintIt() {
//this is the way you can call the method in your classes, this class is just an example.
getEmail().then((thisIsTheResult){ // here you "register" to get "notifications" when the getEmail method is done.
print("This is the email $thisIsTheResult");
});
}
}
you can define a class Auth or much better a scoped_model.
Here's a class implementation
class Auth {
get email() {
final SharedPreferences prefs = await SharedPreferences.getInstance();
return prefs.getString('email');
}
set email(String em) {
final SharedPreferences prefs = await SharedPreferences.getInstance();
pref.setString('email', em);
}
}
and now you can call it in your widgets :)
Try this;
make dart file (Filename and Class Name ShareUtils)
add follow Code
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:async';
class ShareUtils {
static ShareUtils _instance;
SharedPreferences ShareSave;
factory ShareUtils() => _instance ?? new ShareUtils._();
ShareUtils._();
void Instatce() async {
ShareSave = await SharedPreferences.getInstance();
}
Future<bool> set(key, value) async {
return ShareSave.setString(key, value);
}
Future<String> get(key) async {
return ShareSave.getString(key);
}
}
2.Add main.dart
class MyApp extends StatelessWidget {
static ShareUtils shareUtils;
#override
Widget build(BuildContext context) {
ThemeData mainTheme = new ThemeData(
);
shareUtils = new ShareUtils();
shareUtils.Instatce();
MaterialApp mainApp = new MaterialApp(
title: "Your app",
theme: mainTheme,
home: new SplashPage(),
debugShowCheckedModeBanner: true,
routes: <String, WidgetBuilder>{
"RegisterPage": (BuildContext context) => new RegisterPage(),
"HomePage": (BuildContext context) => new HomePage(),
},
);
return mainApp;
}
}
3.SET
void UserInfo(code, token) async{
await MyApp.shareUtils.set("token", token);
await MyApp.shareUtils.set("code", code);
await Navigator.of(context).pushNamed("HomePage");
}
4.GET
Future NextPage() async {
MyApp.shareUtils.get("token").then((token) {
print(token);
if (token == null || token == "") {
Navigator.of(context).popAndPushNamed("RegisterPage");
} else {
Navigator.of(context).popAndPushNamed("HomePage");
}
});
}
Hope to help.

only static members can be accessed in initializers

I have an int value passed from the first screen to the second screen and I can have my value without any problem...My problem is that I want to add my recieved value to astring to complete and start working with my api which reqires to add the imported value of the first screen...Iam trapped between the recieved int which I can not change it to a static, and the api string which reqires the added value to be a static
the second Screen:
class CatsNews extends StatefulWidget {
#override
_CatsNewsState createState() => new _CatsNewsState();
}
class _CatsNewsState extends State<CatsNews> {
int _id ;
String root = "http://api.0mr.net";
String url = "/api/GetCategoryById/$_id";
#override
List data;
Future<String> getDrawerItem() async {
var response = await http.get(
Uri.encodeFull(url), headers: {"Accept": "application/json"});
setState(() {
var respondbody = json.decode(response.body);
data = respondbody["StoriesCategory"];
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Cat Screen'),
),
body: Center()
I get the value through the shared preferences and it works fine if it was inside Widget build(BuildContext context)
#override
void initState() {
getIntPrefrence().then(updatId);
super.initState();
this.getDrawerItem();
}
void updatId(int id) {
setState(() {
this._id = id;
});
}
}
UPDATE:
I have added the Srting url to the initstate() and the code is as foloows:
class _CatsNewsState extends State<CatsNews> {
#override
List data;
int _id ;
var response;
String root = "http://-api.0mr.net";
String url ;
Future<String> getDrawerItem() async {
response = await http
.get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
setState(() {
var respondbody = json.decode(response.body);
data = respondbody["StoriesCategory"];
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('$_id'),
),
body: Center()
}
Future<int> getIntPrefrence() async {
SharedPreferences pref = await SharedPreferences.getInstance();
int id = pref.getInt("id");
return id;
}
#override
void initState() {
super.initState();
getIntPrefrence().then(updatId);
updateurl();
this.getDrawerItem();
//initResponse();
}
updateurl() {
setState(() {
this.url= "$root/api/CategoryId/$_id";
});
}
void updatId(int id) {
setState(() {
this._id = id;
});
}
}
the previous issue was solved by adiing the String to the initstate(), but the updated values does not add to the String and deals witht the imported int id as null or zero,however the int id works fine and shows the imported value in any widget inside the Widget build(BuildContext context)
The offending code is probably
var response = await http.get(...
You can't have arbitrary code in a field initializer which is the part after = in above code.
Dart has a strict order in object creation steps.
Field initializers are executed before the constructor initialization list and before the constructor initialization list of super classes.
Only after all the constructor initialization lists of all super classes are executed, the constructor bodies are executed and only from then on is it allowed to access this, the instance of your class being created.
Your code accesses this (implicitly) before that and at this point object initialization isn't done and therefore access to this prohibited to prevent undefined bahavior.
Static members are safe to access, because they don't depend on object initialization. They are ready to use without an instance entirely.
What the error message is telling you is that your initializer is trying to do things that are not possible at this point and you need to move the code somewhere else.
The field initialization code can be moved to the constructor initialization list. This is usually done if the field is supposed to be final,
or to the constructor body, or to a method - as shown below.
var response;
#override
void initState() {
super.initState();
_initResponse();
}
void _initResponse() async {
response = await http.get(
Uri.encodeFull(url), headers: {"Accept": "application/json"});
setState(() {
var respondbody = json.decode(response.body);
data = respondbody["StoriesCategory"];
});
}
Because initState does not allow async we move the code to another method (_initResponse) that we call from initState.
the solution of my problem was adding both the imported value and the String which I want to edit according to it inside the method which will start my api request as follows:
void initState() {
super.initState();
this.getDrawerItem();
}
Future<String> getDrawerItem() async {
int _id ;
String url;
SharedPreferences pref = await
SharedPreferences.getInstance();
_id = (pref.getInt("id")?? 0);
url = "http://gomhuriaonline-api.0mr."
"net/api/GetCategoryById/$_id";
print(url);
response = await http
.get(Uri.encodeFull(url), headers:
{"Accept": "application/json"});
setState(() {
var respondbody = json.decode(response.body);
data = respondbody["StoriesCategory"];
});
}
}

Drawing over an image downloaded from remote server

I need to do the following:
Download a PNG resource from a server
Draw several rectangles over that image with different color depending on state
Display that image in Zoomable Image View
I have a working code in an Android app using Canvas, but I cannot figure out how to do that with Flutter.
Here is the code that downloads the resource:
static Future<File> getImageFromUrl(String url) async {
final directory = await getApplicationDocumentsDirectory();
final file = File("$directory/${_getSHA(url)}.png");
if (await file.exists()) {
// Returns the cached file
} else {
final response = await http.get(url);
if (response.statusCode >= 200 && response.statusCode < 300) {
await file.writeAsBytes(response.bodyBytes);
} else {
return null;
}
}
return file;
}
What should I do next? I tried using PictureRecorder and Canvas, but I cannot find a way to draw image from the file on those canvas and then convert it to Image because I cannot extract width and height from the file.
EDIT:
Below is the Android code equivalent that I would like to implement in Flutter.
// Here we have a bitmap from a file
Bitmap mapBitmap = getBitmap();
Canvas mapCanvas = new Canvas(mapBitmap);
mapDrawable.setBounds(0, 0, mapCanvas.getWidth(), mapCanvas.getHeight());
mapDrawable.draw(mapCanvas);
canvasWidth = mapCanvas.getWidth();
canvasHeight = mapCanvas.getHeight();
Paint paint = new Paint();
for (java.util.Map.Entry<String, MapObject> entry : this.mapObjects.entrySet()) {
MapObject mapObject = entry.getValue();
paint.setColor(getContext().getResources().getColor(mapObject.getBackgroundColor()));
paint.setAlpha(100);
mapCanvas.drawRect((int) (mapObject.getPosX() * scaleX),
(int) (mapObject.getPosY() * scaleY),
(int) ((mapObject.getPosX() + mapObject.getWidth()) * scaleX),
(int) ((mapObject.getPosY() + mapObject.getHeight()) * scaleY),
paint);
}
photoView.setImageBitmap(mapBitmap);
I finally managed to solve the issue!
I created a renderer that creates a composite image (background from the remote resource and adds rectangles in the foreground).
The renderer:
class MapRenderer {
ui.Image _mapBackgroundImage;
Future<ui.Codec> renderMap(String url, List<Sensor> sensors) async {
await _loadMapBackground(url);
var renderedMapImage = await _updateSensors(sensors);
var byteD = await renderedMapImage.toByteData(
format: ui.ImageByteFormat.png);
return ui.instantiateImageCodec(Uint8List.view(byteD.buffer));
}
Future<ui.Image> _updateSensors(List<Sensor> sensors) async {
ui.PictureRecorder recorder = ui.PictureRecorder();
Canvas c = Canvas(recorder);
var paint = ui.Paint();
c.drawImage(_mapBackgroundImage, ui.Offset(0.0, 0.0), paint);
for (Sensor s in sensors) {
paint.color = (s.availability ? CustomColors.npSensorFree : CustomColors
.npSensorOccupied);
c.drawRect(
ui.Rect.fromPoints(ui.Offset(s.posX, s.posY),
ui.Offset(s.posX + s.width, s.posY + s.height)),
paint,
);
}
return recorder
.endRecording()
.toImage(_mapBackgroundImage.width, _mapBackgroundImage.height);
}
Future<void> _loadMapBackground(String url) async {
var imageBytes = await _getLocalCopyOrLoadFromUrl(url);
if (imageBytes != null) {
_mapBackgroundImage = await _getImageFromBytes(imageBytes);
} else {
return null;
}
}
Future<ui.Image> _getImageFromBytes(Uint8List bytes) async {
var imageCodec = await ui.instantiateImageCodec(bytes);
var frame = await imageCodec.getNextFrame();
return frame.image;
}
Future<Uint8List> _getLocalCopyOrLoadFromUrl(String url) async {
final directory = await getApplicationDocumentsDirectory();
final file = File("${directory.path}/${_getSHA(url)}.png");
if (await file.exists()) {
return await file.readAsBytes();
} else {
Uint8List resourceBytes = await _loadFromUrl(url);
if (resourceBytes != null) {
await file.writeAsBytes(resourceBytes);
return resourceBytes;
} else {
return null;
}
}
}
Future<Uint8List> _loadFromUrl(String url) async {
final response = await http.get(url);
if (response.statusCode >= 200 && response.statusCode < 300) {
return response.bodyBytes;
} else {
return null;
}
}
String _getSHA(String sth) {
var bytes = utf8.encode(sth);
var digest = sha1.convert(bytes);
return digest.toString();
}
void dispose() {
_mapBackgroundImage.dispose();
}
}
And to supply the image to the ZoomableImage I created a custom ImageProvider:
class MapImageProvider extends ImageProvider<MapImageProvider> {
final String url;
final List<Sensor> sensors;
final MapRenderer mapRenderer = MapRenderer();
MapImageProvider(this.url, this.sensors);
#override
ImageStreamCompleter load(MapImageProvider key) {
return MultiFrameImageStreamCompleter(
codec: _loadAsync(key),
scale: 1.0,
informationCollector: (StringBuffer information) {
information.writeln('Image provider: $this');
information.write('Image key: $key');
});
}
Future<ui.Codec> _loadAsync(MapImageProvider key) async {
assert(key == this);
return await mapRenderer.renderMap(url, sensors);
}
#override
bool operator ==(Object other) =>
identical(this, other) ||
other is MapImageProvider &&
runtimeType == other.runtimeType &&
url == other.url;
#override
int get hashCode => url.hashCode;
#override
String toString() => '$runtimeType("$url")';
#override
Future<MapImageProvider> obtainKey(ImageConfiguration configuration) {
return SynchronousFuture<MapImageProvider>(this);
}
}
If anybody knows a better way to convert an Image to Codec or to even skip this step, please comment (MapRenderer.renderMap function).
In general to simply display an image from the internet you can use the Image.network constructor. If you want to further customize the interaction, for example showing rectangles based on its loading state, you can use the Image class and pass a NetworkImage to its constructor. The NetworkImage allows you to listen to loading and error events.
To draw above the Image I would simply suggest using the Stack Widget.
If you wanna add zooming functionality to the image, you should consider using the zoomable_image or photo_view package to replace the Image in the code below.
Also, if caching is necessary you can use the CachedNetworkImageProvider from the cached_network_image package.
The example below shows a yellow rectangle on a loading image, a green rectangle on a fully loaded image and a red rectangle if the loading crashed. It is a full application, you can copy & paste it in your IDE and try it out.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Network Image Download',
theme: ThemeData(),
home: MainPage(),
);
}
}
class MainPage extends StatefulWidget {
#override
State<StatefulWidget> createState() => MainPageState();
}
class MainPageState extends State<MainPage> {
ImageProvider provider;
bool loaded;
bool error;
#override
void initState() {
super.initState();
loaded = false;
error = false;
provider = NetworkImage('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png');
provider.resolve(ImageConfiguration()).addListener((_, __) {
setState(() {
loaded = true;
});
}, onError: (_, __) {
setState(() {
error = true;
});
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Image(image: provider),
Container(
width: 75.0,
height: 75.0,
color: colorByState(),
)
],
),
),
);
}
Color colorByState() {
if (error) {
return Colors.red;
} else if (loaded) {
return Colors.green;
} else {
return Colors.yellow;
}
}
}

Publish a pubsub message in flutter/dart

I'm trying to publish a pub/sub message in my flutter application like this:
import 'package:flutter/material.dart';
import 'package:googleapis/pubsub//v1.dart';
import 'package:googleapis_auth/auth_io.dart';
const _SCOPES = const [PubsubApi.PubsubScope];
class Activities extends StatefulWidget {
Activities();
#override
_Activities createState() => _Activities();
}
final _credentials = new ServiceAccountCredentials.fromJson(r'''
{
"type": "service_account",
...
}
''');
class _Activities extends State<Activities> with SingleTickerProviderStateMixin {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Center(
child: Container(
child: new MaterialButton(
onPressed: () {
debugPrint("trying to publish a message...");
clientViaServiceAccount(_credentials, _SCOPES)
.then((http_client) {
var pubSubClient = new PubsubApi(http_client);
Map<String, dynamic> message = new Map<String, dynamic>();
message["data"] = Map<String, dynamic>();
message["data"]["type"] = "foo";
message["data"]["senderId"] = "bar";
pubSubClient.projects.topics
.publish(new PublishRequest.fromJson(message), "projects/myProject/topics/events")
.then((publishResponse) {
debugPrint(publishResponse.toString());
}).catchError((e,m){
debugPrint(e.toString());
});
})
.catchError((e,m) {
debugPrint(e.toString());
});
},
child: new Text("Publish message"),
),
),
)
);
}
}
But in the logs I get the following error message:
I/flutter ( 5281): DetailedApiRequestError(status: 400, message: The value for 0 is too small. You passed message_count in the request, but the minimum value is 1.)
I googled this message but did not found anything. I think my message structure is maybe wrong, but maybe it's something else ? Don't wanna lose too much time on it...
Ok, for those who wonder, here is what I have come up with:
var messages = {
'messages': [
{
'data': base64Encode(utf8.encode('{"foo": "bar"}')),
},
]
};
pubSubClient.projects.topics
.publish(new PublishRequest.fromJson(messages), "your topic")
.then((publishResponse) {
debugPrint(publishResponse.toString());
}).catchError((e,m){
debugPrint(e.toString());
});
Maybe someone should write an article on it, this was not very clear and I had to try different things and also read the source from the pubsub client library...
Use gcloud: ^0.7.3 package.
Use the below code to establish a connection.
import 'package:gcloud/pubsub.dart';
import 'package:googleapis/pubsub/v1.dart';
import 'package:googleapis_auth/auth_io.dart';
// Read the service account credentials from the file.
var jsonCredentials = new File('my-project.json').readAsStringSync();
var credentials = new auth.ServiceAccountCredentials.fromJson(jsonCredentials);
var client = await auth.clientViaServiceAccount(credentials, scopes);
var pubsub = new PubSub(client, 'my-project');
For the Publish and Subscribe refer to this section of the readme.

Resources