Learn Flutter, Leaflet and Svelte

If you've ever worked on a website for a business, there's a good chance you've included a map.

A Google Map embed is sufficient for showing a location, but doesn't leave you many customization options.

React Leaflet to the rescue!

In this course, Colby Fayock will guide you through a series of lessons and challenges that will build your map making skills as you build out a web app for a fictional restaurant.

You'll get practice with handling API keys and using React Hooks to implement a custom interactive map complete with metadata and additional overlays.

This course has built-in challenges that you are encouraged to pause and work through, but feel free to just watch.

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Build Maps with React Leaflet

In this collection, you'll learn the basics of creating a new map in your React application with React Leaflet. We'll walk through adding the map itself as well as adding markers with popups, different shapes, and increasingly complex features to your map!

Mapping with React Leaflet

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Up and running with Svelte 3

Flutter allows you to build native apps on iOS and Android from a single codebase. In this course, we'll walk through everything you need to know to quickly get up & running with Flutter including styling, navigation, local state management, theming, lists & forms.

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

flutter

Getting Started with Flutter

Flutter

Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib. 

Create forms in Svelte with Svelte Forms Lib

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most developers ever need.

leaflet

Leaflet makes creating maps in the browser *dead simple*. With some HTML and 3 lines of JavaScript, we can quickly have a map displaying.

Get Started with LeafletJS Mapping

With a basic map in place we can add shapes, like US states. We will then see how to style the shapes to make a visually appealing map.

Adding Shapes to Maps with Leaflet and GeoJSON

Rendering GeoJSON data on a map and interacting via mouse over, mouse out, and click.

Interactive Leaflet Maps with GeoJSON data

In this lesson you will learn how to attach Event Handlers to buttons and input fields. Event handlers normally follows the `on:[event]` format. If you are making use of two way binding you should use `bind:` instead, for example an input field could use bind:value.

Use Event Handlers in Svelte 2

We will setup our first command-line Dart application. We will use the apt-get package manager on Ubuntu to install the SDK and write our first program. This will prepare you to follow along in the next lessons.

Get the gist of commands → https://gist.github.com/creativebracket/b44ee73739f249be0d5f4b8676e8eca5

Set up your first Dart project on Linux

In this lesson, we will look at the different forms of creating parameters that are optional, namely positional and named. Optional positional arguments are useful when specifying a default value for a particular parameter. Optional named parameters are useful for specifying parameter defaults and writing self-documenting functions and methods.

Define Optional Named and Positional Parameters for Functions and Methods in Dart

In this lesson, we will look at various ways we can control the flow of our Dart code. Control flow statements allow us to break up the flow of code by employing decision-making, looping, branching and enabling our program to conditionally execute particular blocks of code. Dart adopts common control flow statements such as if/else, switch, while, do-while and for loops.

Control Flow Statements in Dart

We will setup our first command-line Dart application. We will use the Chocolatey package manager to install the SDK and write our first  program. This will form the basis for future lessons.

Get Chocolatey → https://chocolatey.org/docs/installation

Get the gist of commands → https://gist.github.com/creativebracket/128dafcbbfdc1d6946231a931f95cb1b

Setup your first Dart project on Windows

We will look at how we can create classes and explore some various features. Dart adopts a single-inheritance model, meaning that you can only extend a single class. We will therefore extend our class example by creating an Employee subclass of a parent Person class.

Understand Classes and Inheritance in Dart

In this lesson, we will cover Interfaces and Mixins. Interfaces act as a contract containing properties and methods that a class must define once it “implements” this interface. Mixins are Dart’s way of sharing properties and methods from multiple classes, since by design Dart adopts a single-inheritance model.

Define Interfaces and Share Class Members through Mixins in Dart

Futures represent a computation that does not complete immediately. Where a normal function returns a result, an asynchronous function returns a Future that will eventually contain the result. These are similar to Promises in JavaScript. In this lesson, we will learn how to program asynchronously by writing logic to capture values that are returned at a later time.

Capture and Return Asynchronous Values with Futures in Dart

In this lesson, we’ll learn how to download & install the Flutter CLI from the Flutter website. We’ll then use the Flutter CLI create our first Flutter project.

Install the Flutter SDK & Create Your First Project

In this lesson we’ll walk through the example project that the Flutter CLI created for us & discuss the files & folders that were created for us.

Flutter Project Walkthrough

In this lesson we’ll learn how to run a Flutter project on an iOS Simulator.

Run a Flutter App on iOS

In this lesson we’ll learn how to use themes in order to share colors and font styles throughout our application.