Flutter – Convert an Image into Base64 String
Base64 encoding is used to convert bytes that have binary or text data into ASCII characters. Encoding prevents the data from getting corrupted when it is transferred or processed through a text-only system. In this article, we will discuss how to convert an image into Base64 String. A sample video is given below to get an idea about what we are going to do in this article.
How to use it?
Dart
// path of image String _imagePath = "Image path her" ; // convert image into file object File _imageFile = File(_imagePath); // Read bytes from the file object Uint8List _bytes = await _imageFile.readAsBytes(); // base64 encode the bytes String _base64String = base64.encode(_bytes); |
Step By Step Implementation
Step 1: Create a New Project in Android Studio or in VS code
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the material package into the main file
Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.
import 'package:flutter/material.dart'; void main() { runApp(RunMyApp()); }
Step 3: Creating a Stateful Widget
Now we have to create a Stateful widget because our application does change its state and then returns the MaterialApp widget which allows us the set the title and theme and many more.
class RunMyApp extends StatefulWidget { const RunMyApp({super.key}); @override State<RunMyApp> createState() => _RunMyAppState(); } class _RunMyAppState extends State<RunMyApp> { @override Widget build(BuildContext context) { return MaterialApp(); } }
Step 4: Working with Scaffold
Scaffold enables us to set AppBar and body properties. of the AppBar. Further AppBar allows us to give the title of AppBar, color, leading, and trailing icon.
home: Scaffold( appBar: AppBar( title: Text('Image to base64 String'), ), body: ),
Step 5: Now in the body of the application we will show an asset image and create a button that calls the function that implements the Conversion of the image in the base64 string
Center( child: Column( children: [ Container( child: Image.asset('assets/gfglogo.png'), ), ElevatedButton( onPressed: () { ImagetoBase64(); }, child: Text('Convert'), ), Text( base64String, style: TextStyle(overflow: TextOverflow.ellipsis), ) ], ), ),
In the above code, we have three children of columns that are image, button, and text that will print base64 string in the body of the scaffold. We have done our user interface part.
On pressed property of the button, we call the method ImagetoBase64 that has not been created yet, let’s create it.
Step 6: ImagetoBase64 function
String base64String = ''; ImagetoBase64() async { // path of image String _imagePath = "assets/gfglogo.png"; File _imageFile = File(_imagePath); // Read bytes from the file object Uint8List _bytes = await _imageFile.readAsBytes(); // base64 encode the bytes String _base64String = base64.encode(_bytes); setState(() { base64String = _base64String; }); }
Final Code
Dart
import 'package:flutter/material.dart' ; import 'dart:io' ; import 'dart:convert' ; import 'dart:typed_data' ; void main() { runApp(RunMyApp()); } class RunMyApp extends StatefulWidget { const RunMyApp({super.key}); @override State<RunMyApp> createState() => _RunMyAppState(); } class _RunMyAppState extends State<RunMyApp> { String base64String = '' ; ImagetoBase64() async { // path of image String _imagePath = "assets/gfglogo.png" ; File _imageFile = File(_imagePath); // Read bytes from the file object Uint8List _bytes = await _imageFile.readAsBytes(); // base64 encode the bytes String _base64String = base64.encode(_bytes); setState(() { base64String = _base64String; }); } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false , theme: ThemeData(primarySwatch: Colors.green), home: Scaffold( appBar: AppBar( title: Text( 'Image to Base64 String' ), ), body: Center( child: Column( children: [ Container( child: Image.asset( 'assets/gfglogo.png' ), ), ElevatedButton( onPressed: () { ImagetoBase64(); }, child: Text( 'Convert' ), ), Text( base64String, style: TextStyle(overflow: TextOverflow.ellipsis), ) ], ), ), ), ); } } |
Output:
Note: Base64 String in the output is the ellipsis (three dots) because the base64 string is large and causes text overflow from the screen. That is why we use the ellipsis to prevent text overflow.