[Flutter] Image.memory 画像のバイトデータを表示する

Image.memory は画像のバイトデータを変換して表示することができます

Image.memory

Image.memory を使って画像を表示させる手順として

ネット上、assetsあるいは何らかの画像データを

Unit8Listに変換

Image.memory でUnit8Listから画像を作成

縦横サイズをきめ、BoxFit.cover でアスペクト比を保持してWidget一杯に展開して表示させます

この例ではBase64のデータから画像表示させます

// Base64エンコードされた画像データ
String base64data = 
    '''/9j/4AAQSkZJRgABAQEBkAGQAAD/
    ...
    AAXDDnJD9O87yfo/oGTJgV/R/QNZJMP8/wD/2Q==''';

// base64Decode: Base64からUint8Listに変換
Uint8List bytes = base64Decode(base64data);

Image.memory(
  bytes,
  width: 439,
  height: 660,
  fit: BoxFit.cover,// アスペクト比を変えずにWidget内にいっぱいに展開
);

// Base64エンコードされた画像データ

String base64data =

'''/9j/4AAQSkZJRgABAQEBkAGQAAD/

...

AAXDDnJD9O87yfo/oGTJgV/R/QNZJMP8/wD/2Q==''';

// base64Decode: Base64からUint8Listに変換

Uint8List bytes = base64Decode(base64data);

Image.memory(

bytes,

width: 439,

height: 660,

fit: BoxFit.cover,// アスペクト比を変えずにWidget内にいっぱいに展開

);

Flutterでの画像表示方法はいくつかあります

Image.asset
- アプリ内のassetsに画像を置きそこから読み出して表示
Image.network
- Net上のURLから取得して表示
Image.file
- デバイス内の写真や画像ファイルを表示
Image.memory
- バイトストリーム、例えばBase64でエンコードされた画像を表示する

また、Imageクラスには特定の目的がないデフォルトのコンストラクタとしてImage.newがあります
これは明示的にコンストラクタを呼び出したい場合でほとんどのケースでは直接使われることはないようです

Image.new
- Image.newはImageクラスのデフォルトコンストラクタ
- ImageProvider
  - 異なるソースからの画像を取得するための統一されたインターフェースの役割

目次
1. Base64エンコードデータ
2. サンプルコード
3. 実行結果

Base64エンコードデータ

例えばサイズが 439×660 の画像 img_2.jpg で試してみましょう

これをネットにあるツールなどでBase64に変換します

ダウンロード：img_2_base64

サンプルコード

Base64のデータは膨大なので省略しています

main.dart

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'dart:convert';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Image.memory'),
        ),
        body: const Center(
          child: Base64decode(),
        ),
      ),
    );
  }
}

class Base64decode extends StatelessWidget {
    const Base64decode({super.key});

  @override
  Widget build(BuildContext context) {
    // Base64エンコードされた画像データ
    String base64data = 
    '''/9j/4AAQSkZJRgABAQEBkAGQAAD/
    ...
    AAXDDnJD9O87yfo/oGTJgV/R/QNZJMP8/wD/2Q==''';

    // Base64からUint8Listに変換
    Uint8List bytes = base64Decode(base64data);

    return Image.memory(
      bytes,
      width: 439,
      height: 660,
      fit: BoxFit.cover,// アスペクト比を変えずにWidget内にいっぱいに展開
    );
  }
}

import 'dart:typed_data';

import 'package:flutter/material.dart';

import 'dart:convert';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: const Text('Image.memory'),

body: const Center(

child: Base64decode(),

);

}

class Base64decode extends StatelessWidget {

const Base64decode({super.key});

@override

Widget build(BuildContext context) {

// Base64エンコードされた画像データ

String base64data =

'''/9j/4AAQSkZJRgABAQEBkAGQAAD/

...

AAXDDnJD9O87yfo/oGTJgV/R/QNZJMP8/wD/2Q==''';

// Base64からUint8Listに変換

Uint8List bytes = base64Decode(base64data);

return Image.memory(

bytes,

width: 439,

height: 660,

fit: BoxFit.cover,// アスペクト比を変えずにWidget内にいっぱいに展開

);

}

実行結果

Androidエミュレータで実行

References：
Image.memory
image class