Xây dựng bộ chọn hình ảnh trong Flutter

Trường hợp sử dụng phổ biến nhất cho bộ chọn hình ảnh trong ứng dụng dành cho thiết bị di động là đặt hình đại diện cho hồ sơ người dùng. Trong hướng dẫn này, gialaipc sẽ chỉ cho bạn cách tạo bộ chọn hình ảnh trong Flutter. Chúng tôi sẽ xây dựng một ứng dụng Flutter mẫu cho phép người dùng chọn ảnh từ thư viện hoặc chụp ảnh từ máy ảnh của thiết bị.

Đây là những gì chúng tôi sẽ đề cập đến:

Flutter là gì image_picker?

Mã hóa một tiện ích chọn hình ảnh trong Flutter từ đầu sẽ rất tẻ nhạt. Flutter đi kèm với một plugin chọn hình ảnh để chọn hình ảnh từ thư viện thiết bị hoặc chụp ảnh mới từ máy ảnh.

Các image_picker plugin cho thấy một số phương pháp hữu ích từ ImagePicker phân loại nó xuất khẩu:

import 'package deal:image_picker/image_picker.dart';

ImagePicker picker = ImagePicker();

Các picker occasion có các phương thức công khai mà chúng tôi sẽ gọi để mở hộp thoại lựa chọn hình ảnh. Hãy xem xét các phương pháp này.

pickImage

XFile? picture = await picker.pickImage(supply: ImageSource.gallery);

Các pickImage phương pháp mở hộp thoại chọn và hiển thị thư viện của điện thoại để chọn hình ảnh. Các supply arg nói rằng hình ảnh sẽ được chọn từ đâu.

Đây, supply được đặt thành ImageSource.gallery, vì vậy hình ảnh được chọn từ thư viện của người dùng.

XFile? picture = await picker.pickImage(supply: ImageSource.digicam);

Trong ví dụ trên, hình ảnh được lấy từ digicam của thiết bị. Phương pháp này mở máy ảnh và chọn ảnh do người dùng chụp. Các supply: ImageSource.digicam arg là những gì mở digicam của thiết bị.

pickVideo

XFile? picture = await picker.pickVideo(supply: ImageSource.gallery);

Phương pháp này mở hộp thoại chọn để chọn video từ thư viện của điện thoại. Bạn sẽ sử dụng pickVideo khi bạn muốn chọn video từ thư viện hoặc từ máy quay video của điện thoại. Tranh luận supply: ImageSource.gallery khiến video được chọn từ thư viện của điện thoại.

XFile? picture = await picker.pickVideo(supply: ImageSource.digicam);

Phương pháp này cho phép người dùng chọn video từ máy ảnh. Tranh luận supply: ImageSource.digicam mở máy quay video của điện thoại để người dùng có thể quay video. Video đã quay sau đó được sử dụng làm video đã chọn.

pickMultiImage

Checklist<XFile>? photos = await picker.pickMultiImage(supply: ImageSource.gallery);

pickMultiImage cho phép người dùng chọn nhiều hình ảnh. Tranh luận supply: ImageSource.gallery cho phép chúng tôi chọn hình ảnh từ thư viện của điện thoại.

Checklist<XFile>? photographs = await picker.pickMultiImage(supply: ImageSource.digicam);

Xây dựng ứng dụng bộ chọn hình ảnh Flutter

Bây giờ chúng tôi đã xem xét các phương pháp trong image_picker plugin, hãy xây dựng một ứng dụng chọn hình ảnh Flutter mẫu để xem chúng hoạt động như thế nào trong thực tế.

Trước khi chúng tôi bắt đầu, hãy đảm bảo rằng bạn đã cài đặt các công cụ và mã nhị phân sau trong máy của mình.

