- 添加依赖库
camera: ^0.9.4+5
image: ^2.1.19
path_provider: ^2.0.2
- 检查摄像头权限
添加以下代码到main 方法中：
WidgetsFlutterBinding.ensureInitialized();
await Permission.camera.request();
await Permission.storage.request();
- 创建相机页面
通过CameraController 和CameraPreview 组件创建相机页面。
class CameraPage extends StatefulWidget {
@override
_CameraPageState createState() => _CameraPageState();
}
class _CameraPageState extends State<CameraPage> {
late CameraController _controller;
late Future<void> _initializeControllerFuture;
@override
void initState() {
super.initState();
_controller = CameraController(
cameras[0],
ResolutionPreset.medium,
);
_initializeControllerFuture = _controller.initialize();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return CameraPreview(_controller);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
}
- 实时绘制边框
在CameraPreview 上添加CustomPaint 组件，并在CustomPainter 中绘制边框。
class CameraPage extends StatefulWidget {
@override
_CameraPageState createState() => _CameraPageState();
}
class _CameraPageState extends State<CameraPage> {
late CameraController _controller;
late Future<void> _initializeControllerFuture;
Rect? _objectRect;
@override
void initState() {
super.initState();
_controller = CameraController(
cameras[0],
ResolutionPreset.medium,
);
_initializeControllerFuture = _controller.initialize();
_controller.startImageStream((image) {
processImage(image);
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void processImage(CameraImage image) {
// TODO: 处理图像并更新 _objectRect
setState(() {});
}
@override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Stack(
children: [
CameraPreview(_controller),
CustomPaint(
painter: ObjectPainter(
objectRect: _objectRect,
),
),
],
);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
}
class ObjectPainter extends CustomPainter {
final Rect? objectRect;
ObjectPainter({required this.objectRect});
@override
void paint(Canvas canvas, Size size) {
if (objectRect != null) {
Paint paint = Paint()
..color = Colors.red
..strokeWidth = 4;
canvas.drawRect(objectRect!, paint);
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
- 拍照并裁剪
在页面上添加FloatingActionButton 组件，并在回调函数中拍照并将图像保存到本地，然后跳转到裁剪页面。
class CameraPage extends StatefulWidget {
@override
_CameraPageState createState() => _CameraPageState();
}
class _CameraPageState extends State<CameraPage> {
late CameraController _controller;
late Future<void> _initializeControllerFuture;
Rect? _objectRect;
@override
void initState() {
super.initState();
_controller = CameraController(
cameras[0],
ResolutionPreset.medium,
);
_initializeControllerFuture = _controller.initialize();
_controller.startImageStream((image) {
processImage(image);
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void processImage(CameraImage image) {
// TODO: 处理图像并更新 _objectRect
setState(() {});
}
Future<String?> takePicture() async {
if (!_controller.value.isInitialized) {
return null;
}
final Directory directory = await getApplicationDocumentsDirectory();
final String filePath = '${directory.path}/picture.jpg';
await _controller.takePicture(filePath);
return filePath;
}
void navigateToCrop(String filePath) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CropPage(filePath: filePath),
),
);
}
@override
Widget build(BuildContext context) {
return FutureBuilder<void>(
future: _initializeControllerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return Stack(
children: [
CameraPreview(_controller),
CustomPaint(
painter: ObjectPainter(
objectRect: _objectRect,
),
),
Positioned(
bottom: 16,
right: 16,
child: FloatingActionButton(
onPressed: () async {
String? filePath = await takePicture();
if (filePath != null) {
navigateToCrop(filePath);
}
},
child: Icon(Icons.camera),
),
),
],
);
} else {
return Center(child: CircularProgressIndicator());
}
},
);
}
}
- 裁剪图片
使用ImageCropper 组件进行图片裁剪。
class CropPage extends StatelessWidget {
final String filePath;
CropPage({required this.filePath});
Future<void> cropImage(BuildContext context) async {
File? croppedFile = await ImageCropper.cropImage(
cropStyle: CropStyle.rectangle,
sourcePath: filePath,
aspectRatioPresets: [CropAspectRatioPreset.square],
androidUiSettings: AndroidUiSettings(
toolbarTitle: '裁剪照片',
toolbarColor: Theme.of(context).primaryColor,
toolbarWidgetColor: Colors.white,
activeControlsWidgetColor: Theme.of(context).accentColor),
iosUiSettings: IOSUiSettings(
minimumAspectRatio: 1.0,
),
);
if (croppedFile != null) {
// TODO: 处理裁剪后的图片
}
Navigator.pop(context);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('裁剪照片'),
),
body: Center(
child: Image.file(File(filePath)),
),
floatingActionButton: FloatingActionButton(
onPressed: () => cropImage(context),
child: Icon(Icons.crop),
),
);
}
}
这样就完成了实时绘制边框、拍照及裁剪的功能。注意：上述代码中还需要添加一些流程的判断和错误处理。
