FlutterFlow CustomWidgets
基本
code:dart
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
class NewCustomWidget extends StatefulWidget {
const NewCustomWidget({
super.key,
this.width,
this.height,
});
final double? width;
final double? height;
@override
State<NewCustomWidget> createState() => _NewCustomWidgetState();
}
class _NewCustomWidgetState extends State<NewCustomWidget> {
@override
Widget build(BuildContext context) {
return Container();
}
}
コールバック
Actionを渡せる
code:dart
DottedBorder(
color: Colors.black,
strokeWidth: 1,
child: FlutterLogo(size: 148),
)
code:dart
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
// Set your widget name, define your parameter, and then add the
// boilerplate code using the green button on the right!
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
class NewCustomWidget extends StatefulWidget {
const NewCustomWidget({
Key? key,
this.width,
this.height,
required this.accessToken,
}) : super(key: key);
final double? width;
final double? height;
final String accessToken;
@override
State<NewCustomWidget> createState() => _NewCustomWidgetState();
}
class _NewCustomWidgetState extends State<NewCustomWidget> {
MapboxMap? mapboxMap;
void initState() {
super.initState();
// ここでアクセストークンを設定
MapboxOptions.setAccessToken(widget.accessToken);
}
void _onMapCreated(MapboxMap mapboxMap) {
this.mapboxMap = mapboxMap;
}
@override
Widget build(BuildContext context) {
final width = widget.width ?? MediaQuery.of(context).size.width;
final height = widget.height ?? MediaQuery.of(context).size.height;
return Container(
width: width,
height: height,
child: MapWidget(
onMapCreated: _onMapCreated,
cameraOptions: CameraOptions(
center: Point(coordinates: Position(-80.1263, 25.7845)).toJson(),
zoom: 12.0),
),
);
}
}
mapbox_gl: ^0.16.0
code:dart
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
// Set your widget name, define your parameter, and then add the
// boilerplate code using the green button on the right!
import 'package:mapbox_gl/mapbox_gl.dart' as map;
class CustomStaticMap extends StatefulWidget {
const CustomStaticMap({
Key? key,
this.width,
this.height,
required this.style,
required this.accessToken, // アクセストークンをパラメータとして受け取る
}) : super(key: key);
final double? width;
final double? height;
final String accessToken;
final String style;
@override
State<CustomStaticMap> createState() => _CustomStaticMapState();
}
class _CustomStaticMapState extends State<CustomStaticMap> {
late map.MapboxMapController mapController;
void _onMapCreated(map.MapboxMapController controller) {
mapController = controller;
}
_onStyleLoadedCallback() {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("Style loaded :)"),
backgroundColor: Theme.of(context).primaryColor,
duration: Duration(seconds: 1),
));
}
@override
Widget build(BuildContext context) {
final width = widget.width ?? MediaQuery.of(context).size.width;
final height = widget.height ?? MediaQuery.of(context).size.height;
return SizedBox(
width: width,
height: height,
child: map.MapboxMap(
styleString: widget.style, // アクセストークンを設定
accessToken: widget.accessToken, // アクセストークンを設定
onMapCreated: _onMapCreated,
initialCameraPosition: map.CameraPosition(
target: map.LatLng(35.689487, 139.691706), // 初期位置を東京に設定(例)
zoom: 11.0,
),
onStyleLoadedCallback: _onStyleLoadedCallback,
),
);
}
}
styleが日本語対応できるものを使用できない
code:dart
Error: Failed running flutter pub get...
Because custom_widget depends on google_maps_flutter ^2.6.0 which depends on google_maps_flutter_web ^0.5.6, google_maps_flutter_web ^0.5.6 is required.
So, because custom_widget depends on google_maps_flutter_web 0.5.4+2, version solving failed.
You can try the following suggestion to make the pubspec resolve:
* Consider downgrading your constraint on google_maps_flutter: flutter pub add google_maps_flutter:^2.5.3
code:sh
Error: Failed running flutter pub get...
Error on line 63, column 3: Expected ':'.
╷
63 │ google_maps_flutter_platform_interface: 2.4.1
│ ^
╵
Please correct the pubspec.yaml file at /tmp/code_analysis/n902IaAvOq5XFZJFJKLx/custom_code_project/pubspec.yaml
code:dart
// Automatic FlutterFlow imports
import '/backend/backend.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
// Set your widget name, define your parameter, and then add the
// boilerplate code using the green button on the right!
import 'package:google_maps_flutter/google_maps_flutter.dart';
export 'dart:async' show Completer;
export 'package:google_maps_flutter/google_maps_flutter.dart' hide LatLng;
import '/flutter_flow/lat_lng.dart' as latlng;
import '/flutter_flow/lat_lng.dart' show LatLng;
enum GoogleMapStyle {
standard,
silver,
retro,
dark,
night,
aubergine,
}
enum GoogleMarkerColor {
red,
orange,
yellow,
green,
cyan,
azure,
blue,
violet,
magenta,
rose,
}
class FlutterFlowMarker {
const FlutterFlowMarker(this.markerId, this.location, this.onTap); final String markerId;
final latlng.LatLng location;
final Future Function()? onTap;
}
class CustomGoogleMap extends StatefulWidget {
const CustomGoogleMap({
this.onCameraIdle,
this.initialLocation,
this.markers = const [],
this.markerColor = GoogleMarkerColor.red,
this.mapType = MapType.normal,
this.style = GoogleMapStyle.standard,
this.initialZoom = 12,
this.allowInteraction = true,
this.allowZoom = true,
this.showZoomControls = true,
this.showLocation = true,
this.showCompass = false,
this.showMapToolbar = false,
this.showTraffic = false,
this.centerMapOnMarkerTap = false,
Key? key,
}) : super(key: key);
final Function(latlng.LatLng)? onCameraIdle;
final latlng.LatLng? initialLocation;
final Iterable<FlutterFlowMarker> markers;
final GoogleMarkerColor markerColor;
final MapType mapType;
final GoogleMapStyle style;
final double initialZoom;
final bool allowInteraction;
final bool allowZoom;
final bool showZoomControls;
final bool showLocation;
final bool showCompass;
final bool showMapToolbar;
final bool showTraffic;
final bool centerMapOnMarkerTap;
@override
State<StatefulWidget> createState() => _CustomGoogleMapState();
}
class _CustomGoogleMapState extends State<CustomGoogleMap> {
double get initialZoom => max(double.minPositive, widget.initialZoom);
LatLng get initialPosition =>
widget.initialLocation?.toGoogleMaps() ?? const LatLng(0.0, 0.0);
late Completer<GoogleMapController> _controller;
late LatLng currentMapCenter;
void onCameraIdle() => widget.onCameraIdle?.call(currentMapCenter.toLatLng());
@override
void initState() {
super.initState();
currentMapCenter = initialPosition;
_controller = Completer<GoogleMapController>();
}
@override
Widget build(BuildContext context) => AbsorbPointer(
absorbing: !widget.allowInteraction,
child: GoogleMap(
onMapCreated: (controller) async {
_controller.complete(controller);
await controller.setMapStyle(googleMapStyleStringswidget.style); },
onCameraIdle: onCameraIdle,
onCameraMove: (position) => currentMapCenter = position.target,
initialCameraPosition: CameraPosition(
target: initialPosition,
zoom: initialZoom,
),
mapType: widget.mapType,
zoomGesturesEnabled: widget.allowZoom,
zoomControlsEnabled: widget.showZoomControls,
myLocationEnabled: widget.showLocation,
compassEnabled: widget.showCompass,
mapToolbarEnabled: widget.showMapToolbar,
trafficEnabled: widget.showTraffic,
markers: widget.markers
.map(
(m) => Marker(
markerId: MarkerId(m.markerId),
position: m.location.toGoogleMaps(),
icon: BitmapDescriptor.defaultMarkerWithHue(
onTap: () async {
if (widget.centerMapOnMarkerTap) {
final controller = await _controller.future;
await controller.animateCamera(
CameraUpdate.newLatLng(m.location.toGoogleMaps()),
);
currentMapCenter = m.location.toGoogleMaps();
onCameraIdle();
}
await m.onTap?.call();
},
),
)
.toSet(),
),
);
}
extension ToGoogleMapsLatLng on latlng.LatLng {
LatLng toGoogleMaps() => LatLng(latitude, longitude);
}
extension GoogleMapsToLatLng on LatLng {
latlng.LatLng toLatLng() => latlng.LatLng(latitude, longitude);
}
Map<GoogleMapStyle, String> googleMapStyleStrings = {
GoogleMapStyle.standard: '[]',
GoogleMapStyle.silver:
r'[{"elementType":"geometry","stylers":{"color":"#f5f5f5"}},{"elementType":"labels.icon","stylers":{"visibility":"off"}},{"elementType":"labels.text.fill","stylers":{"color":"#616161"}},{"elementType":"labels.text.stroke","stylers":{"color":"#f5f5f5"}},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":{"color":"#bdbdbd"}},{"featureType":"poi","elementType":"geometry","stylers":{"color":"#eeeeee"}},{"featureType":"poi","elementType":"labels.text.fill","stylers":{"color":"#757575"}},{"featureType":"poi.park","elementType":"geometry","stylers":{"color":"#e5e5e5"}},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":{"color":"#9e9e9e"}},{"featureType":"road","elementType":"geometry","stylers":{"color":"#ffffff"}},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":{"color":"#757575"}},{"featureType":"road.highway","elementType":"geometry","stylers":{"color":"#dadada"}},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":{"color":"#616161"}},{"featureType":"road.local","elementType":"labels.text.fill","stylers":{"color":"#9e9e9e"}},{"featureType":"transit.line","elementType":"geometry","stylers":{"color":"#e5e5e5"}},{"featureType":"transit.station","elementType":"geometry","stylers":{"color":"#eeeeee"}},{"featureType":"water","elementType":"geometry","stylers":{"color":"#c9c9c9"}},{"featureType":"water","elementType":"labels.text.fill","stylers":{"color":"#9e9e9e"}}]', GoogleMapStyle.retro:
r'[{"elementType":"geometry","stylers":{"color":"#ebe3cd"}},{"elementType":"labels.text.fill","stylers":{"color":"#523735"}},{"elementType":"labels.text.stroke","stylers":{"color":"#f5f1e6"}},{"featureType":"administrative","elementType":"geometry.stroke","stylers":{"color":"#c9b2a6"}},{"featureType":"administrative.land_parcel","elementType":"geometry.stroke","stylers":{"color":"#dcd2be"}},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":{"color":"#ae9e90"}},{"featureType":"landscape.natural","elementType":"geometry","stylers":{"color":"#dfd2ae"}},{"featureType":"poi","elementType":"geometry","stylers":{"color":"#dfd2ae"}},{"featureType":"poi","elementType":"labels.text.fill","stylers":{"color":"#93817c"}},{"featureType":"poi.park","elementType":"geometry.fill","stylers":{"color":"#a5b076"}},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":{"color":"#447530"}},{"featureType":"road","elementType":"geometry","stylers":{"color":"#f5f1e6"}},{"featureType":"road.arterial","elementType":"geometry","stylers":{"color":"#fdfcf8"}},{"featureType":"road.highway","elementType":"geometry","stylers":{"color":"#f8c967"}},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":{"color":"#e9bc62"}},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":{"color":"#e98d58"}},{"featureType":"road.highway.controlled_access","elementType":"geometry.stroke","stylers":{"color":"#db8555"}},{"featureType":"road.local","elementType":"labels.text.fill","stylers":{"color":"#806b63"}},{"featureType":"transit.line","elementType":"geometry","stylers":{"color":"#dfd2ae"}},{"featureType":"transit.line","elementType":"labels.text.fill","stylers":{"color":"#8f7d77"}},{"featureType":"transit.line","elementType":"labels.text.stroke","stylers":{"color":"#ebe3cd"}},{"featureType":"transit.station","elementType":"geometry","stylers":{"color":"#dfd2ae"}},{"featureType":"water","elementType":"geometry.fill","stylers":{"color":"#b9d3c2"}},{"featureType":"water","elementType":"labels.text.fill","stylers":{"color":"#92998d"}}]', GoogleMapStyle.dark:
r'[{"elementType":"geometry","stylers":{"color":"#212121"}},{"elementType":"labels.icon","stylers":{"visibility":"off"}},{"elementType":"labels.text.fill","stylers":{"color":"#757575"}},{"elementType":"labels.text.stroke","stylers":{"color":"#212121"}},{"featureType":"administrative","elementType":"geometry","stylers":{"color":"#757575"}},{"featureType":"administrative.country","elementType":"labels.text.fill","stylers":{"color":"#9e9e9e"}},{"featureType":"administrative.land_parcel","stylers":{"visibility":"off"}},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":{"color":"#bdbdbd"}},{"featureType":"poi","elementType":"labels.text.fill","stylers":{"color":"#757575"}},{"featureType":"poi.park","elementType":"geometry","stylers":{"color":"#181818"}},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":{"color":"#616161"}},{"featureType":"poi.park","elementType":"labels.text.stroke","stylers":{"color":"#1b1b1b"}},{"featureType":"road","elementType":"geometry.fill","stylers":{"color":"#2c2c2c"}},{"featureType":"road","elementType":"labels.text.fill","stylers":{"color":"#8a8a8a"}},{"featureType":"road.arterial","elementType":"geometry","stylers":{"color":"#373737"}},{"featureType":"road.highway","elementType":"geometry","stylers":{"color":"#3c3c3c"}},{"featureType":"road.highway.controlled_access","elementType":"geometry","stylers":{"color":"#4e4e4e"}},{"featureType":"road.local","elementType":"labels.text.fill","stylers":{"color":"#616161"}},{"featureType":"transit","elementType":"labels.text.fill","stylers":{"color":"#757575"}},{"featureType":"water","elementType":"geometry","stylers":{"color":"#000000"}},{"featureType":"water","elementType":"labels.text.fill","stylers":{"color":"#3d3d3d"}}]', GoogleMapStyle.night:
r'[{"elementType":"geometry","stylers":{"color":"#242f3e"}},{"elementType":"labels.text.fill","stylers":{"color":"#746855"}},{"elementType":"labels.text.stroke","stylers":{"color":"#242f3e"}},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":{"color":"#d59563"}},{"featureType":"poi","elementType":"labels.text.fill","stylers":{"color":"#d59563"}},{"featureType":"poi.park","elementType":"geometry","stylers":{"color":"#263c3f"}},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":{"color":"#6b9a76"}},{"featureType":"road","elementType":"geometry","stylers":{"color":"#38414e"}},{"featureType":"road","elementType":"geometry.stroke","stylers":{"color":"#212a37"}},{"featureType":"road","elementType":"labels.text.fill","stylers":{"color":"#9ca5b3"}},{"featureType":"road.highway","elementType":"geometry","stylers":{"color":"#746855"}},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":{"color":"#1f2835"}},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":{"color":"#f3d19c"}},{"featureType":"transit","elementType":"geometry","stylers":{"color":"#2f3948"}},{"featureType":"transit.station","elementType":"labels.text.fill","stylers":{"color":"#d59563"}},{"featureType":"water","elementType":"geometry","stylers":{"color":"#17263c"}},{"featureType":"water","elementType":"labels.text.fill","stylers":{"color":"#515c6d"}},{"featureType":"water","elementType":"labels.text.stroke","stylers":{"color":"#17263c"}}]', GoogleMapStyle.aubergine:
r'[{"elementType":"geometry","stylers":{"color":"#1d2c4d"}},{"elementType":"labels.text.fill","stylers":{"color":"#8ec3b9"}},{"elementType":"labels.text.stroke","stylers":{"color":"#1a3646"}},{"featureType":"administrative.country","elementType":"geometry.stroke","stylers":{"color":"#4b6878"}},{"featureType":"administrative.land_parcel","elementType":"labels.text.fill","stylers":{"color":"#64779e"}},{"featureType":"administrative.province","elementType":"geometry.stroke","stylers":{"color":"#4b6878"}},{"featureType":"landscape.man_made","elementType":"geometry.stroke","stylers":{"color":"#334e87"}},{"featureType":"landscape.natural","elementType":"geometry","stylers":{"color":"#023e58"}},{"featureType":"poi","elementType":"geometry","stylers":{"color":"#283d6a"}},{"featureType":"poi","elementType":"labels.text.fill","stylers":{"color":"#6f9ba5"}},{"featureType":"poi","elementType":"labels.text.stroke","stylers":{"color":"#1d2c4d"}},{"featureType":"poi.park","elementType":"geometry.fill","stylers":{"color":"#023e58"}},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":{"color":"#3C7680"}},{"featureType":"road","elementType":"geometry","stylers":{"color":"#304a7d"}},{"featureType":"road","elementType":"labels.text.fill","stylers":{"color":"#98a5be"}},{"featureType":"road","elementType":"labels.text.stroke","stylers":{"color":"#1d2c4d"}},{"featureType":"road.highway","elementType":"geometry","stylers":{"color":"#2c6675"}},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":{"color":"#255763"}},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":{"color":"#b0d5ce"}},{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":{"color":"#023e58"}},{"featureType":"transit","elementType":"labels.text.fill","stylers":{"color":"#98a5be"}},{"featureType":"transit","elementType":"labels.text.stroke","stylers":{"color":"#1d2c4d"}},{"featureType":"transit.line","elementType":"geometry.fill","stylers":{"color":"#283d6a"}},{"featureType":"transit.station","elementType":"geometry","stylers":{"color":"#3a4762"}},{"featureType":"water","elementType":"geometry","stylers":{"color":"#0e1626"}},{"featureType":"water","elementType":"labels.text.fill","stylers":{"color":"#4e6d70"}}]', };
Map<GoogleMarkerColor, double> googleMarkerColorMap = {
GoogleMarkerColor.red: 0.0,
GoogleMarkerColor.orange: 30.0,
GoogleMarkerColor.yellow: 60.0,
GoogleMarkerColor.green: 120.0,
GoogleMarkerColor.cyan: 180.0,
GoogleMarkerColor.azure: 210.0,
GoogleMarkerColor.blue: 240.0,
GoogleMarkerColor.violet: 270.0,
GoogleMarkerColor.magenta: 300.0,
GoogleMarkerColor.rose: 330.0,
};
google_maps_flutter_web: ^0.5.6 を指定するとダメった
Error: Failed running flutter pub get...
Because google_maps_flutter_web >=0.5.5 depends on google_maps ^7.1.0 and custom_widget depends on google_maps 6.3.0, google_maps_flutter_web >=0.5.5 is forbidden.
So, because custom_widget depends on google_maps_flutter_web ^0.5.6, version solving failed.
You can try the following suggestion to make the pubspec resolve:
* Consider downgrading your constraint on google_maps_flutter_web: flutter pub add google_maps_flutter_web:'^0.5.4+3'
Error: Failed running flutter pub get...
Because google_maps_flutter >=2.6.0 depends on google_maps_flutter_web ^0.5.6 which depends on google_maps ^7.1.0, google_maps_flutter >=2.6.0 requires google_maps ^7.1.0.
So, because custom_widget depends on both google_maps 6.3.0 and google_maps_flutter ^2.6.0, version solving failed.
You can try the following suggestion to make the pubspec resolve:
* Consider downgrading your constraint on google_maps_flutter: flutter pub add google_maps_flutter:^2.5.3
! CocoaPods could not find compatible versions for pod "google_maps_flutter_ios": In Podfile:
google_maps_flutter_ios (from .symlinks/plugins/google_maps_flutter_ios/ios)
Flutterflow Specs satisfying the google_maps_flutter_ios (from .symlinks/plugins/google_maps_flutter_ios/ios) dependency were found
2.5.3
0.5.4
2.5.0
必要?
入れたらエラーになった
Error: Failed running flutter pub get...
Because google_maps_flutter_web >=0.3.3 <0.5.5 depends on google_maps ^6.1.0 and custom_widget depends on google_maps ^7.1.0, google_maps_flutter_web >=0.3.3 <0.5.5 is forbidden.
So, because custom_widget depends on google_maps_flutter_web 0.5.4+2, version solving failed.
Error: Failed running flutter pub get...
Because custom_widget depends on google_maps_flutter ^2.6.1 which depends on google_maps_flutter_web ^0.5.6, google_maps_flutter_web ^0.5.6 is required.
So, because custom_widget depends on google_maps_flutter_web 0.5.4+2, version solving failed.
You can try the following suggestion to make the pubspec resolve:
* Consider downgrading your constraint on google_maps_flutter: flutter pub add google_maps_flutter:^2.5.3
Error: Failed running flutter pub get...
Because google_maps_flutter_web >=0.5.5 depends on google_maps ^7.1.0 and custom_widget depends on google_maps 6.3.0, google_maps_flutter_web >=0.5.5 is forbidden.
Error: Failed running flutter pub get...
Because http >=1.1.2 <1.2.1 depends on web >=0.3.0 <0.5.0 and google_maps_flutter_web >=0.5.6+2 depends on web ^0.5.1, http >=1.1.2 <1.2.1 is incompatible with google_maps_flutter_web >=0.5.6+2.
So, because custom_widget depends on both google_maps_flutter_web ^0.5.6+2 and http 1.2.0, version solving failed.
2.5.3
Error: Failed running flutter pub get...
Because http >=1.1.2 <1.2.1 depends on web >=0.3.0 <0.5.0 and custom_widget depends on web ^0.5.0, http >=1.1.2 <1.2.1 is forbidden.
So, because custom_widget depends on http 1.2.0, version solving failed.
google_maps: ^7.1.0
作業記録
htto 1.2.0に依存しているため、google_maps: ^7.1.0は設定できなかった