• Flutter SDK: Chúng tôi sẽ sử dụng cái này để biên dịch, tạo và chạy dự án Flutter của chúng tôi. Nó có một công cụ CLI, flutter, cho phép chúng tôi thực hiện những điều này từ thiết bị đầu cuối
• VS Code: Đây là tùy chọn nhưng tuyệt vời để mã hóa các dự án Flutter. VS Code có các plugin tuyệt vời để nâng cao trải nghiệm viết mã của bạn với Flutter
• Android Studio: Bản nhị phân này là một IDE để xây dựng và biên dịch các dự án Android gốc. Chúng tôi cũng có thể tạo, biên dịch và chạy các dự án Flutter bằng Android Studio. Nhưng chủ yếu chúng tôi cần Android Studio để chạy trình giả lập và biên dịch dự án Flutter của chúng tôi từ VS Code

Giàn giáo một dự án Flutter

Bây giờ chúng ta đã cài đặt xong các công cụ và mã nhị phân cần thiết, đã đến lúc xây dựng ứng dụng ví dụ về bộ chọn hình ảnh Flutter của chúng ta.

Đầu tiên, hãy xây dựng một dự án Flutter:

flutter create imagepickerprj

Điều này tạo ra một dự án Flutter trong một thư mục có tên imagepickerprj. Một loạt các lệnh sẽ chuyển xuống thiết bị đầu cuối của chúng ta. Ở cuối terminal, bạn sẽ thấy hướng dẫn để chạy dự án mới được tạo:

As a way to run your software, sort:

  $ cd imagepickerprj
  $ flutter run

To allow null security, sort:

  $ cd imagepickerprj
  $ dart migrate --apply-changes

Your software code is in imagepickerprj/lib/most important.dart.

Chúng tôi sẽ không chạy nó ngay bây giờ, nhưng hãy di chuyển nó vào bên trong thư mục:

cd imagepickerprj

Thêm image_picker cắm vào

Bước tiếp theo là thêm image_picker plugin cho dự án Flutter của chúng tôi.

Mở pubspec.yaml tập tin và thêm image_picker đến dependencies tiết diện:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^0.8.2

Nếu bạn đang sử dụng VS Code, nó sẽ tự động kéo image_picker một khi bạn lưu pubspec.yaml tài liệu. Nếu bạn không sử dụng VS Code, hãy chạy lệnh sau để lấy phần phụ thuộc được thêm mới nhất:

flutter pub get

Trong của chúng tôi imagepickerprj dự án, tệp chính của chúng tôi nằm trong lib/ thư mục. Đây là most important.dart tệp, là điểm đầu vào của bất kỳ dự án / ứng dụng Flutter nào. Vì vậy, đó là nơi chúng tôi sẽ bắt đầu thêm hầu hết mã của mình.

Flutter đã có một số mã được đặt cho chúng tôi, nhưng chúng tôi sẽ không cần nó ngoại trừ trong MyApp tiện ích con. Hãy bắt đầu từ đó:

void most important() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the basis of your software.
  @override
  Widget construct(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colours.blue,
      ),
      dwelling: HomePage(),
    );
  }
}

Ứng dụng bộ chọn hình ảnh Flutter của chúng tôi sẽ có hai màn hình:

• HomePage sẽ liệt kê hai nút: Decide Picture from Gallery, và Decide Picture from Digital camera. Các Decide Picture from Gallery sẽ mở một ImageFromGalleryEx màn hình nơi chúng tôi có thể chọn một hình ảnh từ thư viện của mình, trong khi Decide Picture from Digital camera sẽ mở một ImageFromGalleryEx màn hình nơi chúng tôi có thể chụp ảnh từ máy ảnh của mình và sử dụng hình ảnh đó làm hình ảnh đã chọn
• ImageFromGalleryEx sẽ xử lý việc chọn hình ảnh từ cả thư viện và máy ảnh. Nó sẽ biết những gì cần xử lý dựa trên loại nguồn được gửi đến nó. Nó cũng sẽ hiển thị hình ảnh đã chọn

Bây giờ chúng ta hãy mã hóa chúng.

HomePage

enum ImageSourceType { gallery, digicam }

