Flutter 拍照、录制视频、相册选择照片视频

ImagePicker

ImagePicker 拍照、录制视频、相册选择照片、相册选择视频、上传文件

pub 地址:https://pub.dev/packages/image_picker

安装

dependencies:
  image_picker: ^1.2.0

配置

android 无需配置开箱即用，ios 还需要配置 info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>应用需要访问相册读取文件</string>
<key>NSCameraUsageDescription</key>
<string>应用需要访问相机拍照</string>
<key>NSMicrophoneUsageDescription</key>
<string>应用需要访问麦克风录制视频</string>

注意：使用相机拍摄的图像和视频会保存到应用程序的本地缓存中，因此应该只是暂时存在。如果您需要永久存储您挑选的图像，您有责任将其移动到更永久的位置

相机拍照和相册选择

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

void main() => runApp(const MaterialApp(home: ImagePickerPage()));

class ImagePickerPage extends StatefulWidget {
  const ImagePickerPage({super.key});

  @override
  State<ImagePickerPage> createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  final ImagePicker picker = ImagePicker();
  XFile? _pickerFile;

  //选择照片
  _pickerGallery() async {
    XFile? pickerFile = await picker.pickImage(source: ImageSource.gallery);
    if (pickerFile != null) {
      print(pickerFile.path);
      setState(() {
        _pickerFile = pickerFile;
      });
    }
  }

  //拍照
  _pickerCamera() async {
    XFile? pickerFile = await picker.pickImage(source: ImageSource.camera);
    if (pickerFile != null) {
      print(pickerFile.path);
      setState(() {
        _pickerFile = pickerFile;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('选择照片拍照')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickerGallery,
              child: const Text('相册选择'),
            ),
            const SizedBox(height: 30),
            ElevatedButton(onPressed: _pickerCamera, child: const Text('拍照')),
            const SizedBox(height: 30),
            SizedBox(
              width: double.infinity,
              height: 200,
              child: Center(
                child: _pickerFile == null
                    ? Text('还没有选择照片...')
                    : Image.file(File(_pickerFile!.path)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

录制视频和上传视频和图片

安装 dio

dependencies:
  dio: ^5.9.0

使用

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';
import 'package:dio/dio.dart';

void main() => runApp(const MaterialApp(home: ImagePickerPage()));

class ImagePickerPage extends StatefulWidget {
  const ImagePickerPage({super.key});

  @override
  State<ImagePickerPage> createState() => _ImagePickerPageState();
}

class _ImagePickerPageState extends State<ImagePickerPage> {
  final ImagePicker picker = ImagePicker();
  XFile? _pickerFile;

  //选择照片
  _pickerGallery() async {
    XFile? pickerFile = await picker.pickImage(source: ImageSource.gallery);
    if (pickerFile != null) {
      print(pickerFile.path);
      _upload_file(pickerFile.path);
      setState(() {
        _pickerFile = pickerFile;
      });
    }
  }

  //拍照
  _pickerCamera() async {
    XFile? pickerFile = await picker.pickImage(source: ImageSource.camera);
    if (pickerFile != null) {
      print(pickerFile.path);
      _upload_file(pickerFile.path);
      setState(() {
        _pickerFile = pickerFile;
      });
    }
  }

  _upload_file(imageDir) async {
    final formData = FormData.fromMap({
      'username': 'rh',
      'age': '23',
      'date': DateTime.now().toIso8601String(),
      'file': await MultipartFile.fromFile(imageDir, filename: 'upload.png'),
    });
    var response = await Dio().post(
      'https://jd.ronhai.com/imgupload',
      data: formData,
    );
    print('response: $response');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('选择照片拍照')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _pickerGallery,
              child: const Text('相册选择'),
            ),
            const SizedBox(height: 30),
            ElevatedButton(onPressed: _pickerCamera, child: const Text('拍照')),
            const SizedBox(height: 30),
            SizedBox(
              width: double.infinity,
              height: 200,
              child: Center(
                child: _pickerFile == null
                    ? Text('还没有选择照片...')
                    : Image.file(File(_pickerFile!.path)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

toggle_switch

一个简单的切换开关小部件。它可以根据需要自定义图标、宽度、颜色、文本、角半径、动画等。它还可以保持选择状态。

pub 地址:https://pub.dev/packages?q=toggle_switch

安装

dependencies:
  toggle_switch: ^2.3.0

使用

import 'package:toggle_switch/toggle_switch.dart';

flutter_native_splash

在应用初始化时保留启动画面插件，支持 android 和 ios，

flutter_native_splash在您的 pubspec.yaml 文件中添加依赖项。

官方地址：https://pub.dev/packages/flutter_native_splash

dependencies:
	flutter_native_splash: ^2.4.5 #最新flutter  3.22.2是用的2.4.1

在根目录新建 assets/images/把 icon 图片放入进去，我放的是 load.png。背景色填写好，logo 会放在启动画面的上下左右居中

Android

新建flutter_native_splash.yaml,目录是测试的安卓设备

flutter_native_splash:
  color: "#E92215" # 背景颜色
  image: assets/images/load.png # 启动图
  android_12:
    image: assets/images/load.png
    icon_background_color: "#E92215"
  ios: false
  web: false

执行生成命令

dart run flutter_native_splash:create

成功生成画面

以上安卓就配置完成了，简单吧

Flutter拍照、录制视频、相册选择照片视频