Added extra customizations for overlay mode - Very useful for Web

example/lib/main.dart

@@ -1,9 +1,9 @@
 import 'dart:async';
 import 'dart:math';
 
-import 'package:google_api_headers/google_api_headers.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_google_places/flutter_google_places.dart';
+import 'package:google_api_headers/google_api_headers.dart';
 import 'package:google_maps_webservice/places.dart';
 
 const kGoogleApiKey = "API_KEY";
@@ -173,8 +173,8 @@ class _CustomSearchScaffoldState extends PlacesAutocompleteState {
       onTap: (p) {
         displayPrediction(p, context);
       },
-      logo: Row(
-        children: const [FlutterLogo()],
+      logo: const Row(
+        children: [FlutterLogo()],
         mainAxisAlignment: MainAxisAlignment.center,
       ),
     );

lib/flutter_google_places.dart

@@ -1,5 +1,3 @@
-library flutter_google_places;
-
 export 'src/flutter_google_places.dart';
 export 'src/places_autocomplete_field.dart';
 export 'src/places_autocomplete_form_field.dart';

lib/src/flutter_google_places.dart

@@ -1,5 +1,3 @@
-library flutter_google_places.src;
-
 import 'dart:async';
 
 import 'package:flutter/material.dart';
@@ -29,6 +27,13 @@ class PlacesAutocompleteWidget extends StatefulWidget {
   final InputDecoration? decoration;
   final TextStyle? textStyle;
   final ThemeData? themeData;
+  final double? width;
+  final double? height;
+  final EdgeInsetsGeometry? padding;
+  final EdgeInsetsGeometry? margin;
+  final bool showContainerBackground;
+  final Color? backgroundColor;
+  final BorderRadius? borderRadius;
 
   /// optional - sets 'proxy' value in google_maps_webservice
   ///
@@ -64,7 +69,7 @@ class PlacesAutocompleteWidget extends StatefulWidget {
     this.region,
     this.logo,
     this.onError,
-    Key? key,
+    super.key,
     this.proxyBaseUrl,
     this.httpClient,
     this.startText,
@@ -73,7 +78,14 @@ class PlacesAutocompleteWidget extends StatefulWidget {
     this.textStyle,
     this.themeData,
     this.resultTextStyle,
-  }) : super(key: key);
+    this.height,
+    this.width,
+    this.margin = const EdgeInsets.symmetric(horizontal: 16.0, vertical: 30.0),
+    this.padding,
+    this.showContainerBackground = false,
+    this.backgroundColor,
+    this.borderRadius,
+  });
 
   @override
   State<PlacesAutocompleteWidget> createState() =>