class HomePage extends StatelessWidget {
  void _handleURLButtonPress(BuildContext context, var sort) {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => ImageFromGalleryEx(sort)));
  }

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Textual content("Picture Picker Instance"),
        ),
        physique: Middle(
          youngster: Column(
            youngsters: [
              MaterialButton(
                color: Colors.blue,
                child: Text(
                  "Pick Image from Gallery",
                  style: TextStyle(
                      color: Colors.white70, fontWeight: FontWeight.bold),
                ),
                onPressed: () {
                  _handleURLButtonPress(context, ImageSourceType.gallery);
                },
              ),
              MaterialButton(
                color: Colors.blue,
                child: Text(
                  "Pick Image from Camera",
                  style: TextStyle(
                      color: Colors.white70, fontWeight: FontWeight.bold),
                ),
                onPressed: () {
                  _handleURLButtonPress(context, ImageSourceType.camera);
                },
              ),
            ],
          ),
        ));
  }
}

Chúng tôi có một enum, ImageSourceType, chứa các loại nguồn hình ảnh, thư viện và máy ảnh.
bên trong HomePage widget, chúng tôi có một phương pháp, _handleURLButtonPress. Phương pháp này sử dụng arg sort, mang bất kỳ giá trị nào của ImageSourceType. Nó mở ra ImageFromGalleryEx widget, chuyển loại nguồn hình ảnh vào lớp widget.

bên trong construct , chúng tôi thấy rằng nó hiển thị hai nút, như chúng tôi đã nêu trước đó: Decide Picture from Gallery, và Decide Picture from Digital camera. Mỗi nút có một onPressed sự kiện đặt trên đó. Các sự kiện gọi _handleURLButtonPress khi các nút được nhấn.

Các Decide Picture from Gallery nút vượt qua ImageSourceType.gallery đến ImageFromGalleryEx widget, nói với nó rằng chúng tôi sẽ chọn một hình ảnh từ thư viện. Các Decide Picture from Digital camera nút vượt qua ImageSourceType.digicam đến ImageFromGalleryEx tiện ích con, yêu cầu nó mở digicam của điện thoại và chụp ảnh đã chụp làm ảnh đã chọn.

Bây giờ, hãy mã hóa ImageFromGalleryEx tiện ích con.

ImageFromGalleryEx

class ImageFromGalleryEx extends StatefulWidget {
  last sort;
  ImageFromGalleryEx(this.sort);

  @override
  ImageFromGalleryExState createState() => ImageFromGalleryExState(this.sort);
}

class ImageFromGalleryExState extends State<ImageFromGalleryEx> {
  var _image;
  var imagePicker;
  var sort;

  ImageFromGalleryExState(this.sort);

