Today’s tutorial will be very fun while creating this gorgeous looking tourism app we will learn about really cool stuff like:

Geolocation

Showing User location in a map

Prevent a grid from being scrollable

How to make a sun in Flutter.

And much more, So let’s get started!

Grab the code from https://github.com/cybdom/tourisma.

Get two cups of coffee, one for you and one for me at Buy Me A Coffee.

Home Screen:

Here I will especially focus on three things.

First, let’s make our GridView.count none scrollable. To achieve this we just have to wrap it inside a widget called IgnorePointer.

Secondly, what about creating a sun?

Align( alignment: Alignment.topRight, child: Container( padding: EdgeInsets.all(15.0), decoration: BoxDecoration( shape: BoxShape.circle, gradient: RadialGradient( colors: [ Colors.white60, Colors.white30, Colors.blueAccent, ], ), ), child: Icon( Icons.brightness_5, color: Colors.white, ), ), ),

RadialGradient is just what we need for this situation since our Icon looks like a sun we gradually add more opaque blue color.

Ze Map:

Let me put the full source code for the Map widget here in order to go through it in as many details as possible.

import 'dart:async'; import 'package:flutter/material.dart'; import 'package:geolocator/geolocator.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; class MyMap extends StatefulWidget { @override _MyMapState createState() => _MyMapState(); } class _MyMapState extends State { Completer _controller = Completer(); LatLng _myPosition; @override void initState() { _getPosition(); super.initState(); } void _getPosition() async{ Position position = await Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high); _myPosition = LatLng(position.latitude, position.longitude); final GoogleMapController controller = await _controller.future; controller.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(target: _myPosition, zoom: 14))); print(_myPosition); } @override Widget build(BuildContext context) { return Container( // height: 150, child: ClipRRect( borderRadius: BorderRadius.circular(15.0), child: GoogleMap( myLocationButtonEnabled: false, myLocationEnabled: true, initialCameraPosition: CameraPosition(target: LatLng(0,0), zoom: 3), onMapCreated: (GoogleMapController controller) { _controller.complete(controller); }, ), ), ); } }

In the beginning, I wanted to limit the height of my map so I wrapped it inside a container and gave it a height. However, I figured that was not necessary as our GridView takes care of that.

Using a ClipRRect as a parent widget for our GoogleMap allows us to have a slick rounded corners maps.

GoogleMap widget allows us to show the user location but first, we need to enable it by setting myLocationEnabled to true. But we still have a problem, when the map is initiated it has an initial camera position value, so we have to change that value once we got the user location and that’s exactly what we do using the _getPosition() function which we call on initState().

void _getPosition() async{ Position position = await Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high); _myPosition = LatLng(position.latitude, position.longitude); final GoogleMapController controller = await _controller.future; controller.animateCamera(CameraUpdate.newCameraPosition(CameraPosition(target: _myPosition, zoom: 14))); print(_myPosition); }

Geolocator is a flutter package that you can download from here. It allows us to do a few things but here we just use it to get the user location by calling: Geolocator().getCurrentPosition(desiredAccuracy: LocationAccuracy.high);

Once we got the value we convert it to a LatLng, then using our controller we animate the map camera to the user location. And that’s about it!

Details Screen:

Now on the details screen, it’s pretty simple stuff.

We’ve got an expanded PageView.builder along with the page indicators inside a column which itself is inside a ClipRRect that gives it rounded corners at the top.

Now inside the PageView.Builder we’ve got a container that has the background image with a slight dark filter in order to contrast with the white text.

decoration: BoxDecoration( image: DecorationImage( fit: BoxFit.cover, colorFilter: ColorFilter.mode( Colors.black.withOpacity(.3), BlendMode.srcOver), image: NetworkImage( "${placesInfo[i]['img']}", ), ), ),

Other than that it’s all simple stuff, we get the data from our List<Map<String, dynamic>> called placesInfo and we show it using Text Widgets.

THE END!

This article was pretty short because I wanted to focus on certain key points such as the GoogleMap package as well as getting the user location. If you have other suggestions, app ideas, UI ideas please let me know on Twitter: @cybdom.