@@ -87,6 +99,8 @@ class _PlacesAutocompleteOverlayState extends PlacesAutocompleteState {
   @override
   Widget build(BuildContext context) {
     final theme = widget.themeData ?? Theme.of(context);
+    final Color backgroundColor =
+        widget.backgroundColor ?? theme.dialogBackgroundColor;
     if (widget.mode == Mode.fullscreen) {
       return Theme(
         data: theme,
@@ -116,7 +130,7 @@ class _PlacesAutocompleteOverlayState extends PlacesAutocompleteState {
       final header = Column(
         children: <Widget>[
           Material(
-            color: theme.dialogBackgroundColor,
+            color: backgroundColor,
             borderRadius: BorderRadius.only(
               topLeft: headerTopLeftBorderRadius,
               topRight: headerTopRightBorderRadius,
@@ -142,7 +156,7 @@ class _PlacesAutocompleteOverlayState extends PlacesAutocompleteState {
               ],
             ),
           ),
-          const Divider()
+          const Divider(),
         ],
       );
 
@@ -165,7 +179,7 @@ class _PlacesAutocompleteOverlayState extends PlacesAutocompleteState {
           _response == null ||
           _response!.predictions.isEmpty) {
         body = Material(
-          color: theme.dialogBackgroundColor,
+          color: backgroundColor,
           borderRadius: BorderRadius.only(
             bottomLeft: bodyBottomLeftBorderRadius,
             bottomRight: bodyBottomRightBorderRadius,
@@ -179,7 +193,7 @@ class _PlacesAutocompleteOverlayState extends PlacesAutocompleteState {
               bottomLeft: bodyBottomLeftBorderRadius,
               bottomRight: bodyBottomRightBorderRadius,
             ),
-            color: theme.dialogBackgroundColor,
+            color: backgroundColor,
             child: ListBody(
               children: _response!.predictions
                   .map(
@@ -195,13 +209,22 @@ class _PlacesAutocompleteOverlayState extends PlacesAutocompleteState {
         );
       }
 
-      final container = Container(
-        margin: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 30.0),
-        child: Stack(
-          children: <Widget>[
-            header,
-            Padding(padding: const EdgeInsets.only(top: 48.0), child: body),
-          ],
+      final container = Center(
+        child: Container(
+          width: widget.width,
+          height: widget.height,
+          padding: widget.padding,
+          margin: widget.margin,
+          decoration: BoxDecoration(
+            color: widget.showContainerBackground ? backgroundColor : null,
+            borderRadius: widget.borderRadius,
+          ),
+          child: Stack(
+            children: <Widget>[
+              header,
+              Padding(padding: const EdgeInsets.only(top: 48.0), child: body),
+            ],
+          ),
         ),
       );
 
@@ -259,11 +282,11 @@ class PlacesAutocompleteResult extends StatefulWidget {
   final TextStyle? resultTextStyle;
 
   const PlacesAutocompleteResult({
-    Key? key,
+    super.key,
     this.onTap,
     this.logo,
     this.resultTextStyle,
-  }) : super(key: key);
+  });
 
   @override
   PlacesAutocompleteResultState createState() =>
@@ -298,10 +321,10 @@ class AppBarPlacesAutoCompleteTextField extends StatefulWidget {
   final TextStyle? textStyle;
 
   const AppBarPlacesAutoCompleteTextField({
-    Key? key,
+    super.key,
     this.textDecoration,
     this.textStyle,
-  }) : super(key: key);
+  });
 
   @override
   AppBarPlacesAutoCompleteTextFieldState createState() =>
@@ -360,7 +383,7 @@ class PoweredByGoogleImage extends StatelessWidget {
   static const _poweredByGoogleBlack =
       "packages/flutter_google_places/assets/google_black.png";
 
-  const PoweredByGoogleImage({Key? key}) : super(key: key);
+  const PoweredByGoogleImage({super.key});
 
   @override
   Widget build(BuildContext context) {
@@ -375,7 +398,7 @@ class PoweredByGoogleImage extends StatelessWidget {
                 : _poweredByGoogleBlack,
             scale: 2.5,
           ),
-        )
+        ),
       ],
     );
   }
@@ -387,11 +410,11 @@ class PredictionsListView extends StatelessWidget {
   final TextStyle? resultTextStyle;
 
   const PredictionsListView({
-    Key? key,
+    super.key,
     required this.predictions,
     this.onTap,
     this.resultTextStyle,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -415,11 +438,11 @@ class PredictionTile extends StatelessWidget {
   final TextStyle? resultTextStyle;
 
   const PredictionTile({
-    Key? key,
+    super.key,
     required this.prediction,
     this.onTap,
     this.resultTextStyle,
-  }) : super(key: key);
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -571,6 +594,13 @@ class PlacesAutocomplete {
     TextStyle? textStyle,
     ThemeData? themeData,
     TextStyle? resultTextStyle,
+    double? width,
+    double? height,
+    EdgeInsetsGeometry? padding,
+    EdgeInsetsGeometry? margin,
+    bool showContainerBackgrond = false,
+    Color? backgroundColor,
+    BorderRadius? borderRadius,
   }) {
     final autoCompleteWidget = PlacesAutocompleteWidget(
       apiKey: apiKey,
@@ -595,6 +625,13 @@ class PlacesAutocomplete {
       textStyle: textStyle,
       themeData: themeData,
       resultTextStyle: resultTextStyle,
+      width: width,
+      height: height,
+      padding: padding,
+      margin: margin,
+      showContainerBackground: showContainerBackgrond,
+      backgroundColor: backgroundColor,
+      borderRadius: borderRadius,
     );
 
     if (mode == Mode.overlay) {

lib/src/places_autocomplete_field.dart

@@ -36,7 +36,7 @@ class PlacesAutocompleteField extends StatefulWidget {
   /// by the decoration to save space for the labels), set the [decoration] to
   /// null.
   const PlacesAutocompleteField({
-    Key? key,
+    super.key,
     required this.apiKey,
     this.controller,
     this.leading,
@@ -59,7 +59,7 @@ class PlacesAutocompleteField extends StatefulWidget {
     this.overlayBorderRadius,
     this.textStyle,
     this.textStyleFormField,
-  }) : super(key: key);
+  });
 
   /// Controls the text being edited.
   ///
@@ -239,7 +239,7 @@ class LocationAutocompleteFieldState extends State<PlacesAutocompleteField> {
                   ),
           )
         else
-          const SizedBox()
+          const SizedBox(),
       ],
     );
 

lib/src/places_autocomplete_form_field.dart

@@ -40,9 +40,9 @@ class PlacesAutocompleteFormField extends FormField<String> {
   /// to [initalValue] or the empty string.
   ///
   /// For documentation about the various parameters, see the [PlacesAutocompleteField] class
-  /// and [new PlacesAutocompleteField], the constructor.
+  /// and [PlacesAutocompleteField.new], the constructor.
   PlacesAutocompleteFormField({
-    Key? key,
+    super.key,
     required String apiKey,
     this.controller,
     Icon? leading,
@@ -61,17 +61,13 @@ class PlacesAutocompleteFormField extends FormField<String> {
     bool? strictbounds,
     ValueChanged<PlacesAutocompleteResponse>? onError,
     InputDecoration inputDecoration = const InputDecoration(),
-    AutovalidateMode autovalidateMode = AutovalidateMode.disabled,
-    FormFieldSetter<String>? onSaved,
-    FormFieldValidator<String>? validator,
+    AutovalidateMode super.autovalidateMode = AutovalidateMode.disabled,
+    super.onSaved,
+    super.validator,
   })  : assert(initialValue == null || controller == null),
         super(
-          key: key,
           initialValue:
               controller != null ? controller.text : (initialValue ?? ''),
-          onSaved: onSaved,
-          validator: validator,
-          autovalidateMode: autovalidateMode,
           builder: (FormFieldState<String> field) {
             final TextFormFieldState state = field as TextFormFieldState;
             final InputDecoration effectiveDecoration = inputDecoration

pubspec.yaml

@@ -1,24 +1,24 @@
 name: flutter_google_places
-description: Google places autocomplete widgets for flutter. No wrapper, use https://pub.dev/packages/google_maps_webservice
+description: Google places autocomplete widgets for flutter. No wrapper, use
+  https://pub.dev/packages/google_maps_webservice
 version: 0.4.0
 repository: https://github.com/fluttercommunity/flutter_google_places
 
 environment:
-  sdk: '>=2.12.0 <3.0.0'
-  flutter: ">=1.17.0"
+  sdk: ">=3.2.3 <4.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
-  google_api_headers: ^1.3.0
-  google_maps_webservice: ^0.0.20-nullsafety.5
-  http: ^0.13.4
-  rxdart: ^0.27.5
+  google_api_headers: 4.0.3
+  google_maps_webservice: ^0.0.19
+  http: ^0.13.6
+  rxdart: ^0.28.0
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
-  lint: ^1.10.0
+  lint: ^2.3.0
 
 flutter:
   assets: