Cách thay đổi kích thước kích thước hình ảnh trong Flutter

Trong hướng dẫn này, chúng ta tìm hiểu cách thay đổi kích thước kích thước thực tế của Image Unit8list trong Flutter. Để thay đổi kích thước hình ảnh, bạn có thể cần tải hình ảnh từ nội dung hoặc bộ lưu trữ tệp hoặc URL mạng sang byte Unit8list và sau đó thay đổi kích thước hình ảnh đó. Xem ví dụ dưới đây:

Đầu tiên, thêm gói Flutter hình ảnh vào dự án của bạn bằng cách thêm các dòng sau vào tệp pubspec.yaml.

dependencies:
  flutter:
    sdk: flutter
  image: ^3.2.2

Bây giờ, Tải hình ảnh của bạn từ Nội dung hoặc Lưu trữ tệp hoặc URL mạng, ở đây chúng tôi đang mất 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();

Bây giờ, hãy thay đổi kích thước Hình ảnh.

Cách thay đổi kích thước hình ảnh trong 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));

Ở đây, sizeImg là hình ảnh đã được thay đổi kích thước với chiều rộng và chiều cao là 200px. Hãy nhớ rằng, điều này sẽ thay đổi kích thước chiều cao và tiện ích hình ảnh thực tế.

HOẶC, bạn có thể sử dụng trực tiếp ResizeImage()tại Nhà cung cấp hình ảnh trong Widget nếu bạn đang hiển thị nó trên ứng dụng.

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

Ví dụ ứng dụng đầy đủ:

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(),
                
              ]
            )
          ),
           
       );
  }
}

Bằng cách này, bạn có thể thay đổi kích thước kích thước Hình ảnh thực tế trong Flutter.