Flutter相机功能插件camera_camera_2的使用
Flutter相机功能插件camera_camera_2的使用
重要信息
这是camera_camera包的一个新版本。在这个版本中,我修复了大部分相机错误,例如在设备方向改变后相机崩溃以及在截图时出现的崩溃问题。我还重构了代码使其更加清晰易编辑。如果你发现任何错误,请在git仓库中提交一个issue。
新功能
- 添加了变焦功能!
- 添加了闪光模式功能。
- 可以选择相机侧(前置或后置)。
- 返回照片文件的回调函数
onFile(File yourFile)
。 - 移除了使用
Navigator.pop(context, file)
返回文件的方式。 - 对内部结构进行了重构。
安装指南
Android
你需要在app/build.gradle
中添加以下内容:
minSdkVersion 21
iOS
你需要在info.plist
中添加以下内容:
<key>NSCameraUsageDescription</key>
<string>Can I use the camera please?</string>
<key>NSMicrophoneUsageDescription</key>
<string>Can I use the mic please?</string>
Flutter
在pubspec.yaml
中添加包依赖:
camera_camera: current_version
如何使用
Camera_Camera
是一个小部件,你可以在任何地方使用它。
示例 01
return Scaffold(
body: CameraCamera(
onFile: (file) => print(file); // 打印拍摄的照片文件路径
)
);
示例 02
return Scaffold(
body: CameraCamera(
onFile: (file) => print(file); // 打印拍摄的照片文件路径
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => CameraCamera(
onFile: (file) {
photos.add(file);
// 当拍照后应该关闭相机
Navigator.pop(context);
setState(() {});
},
)))
},
child: Icon(Icons.camera_alt), // 相机图标
),
);
路线图 2.0
功能 | 进度 |
---|---|
变焦 | ✅ |
闪光 | ✅ |
选择相机侧 | ✅ |
null安全支持 | ✅ |
添加曝光控制 | |
添加简易视频模式 | |
添加相册 |
贡献
欢迎提交拉取请求。对于重大更改,请先打开一个问题讨论你想要进行的更改。
请确保更新相应的测试用例。
许可证
示例代码
import 'dart:io';
import 'package:camera_camera_2/camera_camera_2.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Camera Camera 2.0',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Camera Camera 2.0'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final photos = <File>[];
void openCamera() {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => CameraCamera(
onFile: (file) {
photos.add(file);
Navigator.pop(context);
setState(() {});
},
)));
}
[@override](/user/override)
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text(widget.title),
),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: photos.length,
itemBuilder: (_, index) => Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: size.width,
child: Image.file(
photos[index],
fit: BoxFit.cover,
),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: openCamera,
child: Icon(Icons.camera_alt),
),
);
}
}
更多关于Flutter相机功能插件camera_camera_2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter相机功能插件camera_camera_2的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用camera
插件(注意,您提到的camera_camera_2
可能是一个误写,Flutter社区中广泛使用的相机插件是camera
)来实现相机功能的示例代码。
首先,确保在您的pubspec.yaml
文件中添加了camera
插件的依赖:
dependencies:
flutter:
sdk: flutter
camera: ^0.14.5+3 # 请检查最新版本号并更新
然后,运行flutter pub get
来安装依赖。
接下来,您需要在AndroidManifest.xml
和Info.plist
中添加必要的权限配置。
对于Android(在android/app/src/main/AndroidManifest.xml
中添加):
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.yourapp">
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" />
<application
...>
<activity ...>
...
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme" />
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
对于iOS(在ios/Runner/Info.plist
中添加):
<key>NSCameraUsageDescription</key>
<string>Need camera access</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Need photo library access</string>
<key>NSMicrophoneUsageDescription</key>
<string>Need microphone access</string>
接下来是Flutter代码部分,创建一个简单的相机应用:
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
List<CameraDescription> cameras;
CameraController? controller;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Camera App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
void initState() {
super.initState();
availableCameras().then((availableCameras) {
cameras = availableCameras;
if (cameras.isEmpty) {
print('No cameras found');
return;
}
// Use the first camera on the device.
controller = CameraController(
cameras[0],
ResolutionPreset.medium,
);
controller!.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
}).catchError((err) {
print('Error: $err.code\n${err.message}');
});
}
@override
void dispose() {
controller?.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
if (!controller!.value.isInitialized) {
return Container();
}
return Scaffold(
appBar: AppBar(
title: Text('Camera'),
),
body: Center(
child: CameraPreview(controller!),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.camera_alt),
onPressed: () async {
try {
final XFile? picture = await controller!.takePicture();
if (mounted) {
setState(() {});
}
if (picture != null) {
// Display the captured image
showDialog(
context: context,
builder: (context) => AlertDialog(
content: Image.file(File(picture.path)),
),
);
}
} catch (e) {
print(e);
}
},
),
);
}
}
这个示例代码展示了如何使用camera
插件来初始化相机、显示相机预览以及拍摄照片。注意,您需要在运行应用之前确保设备上有可用的相机,并且已经授予了必要的权限。