Flutter应用程序上的额外按钮覆盖,类似于屏幕烧伤

krcsximq  于 2023-06-07  发布在  Flutter
关注(0)|答案(1)|浏览(181)

我一直在尝试使用谷歌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),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}
gblwokeq

gblwokeq1#

MaterialApp小部件 Package Scaffold小部件

在我的设备上运行你的代码并没有重现你在屏幕截图中显示的重复按钮问题,但我收到了一个No Directionality error

然后,我注意到您没有将ScaffoldMaterialApp小部件 Package 在一起。请参见Flutter documentation
所以我所做的就是用MaterialApp小部件 Package Scaffold小部件,并更改将Scaffold小部件插入home的参数。

return MaterialApp(
  home: Scaffold(
//...The rest of the code

所以你的整个main.dart代码应该看起来像这样:

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 MaterialApp(
      home: 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),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

有了这个,你的应用程序应该很好:

我希望这对你有帮助!

相关问题