Flutter调用Provider类void函数报错，如何实现Google Maps相机动画？

我是Flutter新手，正在学习Google Maps开发，想实现地图相机动画效果，所以把动画函数定义成void类型放在Provider类里。这个Provider类还提供返回Widget类型的GoogleMap组件，但在UI页面调用这个无返回值的void函数时报错（提示必须返回Widget）；另外，如果直接实例化Provider类调用该函数，UI页面不会出现动画效果。请问怎么正确调用Provider类中的void函数来实现地图相机动画？

相关代码 #

UI页面代码 #

import 'package:flutter/material.dart';
import 'package:mapsingoogle/providers/secondprovider/secondprovider.dart';
import 'package:mapsingoogle/widgets/appbar/myappbar.dart';
import 'package:mapsingoogle/widgets/mybutton.dart';
import 'package:provider/provider.dart';

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

  @override
  State<SecondProviderScreen> createState() => _SecondProviderScreenState();
}

class _SecondProviderScreenState extends State<SecondProviderScreen> {
  var prov = SecondProvider();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(title: 'Second Provider', actions: []),
      body: SafeArea(
        child: Column(
          children: [
            Container(
              width: 400,
              height: 600,
              color: Colors.orangeAccent,
              child: Consumer<SecondProvider>(
                builder: (context, value, child) => value.mymap(),
              ),
            ),
            MyButton(
                ontap: () {
                  Consumer<SecondProvider>(
                    builder: (context, value, child) {
                      value
                          .animate(); //此处报错：必须返回非空值
                    },
                  );
                },
                title: 'Ánimate')
          ],
        ),
      ),
    );
  }
}

Provider类代码 #

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:mapsingoogle/components/cameraposition/cameraposition.dart';
import 'package:mapsingoogle/components/completer/completer.dart';
import 'package:mapsingoogle/components/makers/markers.dart';

class SecondProvider with ChangeNotifier{

  CameraPosition cameraPosition=MyCamera.Position;//另一个类定义的位置
  CameraPosition newposition=MyCamera.australiaposition;//另一个类定义的位置
  Completer<GoogleMapController> completer=Completer();

  GoogleMap mymap(){
    return GoogleMap(initialCameraPosition: cameraPosition,
    markers: Set<Marker>.of(MyMarkers.funckantamarker()),
      onMapCreated: (controller) =>completer.complete(controller),
    );
  }//这个函数能正常工作

   void  animate()async{
    GoogleMapController controller=await completer.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(MyCamera.australiaposition));
    notifyListeners();
  }//如何在Consumer或浮动按钮中使用这个函数

}

解决方案 #

错误原因 #

1. 报错原因：Consumer的builder函数强制要求返回Widget，你在按钮点击事件里嵌套Consumer却没有返回Widget，因此触发错误。
2. 直接实例化无效原因：你手动创建的prov = SecondProvider()，和通过Provider框架注入到Widget树中的实例不是同一个，调用这个实例的方法不会影响UI绑定的Provider实例。

正确实现方式 #

方式1：使用Provider.of获取实例

在按钮点击事件中直接获取Provider实例，无需嵌套Consumer：

MyButton(
  ontap: () {
    // listen设为false，因为这里只需要调用方法，不需要监听状态变化
    Provider.of<SecondProvider>(context, listen: false).animate();
  },
  title: 'Ánimate'
)

方式2：使用context.read语法糖

这是Provider.of的简化写法，代码更简洁：

MyButton(
  ontap: () {
    context.read<SecondProvider>().animate();
  },
  title: 'Ánimate'
)

额外注意事项

• 必须确保SecondProvider已通过ChangeNotifierProvider注入到Widget树中（比如在当前页面的父级或MaterialApp层级），否则无法获取实例。示例：

// 在路由中注入Provider
MaterialApp(
  home: ChangeNotifierProvider(
    create: (context) => SecondProvider(),
    child: const SecondProviderScreen(),
  ),
);

• 删除State中定义的var prov = SecondProvider();，避免实例混淆。

修改后点击按钮即可正常触发地图相机动画。

内容的提问来源于stack exchange，提问作者Naveedfaruq