I am using Stack widget as a parent widget. inside the stack widget array, the first widget is a google map and the second widget is TextFormField and I need to set search bar bellow the screen so I use Positioned widget and set below
Scaffold(
extendBodyBehindAppBar: true,
resizeToAvoidBottomInset: false,
drawer: Drawer(),
appBar: CommonWidgets.appbar(true),
body: Stack(
children: <Widget>[
Container(
child: GoogleMap(
mapType: MapType.terrain,
myLocationEnabled: true,
compassEnabled: true,
tiltGesturesEnabled: true,
padding: EdgeInsets.only(
top: MediaQuery.of(context).size.height / 5),
// markers: Set.from(model.allmarkers),
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
// model.mapController.complete(controller);
})),
Positioned(
bottom: 30,
left: 40,
right: 40,
child: TextFormField(
controller: searchController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
hintText: "Please enter your ",
border: InputBorder.none,
fillColor: Colors.amber,
filled: true)))
],
),
);
Now when I use the keyboard to type, my Search bar does not appear above the soft-keyboard. I think as I set in Positioned widget which is fixing the search bar and don't move it. How to solve this problem. I can't use any other widget except Stack because it is a map screen and everything need to show above the map.
You need to change Scaffold's resizeToAvoidBottomInset to true
resizeToAvoidBottomInset: true,
Related
I have created a function in my app which makes a custom widget according to my need. Here is the code for the function
Widget customCircularButton(
{String title, String subTitle, String img, void Function() onTap}) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
GestureDetector(
onTap: onTap,
child: CircleAvatar(
radius: screenWidth(context) / 6,
backgroundColor: pColor,
child: CircleAvatar(
radius: screenWidth(context) / 6 - 2,
backgroundColor: Colors.white,
backgroundImage: Image.asset(img).image,
),
),
),
Container(
margin: EdgeInsets.all(5),
child: Text(
title,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
),
Container(
margin: EdgeInsets.all(5),
width: screenWidth(context) / 3,
child: Text(
subTitle,
style: TextStyle(fontWeight: FontWeight.w300, fontSize: 12),
textAlign: TextAlign.center,
))
],
);
}
So to call this function into my widget i call it like this
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
customCircularButton(
title: 'Donate',
subTitle: 'Donate/Buy food for needy',
img: 'assets/images/donate-food.png',
onTap: donateDiaolg,
),
customCircularButton(
title: 'Become Volunteer',
subTitle: 'Distribute food to the needy',
img: 'assets/images/become-volunteer.png',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => BecomeVolunteer()));
}),
],
),
Here donateDialog is another function which opens up a dialog.
void donateDiaolg() {
showDialog(..implementation..);}
So my doubt here is that should is use fat operator to call the donateDialog function or just call it like there in above code.
My basic question is should i use this
onTap: () => donateDialog(),
or this
onTap: donateDialog(),
or is it okay to do like this
onTap: donateDialog
It would be better if someone explains me these three function call.
It depends on function signature. for example onTap property needs function with no argument. if your custom function is same you can use your function name directly like onTap: myFunc. if your function's signature take 1 or more arguments you should pass empty function to onTap and call your function through it.
I'm trying to display Google maps inside a dialog box and for the first time it pops up as expected, however the second time it throws and exception: StateError (Bad state: Future already completed).
Completer<GoogleMapController> _controller = Completer();
_displayDialog(){
Alert(
context: context,
style: alertStyle,
title: "Here are your results:",
content: Column(
children: <Widget>[
Container(
width: 200.0,
height: 200.0,
child: GoogleMap(
//mapType: MapType.hybrid,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller); //throws here in this line
},
),
),
],
),
Here is a gif to summarize whats happening
Im using rflutter_alert: ^1.0.3 for the dialog box,
and google_maps_flutter: ^0.5.21+15 for Maps.
Thanks in advance!
this verifies if previously I already called "completer ()" if so, you don't need to call "completer ()" again, and just skip it in your code
onMapCreated: (GoogleMapController controller) {
if (!_controller.isCompleted) {
//first calling is false
//call "completer()"
_controller.complete(controller);
}else{
//other calling, later is true,
//don't call again completer()
}
}
I think that the problem is because you are trying to complete a Completer twice which is not allowed. What I did bellow was to create a new Completer each time you call _displayDialog().
_displayDialog(){
Completer<GoogleMapController> _controller = Completer();
Alert(
context: context,
style: alertStyle,
title: "Here are your results:",
content: Column(
children: <Widget>[
Container(
width: 200.0,
height: 200.0,
child: GoogleMap(
//mapType: MapType.hybrid,
initialCameraPosition: _kGooglePlex,
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller); //throws here in this line
},
),
),
],
),
Can someone tell me how get latitude and longitude on map tap in flutter. Do I need to use any plugin?
I think what you mean is that you want a latitude/longitude to be displayed when you tap on some location on a Google Maps widget? In that case, check out the place_picker plugin. From the readme, it sounds like what you need. Link: https://pub.dev/packages/place_picker
Edit:
If you just want the latitude/longitude of any arbitrary location on the map, you can also do the following in your Google Map constructor itself:
GoogleMap(
// all the other arguments
onTap: (latLng) {
print('${latLng.latitude}, ${latLng.longitude}');
}
);
If you need a Lat and lang as well other property you have to use place_picker package. This package help you to get data from users selected location. Try This Code
Widget _dropDownButton() {
return Positioned(
top: 40,
right: 15,
left: 15,
child: Container(
height: 50,
child: TextFormField(
readOnly: true,
enableInteractiveSelection: false,
// will disable paste operation
textInputAction: TextInputAction.next,
onChanged: (location) {
setState(() {
currentAddress = location;
});
},
controller: locationController,
decoration: InputDecoration(
prefixIcon: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return PlacePicker(
apiKey: kGoogleApiKey,
initialPosition: currentPostion,
useCurrentLocation: true,
selectInitialPosition: true,
usePlaceDetailSearch: true,
onPlacePicked: (result) {
setState(() {
selectedPlace = result;
locationController.text =
selectedPlace.formattedAddress;
controllers.animateCamera(
CameraUpdate.newCameraPosition(
CameraPosition(
target: LatLng(
result.geometry.location.lat,
result.geometry.location.lng),
zoom: 20.0),
),
);
Navigator.of(context).pop();
});
},
);
},
),
);
},
child: Icon(
Icons.add_location,
color: Colors.black,
size: 20,
),
),
hintStyle: TextStyle(
color: Colors.black54,
),
hintText: 'Please choose a Address',
),
),
));
}
I have a design where a SingleChildScrollView has a GoogleMap on the first 50% on the screen, and a listing of items in the lower 50%. The user can scroll the entire view up to look at all of the listings. However, at times the Map stops firing the onCameraIdle if the users scrolls the page, and it just won't start firing it again.
onCameraMove and onTap works just fine. It is just onCameraIdle that won't fire.
SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: screenSize.height / 2,
child: GoogleMap(
key: Key("GMap"),
mapType: MapType.normal,
markers: Set<Marker>.of(markers.values),
gestureRecognizers: Set()
..add(Factory<PanGestureRecognizer>(
() => PanGestureRecognizer()))
..add(
Factory<VerticalDragGestureRecognizer>(
() => VerticalDragGestureRecognizer()),
)
..add(
Factory<HorizontalDragGestureRecognizer>(
() => HorizontalDragGestureRecognizer()),
)
..add(
Factory<ScaleGestureRecognizer>(
() => ScaleGestureRecognizer()),
),
initialCameraPosition: CameraPosition(
target: LatLng(14.551620, 121.053329), zoom: 14.5),
onMapCreated: (GoogleMapController controller) {
if (!_controller.isCompleted) {
_controller.complete(controller);
_lastCameraPosition = CameraPosition(
target: LatLng(14.551620, 121.053329), zoom: 14.5);
}
},
myLocationEnabled: true,
myLocationButtonEnabled: true,
onCameraIdle: () {
print("547: onCameraIdle");
_fetchOffers();
},
onCameraMove: (value) {
print("552: onCameraMove");
_lastCameraPosition = value;
},
onTap: (value) {
// Load items for current view if deselecting a marker
print('556: Tapped outside');
},
),
),
Positioned(
top: 50,
right: 20,
child: Container(
height: 30,
decoration: BoxDecoration(
border: Border.all(
color: _userBalance > 0
? globals.themeColor4
: globals.themeColor2,
width: 2),
boxShadow: [
BoxShadow(
blurRadius: 10.0,
color: Colors.black.withOpacity(.5),
offset: Offset(3.0, 4.0),
),
],
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0))),
child: Center(
child: Padding(
padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
child: Text(
"Balance: \u{20B1} ${_userBalance.toStringAsFixed(0)}",
style: TextStyle(
color: Colors.black,
fontSize: 14,
),
),
),
),
),
),
],
),
AnimatedContainer(
color: Colors.white,
// Use the properties stored in the State class.
width: double.infinity,
height: _loaderHeight,
// Define how long the animation should take.
duration: Duration(seconds: 1),
// Provide an optional curve to make the animation feel smoother.
curve: Curves.fastOutSlowIn,
child: Center(
child: Text(
"Loading, please wait",
style: TextStyle(color: Colors.grey),
),
),
),
Container(
color: Colors.white,
child: _offers == null
? Container(
child: Padding(
padding: EdgeInsets.all(30),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(MdiIcons.foodAppleOutline,
size: 60, color: globals.themeColor4),
Padding(padding: EdgeInsets.only(right: 20)),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Fetching offers",
style: TextStyle(
color: globals.themeColor4,
fontWeight: FontWeight.bold)),
Padding(padding: EdgeInsets.only(top: 5)),
Text(
"We are fetching offers for you, please hold on...",
style: TextStyle(color: Colors.grey)),
],
),
),
],
),
),
)
: Column(children: _offers),
),
],
),
),
Has anyone encountered this before and have a solution to it?
I replicated a simple version of your sample, but I wasn’t able to reproduce an issue with onCameraIdle not firing.
Now, based off of my sample, there were some behaviors that you could have misinterpreted as not working, but is actually the scrollview’s behavior taking over (since this is all inside a scrollview):
Sometimes a downward gesture on the map would pull on the scrollview instead of the map.
And an upward gesture would scroll the scrollview instead of interacting with the map.
But without any further details into the rest of your code, or a mcve that can easily reproduce your issue, it’s hard to say what’s really going on.
However, as Patrick Kelly mentioned, it’s also possible that the lack of a KeepAlive might have eventually led to the temporary disposing of your maps widget. Which is why ListView was suggested because this feature is built into it.
On the other hand, you can also implement AutomaticKeepAliveClientMixin for a similar effect, as seen over at https://stackoverflow.com/a/51738269/6668797 (but beware of the warning for the widget disposing).
Anyways, here’s my sample, and I had to make an educated guess on what your _fetchOffers() is:
class _MyHomePageState extends State<MyHomePage> {
// testing
int fetchCount = 0;
List<Widget> _offers;
_fetchOffers() {
fetchCount++;
// simulate varying data
var rng = new Random();
int start = rng.nextInt(10);
int end = start + 3 + rng.nextInt(30);
// build sample list
List<Widget> list = new List();
for (int i = start; i < end; i++) {
list.add(Text('offer$i', style: new TextStyle(fontSize: 30.0)));
}
// assuming you are using setState()
setState(() {
_offers = list;
});
}
// from google maps sample
Completer<GoogleMapController> _controller = Completer();
static final CameraPosition _kGooglePlex = CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 14.4746,
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height / 2,
child: GoogleMap(
mapType: MapType.normal,
initialCameraPosition: _kGooglePlex,
gestureRecognizers: Set()
..add(Factory<PanGestureRecognizer>(() => PanGestureRecognizer()))
..add(Factory<VerticalDragGestureRecognizer>(() => VerticalDragGestureRecognizer()))
..add(Factory<HorizontalDragGestureRecognizer>(() => HorizontalDragGestureRecognizer()))
..add(Factory<ScaleGestureRecognizer>(() => ScaleGestureRecognizer())),
onMapCreated: (GoogleMapController controller) {
_controller.complete(controller);
},
onCameraIdle: () {
_fetchOffers();
},
),
),
]
),
Container(
child: _offers == null
? Container(child: Text("Fetching offers"))
: Column(children: _offers)
),
],
),
),
floatingActionButton: FloatingActionButton(
// for logging _fetchOffers activity
child: Text(fetchCount.toString())
),
);
}
}
onCameraIdle fired every time for me, and I could visually confirm it with the changing offers data as well as the fetchCount log.
You could use a ListView or a CustomScrollView with KeepAlive
This prevents Widgets from being thrown out when scrolled out of view.
I would alternatively recommend digging into the ScrollController class
I am currently using the google_maps_flutter package, and I am placing it within a stack and overlaying it with a button. When the button is pressed, an alert should pop up.
The problem I am currently having is that it works upon first load, but if I exit the app, putting it in the background, and I reenter the app, the alertDialog is no longer showing up. It exists on the screen because I am unable to move the map, and I have to click the area where the button would normally be, but it is not visible.
Any ideas on what's going on?
#override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Stack(
children: <Widget>[
new Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: new Opacity(
opacity: opacity,
child: new GoogleMap(
onMapCreated: initializeMap,
options: GoogleMapOptions(
//trackCameraPosition: true,
compassEnabled: true,
myLocationEnabled: true,
),
),
),
),
new Align(
alignment: new Alignment(0, 1),
child: new GestureDetector(
onTap: () {
alert();
},
child: new Image.asset(
'assets/test.png',
height: 150.0,
fit: BoxFit.cover,
),
),
),
],
),
),
),
}
alert() {
return showCupertinoDialog(
context: context,
builder: (BuildContext context) {
return new CupertinoAlertDialog(
title: new Text("hello"),
content: new Text("hello"),
actions: <Widget>[
CupertinoDialogAction(
isDefaultAction: true,
child: Text("Ok"),
onPressed: () {
Navigator.pop(context);
}
),
CupertinoDialogAction(
child: Text("Cancel"),
onPressed: () {
Navigator.pop(context);
}
)
],
);
},
);
}
Keep in mind google_maps_flutter is a developer preview at version 0.0.3. Give it some time!