  @override
  void initState() {
    tremendous.initState();
    imagePicker = new ImagePicker();
  }

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Textual content(sort == ImageSourceType.digicam
              ? "Picture from Digital camera"
              : "Picture from Gallery")),
      physique: Column(
        youngsters: <Widget>[
          SizedBox(
            height: 52,
          ),
          Center(
            child: GestureDetector(
              onTap: () async {
                var source = type == ImageSourceType.camera
                    ? ImageSource.camera
                    : ImageSource.gallery;
                XFile image = await imagePicker.pickImage(
                    source: source, imageQuality: 50, preferredCameraDevice: CameraDevice.front);
                setState(() {
                  _image = File(image.path);
                });
              },
              child: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                    color: Colors.red[200]),
                youngster: _image != null
                    ? Picture.file(
                          _image,
                          width: 200.0,
                          peak: 200.0,
                          match: BoxFit.fitHeight,
                        )
                    : Container(
                        ornament: BoxDecoration(
                            colour: Colours.purple[200]),
                        width: 200,
                        peak: 200,
                        youngster: Icon(
                          Icons.camera_alt,
                          colour: Colours.gray[800],
                        ),
                      ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Ở đây chúng tôi có ImageFromGalleryEx, một widget trạng thái, và ImageFromGalleryExState, giữ trạng thái của ImageFromGalleryEx tiện ích con.

Bên trong ImageFromGalleryExState widget, chúng tôi có các biến sau:

• _image giữ hình ảnh đã chọn, cho dù từ thư viện hay từ máy ảnh
• imagePicker giữ ví dụ của ImagePicker lớp học
• sort giữ loại nguồn hình ảnh được tiện ích con sử dụng. Nó được chuyển đến tiện ích con từ HomePage phụ tùng

Chúng tôi cũng có một initState phương thức này được chèn vào cây tiện ích con trước. Chúng tôi sử dụng phương pháp này để khởi tạo và tạo phiên bản của ImagePicker lớp và sau đó gán nó cho imagePicker Biến đổi.

Bên trong construct phương pháp là Container widget, là con của Middle tiện ích con. Chúng tôi kết xuất Picture.file dựa trên điều kiện của _image Biến đổi. Nếu _image không null hoặc không xác định, sau đó chúng tôi biết nó có một hình ảnh sau đó chúng tôi kết xuất Picture.file tiện ích con bằng cách chuyển _image biến đối với nó.

Cái này Picture.file là một tiện ích được sử dụng để hiển thị hình ảnh từ bộ nhớ cục bộ của thiết bị.
Nếu không có gì trong _image biến, chúng tôi kết xuất Container tiện ích con. Cái này Container hiển thị biểu tượng máy ảnh.

Các GestureDetector là cha của tất cả các widget này. Nó có một onTap sự kiện đã đăng ký với nó. Sự kiện này được kích hoạt khi các tiện ích con bên trong GestureDetector được khai thác. Các onTap xử lý cuộc gọi pickImage phương pháp từ imagePicker ví dụ. Nó suy ra nguồn của hình ảnh từ sort biến và chuyển nó đến pickImage phương pháp. Sau đó, nó chuyển chất lượng của hình ảnh (imageQuality: 50) và cuối cùng, thiết bị máy ảnh ưa thích preferredCameraDevice: CameraDevice.entrance. Điều này khiến nó chọn digicam trước của điện thoại.

Hiện nay, pickImage trả lại một XFile ví dụ. Chúng tôi tham khảo picture.path từ XFile ví dụ picture trả lại và chuyển nó cho File để tạo ra một File ví dụ từ nó. Cái này XFile ví dụ là những gì chúng tôi đặt thành _image tránh xa:

setState(() {
    _image = File(picture.path);
});

Điều này sẽ gây ra ImageFromGalleryExState để kết xuất và Picture.file sẽ hiển thị hình ảnh trong _image Biến đổi.

Bây giờ chúng ta đã hoàn thành mã, hãy chạy thử ứng dụng của chúng ta.

Thử nghiệm ứng dụng bộ chọn hình ảnh Flutter của chúng tôi

Mở Trình giả lập Android của bạn và từ thiết bị đầu cuối của bạn, chạy lệnh sau:

flutter run

Thao tác này sẽ biên dịch và xây dựng dự án, sau đó chạy ứng dụng bên trong Trình giả lập Android của bạn.

Nếu bạn đang sử dụng VS Code, bạn có thể chạy lệnh trên hoặc chỉ cần nhấp chuột phải vào lib/most important.dart trong trình chỉnh sửa của bạn và sau đó nhấp vào run With out Debugging hoặc Begin Debugging.

Ứng dụng sẽ mở ra trong Trình giả lập Android của bạn.

HomePage:

Chọn hình ảnh từ thư viện:

Chọn hình ảnh từ máy ảnh:

Sự kết luận

Chúng tôi đã học được rất nhiều điều trong hướng dẫn này. Chúng tôi bắt đầu bằng cách giới thiệu các trường hợp sử dụng phổ biến cho thành phần bộ chọn hình ảnh Flutter. Sau đó, chúng tôi giới thiệu image_picker plugin cho Flutter. Chúng tôi đã hướng dẫn cách khởi chạy ImagePicker lớp của image_picker plugin và xem xét các phương pháp trong ImagePicker lớp học.

Cuối cùng, chúng tôi đã xây dựng một dự án Flutter để chứng minh cách sử dụng image_picker plugin trong một kịch bản thế giới thực.

Tìm mã nguồn cho dự án này trên GitHub.