Comment redimensionner la taille de l'image dans Flutter

Dans ce didacticiel, nous apprenons comment redimensionner la taille réelle de Image Unit8list dans Flutter. Pour redimensionner l'image, vous devrez peut-être charger l'image à partir d'actifs, de stockage de fichiers ou d'URL réseau dans les octets de Unit8list, puis la redimensionner ultérieurement. Voir l'exemple ci-dessous :

Tout d’abord, ajoutez le package image Flutter à votre projet en ajoutant les lignes suivantes dans le fichier pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  image: ^3.2.2

Maintenant, chargez votre image depuis les actifs ou le stockage de fichiers ou l'URL du réseau, ici nous perdons l'URL :

import 'dart:typed_data';
import 'package:flutter/services.dart';

String imgurl = "https://www.fluttercampus.com/img/banner.png";
Uint8List bytes = (await NetworkAssetBundle(Uri.parse(imgurl)).load(imgurl)).buffer.asUint8List();

Maintenant, redimensionnons l'image.

Comment redimensionner une image dans Flutter :

import 'package:image/image.dart' as IMG;

IMG.Image? img = IMG.decodeImage(bytes);
IMG.Image resized = IMG.copyResize(img!, width: 200, height: 200);
Uint8List resizedImg = Uint8List.fromList(IMG.encodePng(resized));

Ici, le resizeImg est l'image redimensionnée avec une largeur et une hauteur de 200px. N'oubliez pas que cela redimensionne la hauteur réelle de l'image et le widget.

OU, vous pouvez l'utiliser directement ResizeImage()auprès du fournisseur d'images dans le widget si vous l'affichez sur l'application.

Image(image: ResizeImage(AssetImage('assetpath.png'), width: 100, height: 150)),

Exemple d'application complète :

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as IMG;

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  Uint8List? resizedImg;
  Uint8List? bytes;
  
  @override
  void initState() {
    Future.delayed(Duration.zero, () async {
        String imgurl = "https://www.fluttercampus.com/img/banner.png";
        bytes = (await NetworkAssetBundle(Uri.parse(imgurl)).load(imgurl)).buffer.asUint8List();
        
        IMG.Image? img = IMG.decodeImage(bytes!);
        IMG.Image resized = IMG.copyResize(img!, width: 200, height: 200);
        resizedImg = Uint8List.fromList(IMG.encodePng(resized));

        setState(() {});
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar( 
              title: Text("Resize Image"),
              backgroundColor: Colors.redAccent,
          ),
          body: Container( 
            padding: EdgeInsets.all(30),
            child: Column(
              children:[
                Text("Original Size"),
                bytes != null?Image.memory(bytes!):Container(),

                Text("Resize Size"),
                resizedImg != null?Image.memory(resizedImg!):Container(),
                
              ]
            )
          ),
           
       );
  }
}

De cette façon, vous pouvez redimensionner la taille réelle de l'image dans Flutter.