Flutter_Map с боковым меню ⇐ Android

[Anonymous]

Во -первых, извините, если этот вопрос настолько прост, но, как новичок, я только начал тестировать Flutter/flutter_map/vScode/Android Studio/и т. Д. Тем не менее, я получил хорошую карту с: < /p>
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

void main() {
runApp(
MaterialApp(
home: MapPage()
)
);
}

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

@override
State createState() => _MapPageState();
}

class _MapPageState extends State {
final MapController mapController = MapController();

@override
Widget build(BuildContext context) {
return FlutterMap(
mapController: mapController,
options: MapOptions(
initialCenter: const LatLng(30, -78.5),
initialZoom: 6.3,
),
children: [
TileLayer(
urlTemplate: 'http://{s}.google.com/vt/lyrs=r&hl=es&x={x}&y={y}&z={z}',
subdomains: const ['mt0', 'mt1', 'mt2', 'mt3'],
),
//const RichAttributionWidget(
//attributions: [
//TextSourceAttribution(
//'GM',
//onTap: () =>
//launchUrl(Uri.parse('https://openstreetmap.org/copyright')),
//),
//],
//),
],
);
}
}
< /code>
После Google About я нашел аккуратный пост в среде вокруг складного меню и пытался адаптировать его к своей предыдущей карте, как это: < /p>
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

void main() {
runApp(
MaterialApp(
home: MapPage()
)
);
}

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

@override
State createState() => _MapPageState();
}

class _MapPageState extends State {
final MapController mapController = MapController();

@override
Widget build(BuildContext context) {
return FlutterMap(
mapController: mapController,
options: MapOptions(
initialCenter: const LatLng(-10, -78.5),
initialZoom: 6.3,
),
children: [
TileLayer(
urlTemplate: 'http://{s}.google.com/vt/lyrs=r&hl=es&x={x}&y={y}&z={z}',
subdomains: const ['mt0', 'mt1', 'mt2', 'mt3'],
),
//const RichAttributionWidget(
//attributions: [
//TextSourceAttribution(
//'GM',
//onTap: () =>
//launchUrl(Uri.parse('https://openstreetmap.org/copyright')),
//),
//],
//),
],
);
}
}

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

@override
State createState() => _SidebarState();
}

class _SidebarState extends State {
var menuIsOpen = false;

@override
Widget build(BuildContext context) {
var width = MediaQuery.sizeOf(context).width;
var isMobile = width < 500;

return Scaffold(
body: SafeArea(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ColoredBox(
color: const Color.fromARGB(30, 0, 0, 0),
child: AnimatedSize(
curve: Curves.fastOutSlowIn,
duration: Durations.long4,
child: SizedBox(width: menuIsOpen ? isMobile ? 150 : 200 : 0),
),
),
Expanded(
child: ColoredBox(
color: const Color.fromARGB(136, 255, 255, 255),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
onPressed: () {
setState(() {
menuIsOpen = !menuIsOpen;
});
},
icon: Icon(Icons.menu, color: const Color.fromARGB(255, 0, 0, 0)),
),
],
),
),
),
],
),
),
);
}
}
< /code>
Насколько я понимаю, я должен создать элемент столбца с его детьми в теле (внутри Safearea ()), где я должен назвать карту, которую я только что создал, но после некоторых тестов, я думаю, это не работает так. Чтобы включить здесь код Flutter_Map, но он жалуется на этот дочерний элемент, и мне не ясно, что я делаю здесь не так: < /p>
...
return Scaffold(
// wrap with SafeArea to have a top and bottom padding for mobile
body: SafeArea(
child: FlutterMap(
mapController: mapController,
options: MapOptions(
initialCenter: const LatLng(-10, -78.5),
initialZoom: 6.3,
),
children: [
TileLayer(
urlTemplate: 'http://{s}.google.com/vt/lyrs=r&hl=es&x={x}&y={y}&z={z}',
subdomains: const ['mt0', 'mt1', 'mt2', 'mt3'],
),
],
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
ColoredBox(
color: const Color.fromARGB(30, 0, 0, 0),
child: AnimatedSize(
curve: Curves.fastOutSlowIn,
duration: Durations.long4,
// depend on menu
child: SizedBox(width: menuIsOpen ? isMobile ? 150 : 200 : 0),
),
),
Expanded(
child: ColoredBox(
...


Подробнее здесь: https://stackoverflow.com/questions/797 ... -side-menu