Flutter Screenshot Google Street View

重要提示

为了准确测试和验证功能，必须在物理设备而不是模拟器上测试此插件。

此插件允许在Flutter应用程序中捕获和显示谷歌街景图像。

功能

• 街景图像捕获
• 显示捕获的图像
• 可自定义的捕获设置

开始使用

要开始使用此插件，请确保您已启用用于街景服务的Google Maps API密钥。

要求

Android

• 最低SDK版本：20
• 在AndroidManifest.xml中需要的权限：

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>

• 在AndroidManifest.xml中的API密钥：

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="API_KEY"/>

iOS

• 最低版本：14.0
• 在AppDelegate.swift中配置API密钥：

GMSServices.provideAPIKey("API_KEY")

API配置

1. 在此处获取API密钥
2. 启用Google Maps SDK：
   • Android地图SDK
   • iOS地图SDK
   • 静态街景API

使用方法

以下是使用StreetViewCapture和StreetViewPreview小部件的示例：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:flutter_screenshot_google_street_view/flutter_screenshot_google_street_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('街景示例')),
        body: StreetViewExample(),
      ),
    );
  }
}

class StreetViewExample extends StatefulWidget {
  @override
  _StreetViewExampleState createState() => _StreetViewExampleState();
}

class _StreetViewExampleState extends State<StreetViewExample> {
  String? _imageUrl;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        StreetViewCapture(
          initialPosition: LatLng(37.7749, -122.4194), // 旧金山
          config: StreetViewConfig(apiKey: 'API_KEY'),
          onImageCaptured: (imageUrl, position) {
            setState(() {
              _imageUrl = imageUrl;
            });
          },
        ),
        if (_imageUrl != null)
          StreetViewPreview(
            imageUrl: _imageUrl!,
            fit: BoxFit.cover,
          ),
      ],
    );
  }
}

其他信息

有关为包贡献或报告问题的更多信息，请访问项目仓库。

完整示例Demo

以下是一个完整的示例，包含导航到街景屏幕的功能：

import 'package:flutter/material.dart';
import 'package:flutter_google_street_view/flutter_google_street_view.dart';
import 'package:flutter_screenshot_google_street_view/flutter_screenshot_google_street_view.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('欢迎'),
      ),
      body: Center(
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            padding: EdgeInsets.symmetric(horizontal: 40, vertical: 20),
          ),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => StreetViewScreen()),
            );
          },
          child: Text(
            '查看街景',
            style: TextStyle(fontSize: 18),
          ),
        ),
      ),
    );
  }
}

class StreetViewScreen extends StatefulWidget {
  @override
  _StreetViewScreenState createState() => _StreetViewScreenState();
}

class _StreetViewScreenState extends State<StreetViewScreen> {
  String? _imageUrl;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('街景示例'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            flex: 2,
            child: StreetViewCapture(
              initialPosition: LatLng(37.7749, -122.4194), // 旧金山
              config: StreetViewConfig(apiKey: 'API_KEY'),
              onImageCaptured: (imageUrl, position) {
                setState(() {
                  _imageUrl = imageUrl;
                });
              },
            ),
          ),
          if (_imageUrl != null)
            Expanded(
              child: StreetViewPreview(
                imageUrl: _imageUrl!,
                fit: BoxFit.cover,
              ),
            ),
        ],
      ),
    );
  }
}