- 18
- 79 318
Kings App Design
Приєднався 15 лис 2023
Geolocation in FlutterFlow (Strava Clone) Pt.2
📢 Have an app Idea? Get started today! ⬇️
www.kingsappdesign.com/
This is a simple tutorial explaining how to build the geolocation elements of the popular activity tracking app 'Strava'.
Let me know in the comments if you enjoyed this video, and you want a part 2!
Raster Tiles:
wiki.openstreetmap.org/wiki/Raster_tile_providers
www.kingsappdesign.com/
This is a simple tutorial explaining how to build the geolocation elements of the popular activity tracking app 'Strava'.
Let me know in the comments if you enjoyed this video, and you want a part 2!
Raster Tiles:
wiki.openstreetmap.org/wiki/Raster_tile_providers
Переглядів: 1 797
Відео
Geolocation in FlutterFlow (Strava Clone)
Переглядів 6 тис.6 місяців тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ This is a simple tutorial explaining how to build the geolocation elements of the popular activity tracking app 'Strava'. Let me know in the comments if you enjoyed this video, and you want a part 2! Raster Tiles: wiki.openstreetmap.org/wiki/Raster_tile_providers
How to Generate a PDF in FlutterFlow
Переглядів 9 тис.6 місяців тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ This is a simple tutorial explaining how to use the 'pdf' package to generate a pdf inside of FlutterFlow Let me know in the comments if you enjoyed this video!
DYNAMIC Mapbox Maps in FlutterFlow (Pt.4): Directions
Переглядів 1,8 тис.7 місяців тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ This is part 4 of the Dynamic Maps with Mapbox in FlutterFlow Series. In this video we investigate how we can route between two points on a map, display turn-by-turn directions and draw a line between these two points. If you liked this video please make sure to like and subscribe!
DYNAMIC Mapbox Maps in FlutterFlow (Pt.3): Reverse Geocoding
Переглядів 1,7 тис.8 місяців тому
📢 Get Your App Built for FREE! ⬇️ www.kingsappdesign.com/ This is part 3 of the Dynamic Maps with Mapbox in FlutterFlow Series. In this video we see how we can see how we can extract place information from places when users click on the map. If you liked this video please make sure to like and subscribe!
DYNAMIC Mapbox Maps in FlutterFlow (Pt.2): Forward Geocoding
Переглядів 6 тис.8 місяців тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ This is part 2, where we see how we can search for places using forward geocoding custom code to request a map and how we can dynamically add markers to that map. If you liked this video please make sure to like and subscribe!
DYNAMIC Mapbox Maps in FlutterFlow (Pt.1): Markers
Переглядів 7 тис.9 місяців тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ This is part 1, how we can use the flutter_map package to connect to a map service, or in this case Mapbox's map service, and how we can dynamically add markers to that map. If you liked this video please make sure to like and subscribe!
GET EVENTS from Google Calendar INTO FlutterFlow (Custom Code)
Переглядів 3,5 тис.9 місяців тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ Hi everyone, this is part 2 of using the Google Calendar API in FlutterFlow. This video comes as a response to a couple of comments from my last video, where some of you were asking how to pull events from their Google Calendar into FlutterFlow instead of just adding an event to their Google Calendar. Let me know in the comments ...
ADD EVENTS from FlutterFlow INTO Google Calendar (Custom Code)
Переглядів 8 тис.9 місяців тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ Hi everyone, in this video we will explore how to add events to a users Google calendar with the Google calendar API in FlutterFlow. Let me know if this video was helpful for you!
FlutterFlow Beginners Tutorial: Ep.6 - Conditional Formatting
Переглядів 2,7 тис.Рік тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ 0:00 Add ‘complete’ variable 1:25 Adding logic 5:38 Testing This is episode 6 of the FlutterFlow basics series, where we use conditional formatting to allow the user to mark tasks as complete or incomplete. In this series we are learning the basics of app design in FlutterFlow build a to-do list app in FlutterFlow from scratch! I...
FlutterFlow Beginners Tutorial: Ep.7 - Passing Parameters
Переглядів 2,9 тис.Рік тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ 0:00 Adding ‘edit’ button 2:27 Creating edit page 3:10 Add update document function 4:45 Pass parameters to edit page 8:33 Fixing text sizing This is episode 7 of the FlutterFlow basics series, where we create a new screen that allows us to update our task documents in our database. In this series we are learning the basics of ap...
FlutterFlow Beginners Tutorial: Ep.8 - Bottom Sheets
Переглядів 2,7 тис.Рік тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ 0:00 Open bottom sheet 2:37 Delete task functionality 4:13 Close bottom sheet 4:40 Outro This is episode 8 of the FlutterFlow basics series, where we learn about components and create a bottom sheet that allows us to delete our tasks. In this series we are learning the basics of app design in FlutterFlow build a to-do list app in...
FlutterFlow Beginners Tutorial: Ep. 5 - Query Data
Переглядів 3,3 тис.Рік тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ 0:00 Disable dark mode 0:30 Changing app background 1:15 Creating a query 2:50 Creating model task 5:18 Display task info from query This is episode 5 of the FlutterFlow basics series, where we use a query to extract data from Firebase and display that data on the main page of our app. In this series we are learning the basics of...
FlutterFlow Beginners Tutorial: Ep.4 - Setting up Firebase
Переглядів 3,6 тис.Рік тому
📢 Have an app Idea? Get started today! ⬇️ www.kingsappdesign.com/ 0:00 Creating a schema 2:07 Setting up Firestore 3:22 Adding a project-ID 5:12 Create document This is episode 4 of the FlutterFlow basics series, where we use Firebase to create our Firestore database. We allow users to create tasks and automatically store task information in our database. In this series we are learning the basi...
FlutterFlow Beginners Tutorial: Ep.3 - User Input
Переглядів 3,7 тис.Рік тому
FlutterFlow Beginners Tutorial: Ep.3 - User Input
FlutterFlow Beginners Tutorial: Ep.2 - Page Navigation
Переглядів 4,2 тис.Рік тому
FlutterFlow Beginners Tutorial: Ep.2 - Page Navigation
FlutterFlow Beginners Tutorial: Ep.1 - Orientation
Переглядів 7 тис.Рік тому
FlutterFlow Beginners Tutorial: Ep.1 - Orientation
Do you allow cloning of your projects? This one in particular?
You are a Great teacher, I learnt a lot as a newbie, Thank you. You just gained a Subscriber!
Hi KingsAppDesign, I tried to replicate what you did in the video. However, the map is not appearing on the screen. I can see only one marker in the middle of the screen with a blank background. Is there anyway you can help me?
Found my solution. Turns out, I missed to add layers in the mapbox style. Without the layers, the map will be blank
hey, I tried that and it’s still a grey background… I went on MapBox Studio and added the sky layer. Is that wrong?
This still working? Im try replicate this widget into my FF aplication, but not working, maybe has some dependencies error.
Bro.. Data type of that Complete under Tasks shouldn't be a boolean? Why did you select an integers.. 😢
Sou um desenvolvedor do Brasil, seus vídeos são muito bons, parabéns!!
please create more videos like these bec you are the best 😍
Obrigado
Part 2 please
how to download the pdf now?
Can you create a map to locate multiple users in real time?
Hi. Great videos that I liked, how do I find you in the discard so that I can download the code? Thank you in advance
The code that works: // Automatic FlutterFlow imports 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! import 'package:flutter_map/flutter_map.dart'; import 'package:latlong2/latlong.dart' as ll; class DynamicMap extends StatefulWidget { const DynamicMap({ super.key, this.width, this.height, this.points, required this.acessToken, required this.startingPoint, required this.startingZoom, }); final double? width; final double? height; final List<LatLng>? points; final String acessToken; final LatLng startingPoint; final double startingZoom; @override State<DynamicMap> createState() => _DynamicMapState(); } class _DynamicMapState extends State<DynamicMap> { List<Marker> allMarkers = []; @override void initState() { super.initState(); addMarkersToMap(widget.points); } void addMarkersToMap(List<LatLng>? points) { for (LatLng point in points!) { allMarkers.add( Marker( point: ll.LatLng(point.latitude, point.longitude), width: 12, height: 12, builder: (context) => Icon( Icons.location_pin, color: Colors.red, ), anchorPos: AnchorPos.exactly(Anchor(0, -12)), ), ); } } @override Widget build(BuildContext context) { return FlutterMap( options: MapOptions( center: ll.LatLng( widget.startingPoint.latitude, widget.startingPoint.longitude), zoom: widget.startingZoom, ), children: [ TileLayer( urlTemplate: 'YOUR URL MAPBOX ?access_token=${widget.acessToken}', ), MarkerLayer( markers: allMarkers, ), ], ); } } ---------------------------------------------------------------------------------------------------------------------------------- Remember to put the correct version of the dependencies: flutter_map: ^5.0.0 latlong2: ^0.9.0
great video. would be helpful to know how then to email it or to have this done automatically.
Hi, excellent videos! Do you happen to have one on how to create a download button for downloading an image, like in wallpaper download apps? How can I contact you? Thanks and best regards.
is it support arbic language
Thank you so much for making this video you saved my bacon!
Great video bro. But when compiling I'm getting 2 errors. Please can you help me. 1 error with the Child parameter which is required. And the second error tells me that the build parameter is not defined.
same with me
change build to child like this void addMarkersToMap(List<LatLng>? points) { for (LatLng point in points!) { allMarkers.add( Marker( point: ll.LatLng(point.latitude, point.longitude), height: 12, width: 12, child: Icon( Icons.location_pin, color: Colors.red, ), ), ); } }
or change the versio is more correct flutter_map: ^5.0.0 & latlong2: ^0.9.0.
@@andrefernando790 thanks you bro!!!
@@andrefernando790 work wonderfull !!! But my style dont work.. i need use "mapbox/streets-v12" but nice !
Please upload a series on student project management application , and also thanks for this work love from india.
Perfect!!! Waiting for more about this!!!
can i use this for flutter?
Thanks you so much, this help me a lot, everyone who see this comment, it's worth it to subscribe!
Congrats! You produce excellent videos and valuable teachings. Can you provide a link to clone such flutterflow project, please ?
Can you show geolocation of another user in the app by streaming the other users location from firestore and then show a route from that user's location to the current users location
Hi how to add image in this pdf tks
To add the images in the PDF or Watermark you need to convert your assets/images files anyfile type for example PNGs into Uint8List -> this converts your image into bytes. Then use that data to populate your images in your code. For example: // Load the images from assets final Uint8List logoBytes = await rootBundle.load('assets/logo.png').then((data) => data.buffer.asUint8List()); final Uint8List watermarkBytes = await rootBundle.load('assets/watermark.png').then((data) => data.buffer.asUint8List()); final Uint8List backgroundBytes = await rootBundle.load('assets/background.png').then((data) => data.buffer.asUint8List()); final pdf = pw.Document(); // Define common styles final titleStyle = pw.TextStyle( fontSize: 28, fontWeight: pw.FontWeight.bold, color: PdfColors.blue900, ); final subheadingStyle = pw.TextStyle( fontSize: 18, fontWeight: pw.FontWeight.bold, color: PdfColors.black, ); final normalTextStyle = pw.TextStyle( fontSize: 14, color: PdfColors.black, ); final highlightedTextStyle = pw.TextStyle( fontSize: 20, fontWeight: pw.FontWeight.bold, color: PdfColors.black, ); // Add a page to the PDF pdf.addPage( pw.Page( pageFormat: PdfPageFormat.a4, margin: pw.EdgeInsets.all(32), build: (pw.Context context) { return pw.Stack( children: [ // Ensure the background image fits the entire A4 page if (backgroundBytes != null) pw.Positioned.fill( child: pw.Image( pw.MemoryImage(backgroundBytes), fit: pw.BoxFit.cover, // Ensures the image covers the full page ), ), Hope this would help you :) Cheers,
Thank you for this tutorial!
Where is that data being stored? Thanks
asombroso, me gustaría saber cómo se puede descargar ese documento
Can you do something similar but with flutter, not with flutterflow?
Hi, no discord link in description?
I wonder if the recording works in the background, isnt it? Since we have this call to "listen"
How should I use that input as a variable value?🙏
Thanks for this amazing video. I have added created two different functions for android and iOS because both have different client_ids in oauth credentials. The app working well on iOS but on android once I choose a google account to sign in, nothing happens. What could be wrong?
Whats TileLayer, PolylineLayer and MarkerLayer
Wow, very nice content
Thank you
Please provide the custom widget code in comments!
thank you, its nice work
Another epic tutorial man! You've helped me remove Google maps completely - thanks so much! The only thing left for me is to make sure this runs in the background without the app being open on the phone.. Any pointers?
After doing some testing it seems that the bounding box is not working fully. It keeps showing the initialZoom value and not zooming into the route size. Any tips on getting the zoom dynamic?
Part 2 is out!
Amazing! I really like if you could make a tutorial with a screenshot lib with Flutterflow. I would like to make a screenshot of a component to the user shares in the social media.
Thanks for posting the Part 2
Thanks for publishing!!! Question - This GET feautre works on user's calendar only right? Is there a way where let say admin creates calendar & members can see that admin's calendar
It looks great! However I couldn’t do this. When I try to compile my code FlutterFlow displays that my widget is empty. I asked Chat GPT to check the code even after that it persists. I don’t know what is wrong
This has by far been one of the easiest tutorials on coding Ive seen
Hi, great tutorial. Did you know or managed to track the location when the app is in background or even closed? I tried a lot but it doesn't work. When App is in Forground and open it works fine.
Yeh this would be a much needed fix
thank you so much for these, I hope they keep coming. Your speed and they way you explain things are concise and to the point. thank you
Amazing tutorial! Thanks so much!
I got the markers from a firestore query which fires at page load but the map only shows after i click on the page and also when i navigate to another page and back it doest work also not if i click somewhere in the page.