Kings App Design
Kings App Design
  • 18
  • 79 318
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
Переглядів: 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

КОМЕНТАРІ

  • @cdrdan
    @cdrdan 11 днів тому

    Do you allow cloning of your projects? This one in particular?

  • @LEHLOHONOLOMPHOKENG
    @LEHLOHONOLOMPHOKENG 11 днів тому

    You are a Great teacher, I learnt a lot as a newbie, Thank you. You just gained a Subscriber!

  • @sumeshsivan007
    @sumeshsivan007 18 днів тому

    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?

    • @sumeshsivan007
      @sumeshsivan007 13 днів тому

      Found my solution. Turns out, I missed to add layers in the mapbox style. Without the layers, the map will be blank

    • @jassellgarcia2902
      @jassellgarcia2902 7 днів тому

      hey, I tried that and it’s still a grey background… I went on MapBox Studio and added the sky layer. Is that wrong?

  • @ericdasilva9990
    @ericdasilva9990 Місяць тому

    This still working? Im try replicate this widget into my FF aplication, but not working, maybe has some dependencies error.

  • @q.ramthienghlimsanate5720
    @q.ramthienghlimsanate5720 Місяць тому

    Bro.. Data type of that Complete under Tasks shouldn't be a boolean? Why did you select an integers.. 😢

  • @MediatoreInc
    @MediatoreInc Місяць тому

    Sou um desenvolvedor do Brasil, seus vídeos são muito bons, parabéns!!

  • @raheelkhan-qn4ln
    @raheelkhan-qn4ln Місяць тому

    please create more videos like these bec you are the best 😍

  • @brunohenryque
    @brunohenryque Місяць тому

    Obrigado

  • @sumeshsivan007
    @sumeshsivan007 Місяць тому

    Part 2 please

  • @OliverWittmannWilsmann
    @OliverWittmannWilsmann Місяць тому

    how to download the pdf now?

  • @kleberbuenano5672
    @kleberbuenano5672 Місяць тому

    Can you create a map to locate multiple users in real time?

  • @ДмитрийБондарчук-ь1д

    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

  • @LEONARDOPEREIRACONEJEROS
    @LEONARDOPEREIRACONEJEROS 2 місяці тому

    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

  • @DQ940
    @DQ940 2 місяці тому

    great video. would be helpful to know how then to email it or to have this done automatically.

  • @angrub99
    @angrub99 2 місяці тому

    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

  • @franciscoreal8430
    @franciscoreal8430 3 місяці тому

    Thank you so much for making this video you saved my bacon!

  • @manuelquintana7129
    @manuelquintana7129 3 місяці тому

    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.

    • @TheSilentPrince
      @TheSilentPrince 3 місяці тому

      same with me

    • @andrefernando790
      @andrefernando790 3 місяці тому

      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, ), ), ); } }

    • @andrefernando790
      @andrefernando790 3 місяці тому

      or change the versio is more correct flutter_map: ^5.0.0 & latlong2: ^0.9.0.

    • @manuelquintana7129
      @manuelquintana7129 3 місяці тому

      @@andrefernando790 thanks you bro!!!

    • @manuelquintana7129
      @manuelquintana7129 3 місяці тому

      @@andrefernando790 work wonderfull !!! But my style dont work.. i need use "mapbox/streets-v12" but nice !

  • @puripie979
    @puripie979 3 місяці тому

    Please upload a series on student project management application , and also thanks for this work love from india.

  • @patrickteless
    @patrickteless 3 місяці тому

    Perfect!!! Waiting for more about this!!!

  • @shintastha1171
    @shintastha1171 3 місяці тому

    can i use this for flutter?

  • @kenjieplayz858
    @kenjieplayz858 3 місяці тому

    Thanks you so much, this help me a lot, everyone who see this comment, it's worth it to subscribe!

  • @haroldolontrajr4650
    @haroldolontrajr4650 3 місяці тому

    Congrats! You produce excellent videos and valuable teachings. Can you provide a link to clone such flutterflow project, please ?

  • @worldofgames1558
    @worldofgames1558 3 місяці тому

    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

  • @monawang73
    @monawang73 3 місяці тому

    Hi how to add image in this pdf tks

    • @anuragsen3001
      @anuragsen3001 2 місяці тому

      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,

  • @thechargedone169
    @thechargedone169 3 місяці тому

    Thank you for this tutorial!

  • @BrunoMartinsNeto
    @BrunoMartinsNeto 4 місяці тому

    Where is that data being stored? Thanks

  • @QUEPASARIASI-j1n
    @QUEPASARIASI-j1n 4 місяці тому

    asombroso, me gustaría saber cómo se puede descargar ese documento

  • @ciurdea8984
    @ciurdea8984 4 місяці тому

    Can you do something similar but with flutter, not with flutterflow?

  • @jonloi3794
    @jonloi3794 4 місяці тому

  • @Viju489
    @Viju489 4 місяці тому

    Hi, no discord link in description?

  • @dadkakdead
    @dadkakdead 4 місяці тому

    I wonder if the recording works in the background, isnt it? Since we have this call to "listen"

  • @helium829
    @helium829 4 місяці тому

    How should I use that input as a variable value?🙏

  • @navaidali99
    @navaidali99 4 місяці тому

    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?

  • @tanujain2605
    @tanujain2605 4 місяці тому

    Whats TileLayer, PolylineLayer and MarkerLayer

  • @MyInspireSphere
    @MyInspireSphere 4 місяці тому

    Wow, very nice content

  • @misterzer_officiel
    @misterzer_officiel 4 місяці тому

    Thank you

  • @tanujain2605
    @tanujain2605 4 місяці тому

    Please provide the custom widget code in comments!

  • @ВиталийГлухенький
    @ВиталийГлухенький 4 місяці тому

    thank you, its nice work

  • @fluckit
    @fluckit 4 місяці тому

    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?

    • @fluckit
      @fluckit 4 місяці тому

      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?

  • @codybateman6785
    @codybateman6785 5 місяців тому

    Part 2 is out!

  • @LeonardoZeferino
    @LeonardoZeferino 5 місяців тому

    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.

  • @tanujain2605
    @tanujain2605 5 місяців тому

    Thanks for posting the Part 2

  • @yohannanphilip
    @yohannanphilip 5 місяців тому

    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

  • @RustemJaparov
    @RustemJaparov 5 місяців тому

    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

  • @ELEVENPERCENT
    @ELEVENPERCENT 5 місяців тому

    This has by far been one of the easiest tutorials on coding Ive seen

  • @mareikeweber9529
    @mareikeweber9529 5 місяців тому

    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.

    • @raiden7378
      @raiden7378 2 місяці тому

      Yeh this would be a much needed fix

  • @Luckygenes
    @Luckygenes 5 місяців тому

    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

  • @infinitudedc
    @infinitudedc 5 місяців тому

    Amazing tutorial! Thanks so much!

  • @johndemolbot
    @johndemolbot 5 місяців тому

    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.