Flutter convert image to base64 string / base64 to image

Hi Guy’s Welcome to Proto Coders Point. In this flutter article let’s learn how to convert image to base64 string or viceversa i.e converting base64 to image.

In flutter to encode Image into base64 string will make use of base64Encode & to decode base64 into image will use base64Decode method from dart:convert package, so import it.

import 'dart:convert'; 

Example 1 – Convert URL image into base64 in flutter

In below example, We have made use of http package to make internet call and get image from the image url & then encode it into base64.

Code:

void _getImageBase64() async{

     http.Response response = await http.get(Uri.parse('https://protocoderspoint.com/wp-content/uploads/2022/09/Whats-New-in-Flutter-3.3-696x392.jpg'));
     
     var _base64 = base64Encode(response.bodyBytes);

     print(_base64);
     
  }

Example 2 – Convert base64 string in image & show in Image Widget

To convert base64 to image, we make use of base64Decode method from dart:convert package.

As you seen in Example 1, We have Encoded image to base64 & stored the base64 string into a variable. Now let’s use the same base 64 string & convert/decode it back to image & display it in Image widget.

var _decodedImage = base64Decode(_base64);

// Now in Image.memory( ) Widget pass it.

Image.memory(_decodedImage);

Example 3: Pick Image for gallery & convert it to base64 string

In flutter app to pick image from gallery will make use of image_picker package, that helps use in picking images from gallery or capture image for camera.

I have wrote a complete article on image picker in flutter with example to learn more check it now.

Below source code in an example on How to pick image from gallery & convert the picked image file into base64 string.

read the comment in source code for understanding.

class _MyHomePageState extends State<MyHomePage> {

  File? _imageFile;  // picked image will be store here.
  final ImagePicker _picker = ImagePicker(); //instance of image_picker

   // a function to pick image and convert it into base64 string

  void _pickImageBase64() async{
    try {
       // pick image from gallery, change ImageSource.camera if you want to capture image from camera.
      final XFile? image = await _picker.pickImage(source: ImageSource.gallery);
      if (image == null) return;  
       // read picked image byte data.
      Uint8List imagebytes = await image!.readAsBytes();

      // using base64 encoder convert image into base64 string.
      String _base64String = base64.encode(imagebytes);

      print(_base64String);
      
      final imageTemp = File(image.path);
      setState(() {
        this._imageFile = imageTemp;   // setState to image the UI and show picked image on screen.
      });
    }on PlatformException catch (e){
      if (kDebugMode) {
        print('error');
      }
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
           children: [
             _imageFile == null ? Container() : Image.file(_imageFile!,width: 250,height: 500,),  // show picked image here
             ElevatedButton(onPressed: (){
                  _pickImageBase64();
             }, child: Text("Pick Image Convert to base64")),

           ],
        ),
      ),
    );
  }
}