时间戳

首页 > 解决方案 > 如何在 FLUTTER 中设置一个按钮以重定向到我的地图？

flutter - 如何在 FLUTTER 中设置一个按钮以重定向到我的地图？

问题描述

我仍然是 Flutter 的初学者，我正在开发一个应用程序，但我遇到了一个问题：

有我的 main.dart：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final geoService = GeolocatorService();
  @override
  Widget build(BuildContext context) {
    return FutureProvider(
      create: (context) => geoService.getCurrentPosition(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Metz Trip',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        home:
            Consumer<Position>(
          builder: (context, position, widget) {
            return (position != null)
                ? Map(position)
                : Center(child: CircularProgressIndicator());
          },
        ),
      ),
    );

如您所见，我的主页是地图，但问题是：如何设置按钮以重定向到此页面？

例如，如果我重定向到Map()我有这个错误：

The return type 'Map<dynamic, dynamic>' isn't a 'Widget', as required by the closure's context.

有我的地图页面：

class Map extends StatefulWidget {
  final Position initialPosition;

  Map(this.initialPosition);

  @override
  State<StatefulWidget> createState() => _MapState();
}

class _MapState extends State<Map> {
  final GeolocatorService geoService = GeolocatorService();
  Completer<GoogleMapController> _controller = Completer();

  @override
  void initState() {
    geoService.getPositionStream().listen((position) {
      centerScreen(position);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          GoogleMap(
              initialCameraPosition: CameraPosition(
                  target: LatLng(widget.initialPosition.longitude,
                      widget.initialPosition.latitude),
                  zoom: 13.0),
              mapType: MapType.normal,
              myLocationEnabled: true,
              onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              }),
          Positioned(
            top: 65.0,
            right: 15.0,
            left: 15.0,
            child: Container(
              height: 50.0,
              width: double.infinity,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30.0),
                  color: Colors.white),
              child: TextField(
                decoration: InputDecoration(
                    hintText: 'Votre recherche',
                    border: InputBorder.none,
                    contentPadding: EdgeInsets.only(left: 25.0, top: 15.0),
                    suffixIcon: IconButton(
                        icon: Icon(Icons.account_circle),
                        color: Colors.yellow[800],
                        onPressed: () {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (context) => Connexion()));
                          /*onPressed: () {
                          return FutureBuilder<User>(
                            future: FirebaseAuth.instance.currentUser,
                            builder: (context, snapshot) {
                              if (snapshot.hasData) {
                                User user = snapshot.data;
                                return ProfilePage(uid: user.uid);
                              } else {
                                return Connexion();
                              }
                            },
                          );*/
                        },
                        iconSize: 32.0),
                    prefixIcon: IconButton(
                        icon: Icon(Icons.location_on),
                        color: Colors.grey,
                        onPressed: () {},
                        iconSize: 32.0)),
              ),
            ),
          ),
          Positioned(
              right: 0.0,
              left: 0.0,
              bottom: -20.0,
              child: Container(
                height: 50.0,
                width: double.infinity,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(0.0),
                    color: Colors.grey[100].withOpacity(0.94)),
              )),
          Positioned(
            right: 15.0,
            left: 15.0,
            bottom: 20.0,
            child: Container(
              height: 50.0,
              width: double.infinity,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(7.0),
                  color: Colors.red[900].withOpacity(0.95)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(
                    icon: Icon(Icons.hotel),
                    color: Colors.white,
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.restaurant),
                    color: Colors.white,
                    onPressed: () {},
                  ),
                  SizedBox(
                    width: 40,
                  ),
                  IconButton(
                    icon: Icon(Icons.local_activity),
                    color: Colors.white,
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.museum),
                    color: Colors.white,
                    onPressed: () {},
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.yellow[800],
        onPressed: () {},
        elevation: 15.0,
        child: const Icon(
          Icons.home,
          color: Colors.white,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

    );
  }

  // ignore: missing_return
  Future<Void> centerScreen(Position position) async {
    final GoogleMapController controller = await _controller.future;
    controller.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(
        target: LatLng(position.latitude, position.longitude), zoom: 13.0)));
  }
}

和我的地理定位服务页面：

class GeolocatorService {
  Future<Position> getLastKnownPosition({
    bool forceAndroidLocationManager = false,
  }) =>
      Geolocator.getLastKnownPosition(
          forceAndroidLocationManager: forceAndroidLocationManager);

  Future<Position> getCurrentPosition({
    LocationAccuracy desiredAccuracy = LocationAccuracy.best,
    bool forceAndroidLocationManager = false,
    Duration timeLimit,
  }) =>
      Geolocator.getCurrentPosition(
        desiredAccuracy: desiredAccuracy,
        forceAndroidLocationManager: forceAndroidLocationManager,
        timeLimit: timeLimit,
      );

  Stream<Position> getPositionStream({
    LocationAccuracy desiredAccuracy = LocationAccuracy.best,
    int distanceFilter = 10,
    bool forceAndroidLocationManager = false,
    int timeInterval = 0,
    Duration timeLimit,
  }) =>
      Geolocator.getPositionStream(
        desiredAccuracy: desiredAccuracy,
        distanceFilter: distanceFilter,
        forceAndroidLocationManager: forceAndroidLocationManager,
        // ignore: deprecated_member_use
        timeInterval: timeInterval,
        timeLimit: timeLimit,
      );
}

我希望有人可以帮助我，谢谢你们。

标签： fluttergoogle-mapsdartmobile

解决方案

在这种情况下，您可以将页面名称称为“MapPage”会更好，但如果您坚持保留地图名称，您可以这样做：

import '../../models/map.dart' as MapPage;

然后你可以简单地这样调用：

return (position != null)
        ? MapPage.Map(position)
        : Center(child: CircularProgressIndicator());

我强烈建议更改名称，因为如果您与 Flutter 中的其他类名称相同，您将始终与 Flutter 发生冲突。

推荐阅读