Flutter BASE64 Encode/Decode - How to convert Base64 string to Image
Last updated Jul 03, 2021In flutter few scenarios we need to convert Base64 String to Image. How we can convert BASE64 string into Image with Flutter? We can convert a Uint8List to a Flutter Image widget using the Image.memory constructor. With Base64Encoder(), Base64Codec() we can convert it to Image. Updated code to support nullsafety variables. Define variables with late modifier if intialization later
Before going to see the example let see how to convert image to Base64 String and String to Image.
Encode Image to Base64 from Online URL
There are two steps
Step 1: Convert Image to bytes
Convert Image to Byte from Online URL by using the http package
(() async {
http.Response response = await http.get(Uri.parse("https://wallpaper-house.com/data/out/9/wallpaper2you_366962.jpg"),
);
|
Now from http response we will get bytes by reponse.bodyBytes property.
Step 2:
Now its convert bytes to base64 string by using the Base64Encoder() class contains convert() method
_base64 = Base64Encoder().convert(response.bodyBytes);
|
This string contains the image in Base64 format
Convert Local Image file to Base64
Step 1: Convert Local Image to bytes
|
Step 2: Convert bytes to String
to convert bytes to string by using dart:convert library base64Encode() function to encode bytes
to Base64 this class contains method base64.encode()
.
|
Below Example will show you how to convert Base64 String to Image in flutter and show on Image widget
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:typed_data';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Base64 String',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
State createState() => new MyHomePageState();
}
class MyHomePageState extends State {
late String _base64="";
@override
void initState() {
super.initState();
(() async {
http.Response response = await http.get(Uri.parse("https://wallpaper-house.com/data/out/9/wallpaper2you_366962.jpg"),
);
if (mounted) {
setState(() {
_base64 = Base64Encoder().convert(response.bodyBytes);
});
}
})();
}
@override
Widget build(BuildContext context) {
if (_base64 == null||_base64.isEmpty)
return new Container();
Uint8List bytes = Base64Codec().decode(_base64);
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Base64 String'),
backgroundColor: Colors.orange,),
body: Container(
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
child: Image.memory(bytes,fit: BoxFit.cover,)),
))),
);
}
}
|
Conclusion: In this article we covered Flutter Base64 encode/decode and convert base64 string to image
Article Contributed By :
|
|
|
|
21389 Views |