我一直在尝试使用谷歌MapAPI来制作一些个人项目,当我创建了一个基本的主页,显示Map快照和两个按钮时,它看起来像下面,我的按钮是直接位于Map下方的按钮,但下面类似的按钮没有编码,它们也不像按钮一样工作,就像屏幕烧伤,请参考下面的图像:
下面是代码:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() {
return _HomePageState();
}
}
class _HomePageState extends State<HomePage> {
final Completer<GoogleMapController> _controller = Completer();
static const LatLng curLoc = LatLng(9.970630, 76.425110);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarTextStyle: const TextStyle(color: Colors.white54),
title: const Center(
child: Text('Route Prediction'),
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
margin: const EdgeInsets.only(top: 10),
height: 300,
child: GoogleMap(
initialCameraPosition:
const CameraPosition(target: curLoc, zoom: 10),
markers: {
const Marker(markerId: MarkerId("You"), position: curLoc)
},
),
),
const SizedBox(
height: 30,
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {},
child: const Text('General User'),
),
const SizedBox(
width: 5,
),
ElevatedButton(
onPressed: () {},
child: const Text(
'Emergency Vehicle',
style: TextStyle(fontSize: 15),
),
),
],
),
],
),
);
}
}
1条答案
按热度按时间gblwokeq1#
用
MaterialApp
小部件 PackageScaffold
小部件在我的设备上运行你的代码并没有重现你在屏幕截图中显示的重复按钮问题,但我收到了一个
No Directionality error
:然后,我注意到您没有将
Scaffold
与MaterialApp
小部件 Package 在一起。请参见Flutter documentation所以我所做的就是用
MaterialApp
小部件 PackageScaffold
小部件,并更改将Scaffold
小部件插入home
的参数。所以你的整个
main.dart
代码应该看起来像这样:有了这个,你的应用程序应该很好:
我希望这对你有帮助!