首页 > 解决方案 > 传单 FLUTTER 地图上的错误元素状态

问题描述

我已经制作了一张地图,但我的问题是在一开始。

这是我的完整代码:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:geocoder/geocoder.dart';
import 'package:latlong/latlong.dart';

class Maps extends StatefulWidget {
  @override
  _MapsState createState() => _MapsState();
}

class _MapsState extends State<Maps> {
  double long = 106.816666;
  double lat = -6.200000;
  double zoom = 15.0;
  double rotation = 0.0;
  LatLng point = LatLng(-6.200000, 106.816666);
  var location = [];
  MapController mapController;
  @override
  void initState()  {
    super.initState();
    mapController = MapController();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        floatingActionButton: ElevatedButton(
          onPressed: () async {
            print(point);
            // ParseGeoPoint pts = await ParseGeoPoint(latitude: lat,longitude: long);
            // ParseObject data = await ParseObject('OrderIndividu')..set('AlamatG', pts);
            await Navigator.pop(context);
          },
          child: Text('Save Alamat'),
        ),
        appBar: AppBar(
          title: Text('Map'),
          centerTitle: true,
        ),
        body: Stack(
          children: [
            FlutterMap(
              mapController: mapController,
              options: MapOptions(
                controller: mapController,
                onTap: (p) async {
                  location = await Geocoder.local.findAddressesFromCoordinates(
                      new Coordinates(p.latitude, p.longitude));
                  setState(() {
                    long = p.longitude;
                    lat = p.latitude;
                    point = p;
                    mapController.move(LatLng(p.latitude, p.longitude), zoom);
                  });

                  print(
                      "${location.first.countryName} - ${location.first.featureName}");
                },
                center: point,
                zoom: zoom,
              ),
              layers: [
                TileLayerOptions(
                    urlTemplate:
                    "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                    subdomains: ['a', 'b', 'c']),
                MarkerLayerOptions(
                  markers: [
                    Marker(
                      width: 100.0,
                      height: 100.0,
                      point: point,
                      builder: (ctx) => Container(
                        child: Icon(
                          Icons.location_on,
                          color: Colors.red,
                        ),
                      ),
                    )
                  ],
                ),
              ],
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 34.0),

              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Card(
                    child: TextField(
                      onSubmitted: (val) async{
                        final query = val;
                        var addresses = await Geocoder.local.findAddressesFromQuery(query);
                        var first = addresses.first;
                        setState(() {
                          long = first.coordinates.longitude;
                          lat = first.coordinates.latitude;
                          point = LatLng(first.coordinates.latitude, first.coordinates.longitude);
                          mapController.move(LatLng(first.coordinates.latitude, first.coordinates.longitude), zoom);
                        });
                        print("${first.featureName} : ${first.coordinates}");
                      },
                      decoration: InputDecoration(
                        contentPadding: EdgeInsets.all(16.0),
                        hintText: "Cari Alamat Anda",
                        prefixIcon: Icon(Icons.location_on_outlined),
                      ),
                    ),
                  ),
                  Center(
                    child: Card(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          children: [
                            Text("${location.first.featurename},${location.first.locality},${location.first.countryName}", style: TextStyle(fontSize: 16.0),),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

此代码可以在点击更改 latlang 地址时进行,也可以从已经成功的文本字段中搜索,但是由于这两件事,当我启动这个有状态小部件时,它会导致错误的元素状态

Text("${location.first.featurename},${location.first.locality},${location.first.countryName}", style: TextStyle(fontSize: 16.0),),

和声明的变量是 this

var location = [];

并且在开始时为空变量会导致错误的元素状态

有什么建议可以让坏元素状态消失吗?

标签: flutterdictionaryleafletstate

解决方案


推荐阅读