Dart Crash Course #3 - Type Annotations

Net Ninja · Beginner ·🌐 Frontend Engineering ·2y ago

Key Takeaways

The video covers the basics of type annotations in Dart, including explicit type annotations, null safety, and non-nullable variables by default. It demonstrates how to use type annotations with variables, including strings, integers, booleans, and doubles.

Full Transcript

all right then gang so now we've seen how to create variables using three different keywords VAR final and const we've also seen that once we've given a variable a type of data that type of data can then be changed so for example this name variable is a string and therefore it can only ever be a string in the future now so far we've not explicitly added any type annotations to the variables to say what type they should be instead we've just given them a value and that infers that type based on the value so in this name example we've not explicitly said anywhere that this name has to be a string we've just given that variable a string value and D infers that type of the variable to be a string meaning it always then must be a string in the future however we can also explicitly add type annotations to variables to say what type of data they should hold for example I could replace this vary word with string with a capital S to say this variable called name must be a string so we're adding this explicit it type annotation now to the variable and if we try to assign a different value which wasn't a string to the variable then we're going to get an error saying that we can't do that because we've explicitly added the string type annotation to the variable to say whatever value is inside this name variable must be a string so we can also do the same with other types of data as well so for example let me just come down below this print statement I'm going to create an integer now so normally I would say V AG is equal to something like 2 five but instead of v i could say int like so and now we're saying this is an integer this age thing so if I tried to assign a different value like a Boolean then we're going to get an error because this is not an integer so let me get rid of that and change it back to 25 and also we get this yellow underline because we're not using the variable so we'll print it out to get rid of that print age okay so we can also use booleans and we can type those by saying Bo and then we'll say is open open I we'll set that equal to true and now this must be a Boolean so if I tried to change this to a string then it's not going to let me do that we get an error because this is not a Boolean it must be a Boolean true or false so let's print that again so prints down here is open to get rid of that little underline and also we can use doubles so this is a number right 25 but it's an integer a double would be something that has a decimal point so for example 25.5 so I could say double and we'll call this average rating and we'll set this equal to 7.9 for example so that would be a double right here and if we hover over that there's no error but if we change this to a string for example then we should get an error because this is not a double now if we make this an integer like so then we don't actually get an error so if we try printing this out now let me say print and then average rating I'm going to run this code over here so hopefully we're going to see all of these things printed to the right you can see it works so we can say double and use what is essentially an integer here but I couldn't add a0 five on here I would get an error because this is a double right but in the future if we changed the Aver aage rating we can do it to something like 7.9 because this is a double and we're allowed decimal points on doubles okay so if we run this again then we should see 7.9 down here awesome so I just wanted to make clear as well when we're using these types it's only the type that can't change so we can't change the value I could say name is equal to Luigi that would be absolutely fine I just can't change the name type into something else likewise for the age we can change that to 30 and we'll do this as well we'll say is open is false like so and that's all absolutely fine if we run this we should get the updated values printed over here to the console again it's just the type of data that can't change now if you wanted something to be either final or const you can just put that before the type annotation so I could say now if I wanted to const string name equals Mario and now notice we can't actually change the value because we've declared this as a constant so let me get rid of that I could do the same thing down here I could say final this time and again I would get an error right here we are getting this blue underline because it's saying look if you know this at compile time why don't you change this into a constant that's fine I just wanted to show you we could do this with final as well but we'll change it to constant to stop the complaining and we get an eror down here where we try to update the value of age because we can't do that now all right so this is how we use these explicit type annotations to say what these variable types should be okay so there are other data types in Dart as well like lists sets and Maps which we're going to talk about later in the course but the same rules would apply to those types as well we could add the type annotations manually before the variable name or we could leave dat to infer the type for us now a lot of the time I probably won't be adding type annotations in front of variables and just let D in further types instead but there will be some occasions where I do manually add in the type annotation instead and one of those occasions might be where we want to declare a variable and specify what type it should be but not necessarily give it a value right away for example I might have a variable called points which must be an integer now I might not want to give this points variable a value to begin with but instead just update it later on in the code for now I just want to declare the variable and say it must be of type int now there's a small problem with this code because when we use type annotations to declare a variable the variable cannot be null before it gets used it's non-nullable by default and that means if I try to print out the points variable then I'm going to get an error saying that the variable is non-nullable and it needs to be assigned a value before it gets used in the code this behavior in D is called null safety and it's there to prevent unintentionally having access to variables which which are null however sometimes you might want a variable to be null before it gets initialized with an actual value and to allow that null value for a variable created this way we just need to add a question mark directly after the type annotation now we're saying that this variable must be an INT when we assign a value to it but until then it's okay being null and we now no longer get an error all right so hopefully now you understand a little bit about how we can add type annotations to variables we will also be adding type annotations to other things in the rest of this course as well starting with functions in the next lesson

Original Description

In this Dart crash course, you'll learn how to code in Dart from the ground up, in prep for making applications with Flutter (which uses Dart). 🚀🥷🏼 Get early access to this entire course now on Net Ninja Pro: https://netninja.dev/p/dart-crash-course 💻🥷🏼 TypeScript Masterclass: https://netninja.dev/p/typescript-masterclass 💻🥷🏼 TypeScript Crash Course: https://www.youtube.com/watch?v=VGu1vDAWNTg&list=PL4cUxeGkcC9gNhFQgS4edYLqP7LkZcFMN 💻🥷🏼 Modern JavaScript Course: https://netninja.dev/p/modern-javascript-from-novice-to-ninja 🔗🥷🏼 Dartpad - https://dartpad.dev/ 🔗🥷🏼 Dart docs - https://dart.dev/guides 🔗🥷🏼 Pub.dev - https://pub.dev/
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Net Ninja · Net Ninja · 0 of 60

← Previous Next →
1 Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Regular Expressions (RegEx) Tutorial #14 - Matching a Username
Net Ninja
2 Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Regular Expressions (RegEx) Tutorial #15 - Email RegEx Pattern
Net Ninja
3 Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Regular Expressions (RegEx) Tutorial #16 - Finishing Touches
Net Ninja
4 GraphQL Tutorial #1 - Introduction to GraphQL
GraphQL Tutorial #1 - Introduction to GraphQL
Net Ninja
5 GraphQL Tutorial #2 - A Birdseye View of GraphQL
GraphQL Tutorial #2 - A Birdseye View of GraphQL
Net Ninja
6 GraphQL Tutorial #3 - Project (stack) Overview
GraphQL Tutorial #3 - Project (stack) Overview
Net Ninja
7 GraphQL Tutorial #4 - Making Queries (front-end preview)
GraphQL Tutorial #4 - Making Queries (front-end preview)
Net Ninja
8 GraphQL Tutorial #5 - Express App Setup
GraphQL Tutorial #5 - Express App Setup
Net Ninja
9 GraphQL Tutorial #6 - Setting up GraphQL
GraphQL Tutorial #6 - Setting up GraphQL
Net Ninja
10 GraphQL Tutorial #7 - GraphQL Schema
GraphQL Tutorial #7 - GraphQL Schema
Net Ninja
11 GraphQL Tutorial #8 - Root Query
GraphQL Tutorial #8 - Root Query
Net Ninja
12 GraphQL Tutorial #9 - The Resolve Function
GraphQL Tutorial #9 - The Resolve Function
Net Ninja
13 GraphQL Tutorial #10 - Testing Queries in Graphiql
GraphQL Tutorial #10 - Testing Queries in Graphiql
Net Ninja
14 GraphQL Tutorial #11 - GraphQL ID Type
GraphQL Tutorial #11 - GraphQL ID Type
Net Ninja
15 GraphQL Tutorial #12 - Author Type
GraphQL Tutorial #12 - Author Type
Net Ninja
16 GraphQL Tutorial #13 - Type Relations
GraphQL Tutorial #13 - Type Relations
Net Ninja
17 GraphQL Tutorial #14 - GraphQL Lists
GraphQL Tutorial #14 - GraphQL Lists
Net Ninja
18 GraphQL Tutorial #15 - More on Root Queries
GraphQL Tutorial #15 - More on Root Queries
Net Ninja
19 GraphQL Tutorial #16 - Connecting to mLab
GraphQL Tutorial #16 - Connecting to mLab
Net Ninja
20 GraphQL Tutorial #17 - Mongoose Models
GraphQL Tutorial #17 - Mongoose Models
Net Ninja
21 GraphQL Tutorial #18 - Mutations
GraphQL Tutorial #18 - Mutations
Net Ninja
22 GraphQL Tutorial #19 - More on Mutations
GraphQL Tutorial #19 - More on Mutations
Net Ninja
23 GraphQL Tutorial #20 - Updating the Resolve Functions
GraphQL Tutorial #20 - Updating the Resolve Functions
Net Ninja
24 GraphQL Tutorial #21 - GraphQL NonNull
GraphQL Tutorial #21 - GraphQL NonNull
Net Ninja
25 GraphQL Tutorial #22 - Adding a Front-end
GraphQL Tutorial #22 - Adding a Front-end
Net Ninja
26 GraphQL Tutorial #23 - Create React App
GraphQL Tutorial #23 - Create React App
Net Ninja
27 GraphQL Tutorial #24 - Book List Component
GraphQL Tutorial #24 - Book List Component
Net Ninja
28 GraphQL Tutorial #25 - Apollo Client Setup
GraphQL Tutorial #25 - Apollo Client Setup
Net Ninja
29 GraphQL Tutorial #26 - Making Queries from React
GraphQL Tutorial #26 - Making Queries from React
Net Ninja
30 GraphQL Tutorial #27 - Rendering Data in a Component
GraphQL Tutorial #27 - Rendering Data in a Component
Net Ninja
31 GraphQL Tutorial #28 - Add Book Component
GraphQL Tutorial #28 - Add Book Component
Net Ninja
32 GraphQL Tutorial #29 - External Query File
GraphQL Tutorial #29 - External Query File
Net Ninja
33 GraphQL Tutorial #30 - Updating Component State
GraphQL Tutorial #30 - Updating Component State
Net Ninja
34 GraphQL Tutorial #31 - Composing Queries
GraphQL Tutorial #31 - Composing Queries
Net Ninja
35 GraphQL Tutorial #32 - query variables
GraphQL Tutorial #32 - query variables
Net Ninja
36 GraphQL Tutorial #33 - Re-fetching Queries
GraphQL Tutorial #33 - Re-fetching Queries
Net Ninja
37 GraphQL Tutorial #34 - Book Details Component
GraphQL Tutorial #34 - Book Details Component
Net Ninja
38 GraphQL Tutorial #36 - Styling the App
GraphQL Tutorial #36 - Styling the App
Net Ninja
39 GraphQL Tutorial #35 - Making a Single Query
GraphQL Tutorial #35 - Making a Single Query
Net Ninja
40 Build Apps with Vue & Firebase - Udemy Course
Build Apps with Vue & Firebase - Udemy Course
Net Ninja
41 Updated Vue & Firebase Course (Udemy)
Updated Vue & Firebase Course (Udemy)
Net Ninja
42 Vue & Firebase Real-time Chat (Preview) #1 - Intro
Vue & Firebase Real-time Chat (Preview) #1 - Intro
Net Ninja
43 Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Vue & Firebase Real-time Chat (Preview) #2 - Project Structure
Net Ninja
44 Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Vue & Firebase Real-time Chat (Preview) #3 - Firestore Setup
Net Ninja
45 Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Vue & Firebase Real-time Chat (Preview) #4 - Welcome Screen
Net Ninja
46 Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Vue & Firebase Real-time Chat (Preview) #5 - Props in Routes
Net Ninja
47 Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Vue & Firebase Real-time Chat (Preview) #6 - Route Guards
Net Ninja
48 Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Vue & Firebase Real-time Chat (Preview) #7 - Chat Window
Net Ninja
49 Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Vue & Firebase Real-time Chat (Preview) #8 - New Message Component
Net Ninja
50 Object Oriented JavaScript Tutorial #1 - Introduction
Object Oriented JavaScript Tutorial #1 - Introduction
Net Ninja
51 Object Oriented JavaScript Tutorial #2 - Object Literals
Object Oriented JavaScript Tutorial #2 - Object Literals
Net Ninja
52 Object Oriented JavaScript Tutorial #3 - Updating Properties
Object Oriented JavaScript Tutorial #3 - Updating Properties
Net Ninja
53 Object Oriented JavaScript Tutorial #4 - Classes
Object Oriented JavaScript Tutorial #4 - Classes
Net Ninja
54 Object Oriented JavaScript Tutorial #5  - Class Constructors
Object Oriented JavaScript Tutorial #5 - Class Constructors
Net Ninja
55 Object Oriented JavaScript Tutorial #6 - Class Methods
Object Oriented JavaScript Tutorial #6 - Class Methods
Net Ninja
56 Object Oriented JavaScript Tutorial #7 - Method Chaining
Object Oriented JavaScript Tutorial #7 - Method Chaining
Net Ninja
57 Object Oriented JavaScript Tutorial #8 - Class Inheritance
Object Oriented JavaScript Tutorial #8 - Class Inheritance
Net Ninja
58 Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Object Oriented JavaScript Tutorial #9 - Constructors (under the hood)
Net Ninja
59 Object Oriented JavaScript Tutorial #10 - Prototype
Object Oriented JavaScript Tutorial #10 - Prototype
Net Ninja
60 Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Object Oriented JavaScript Tutorial #11 - Prototype Inheritance
Net Ninja

This video teaches the basics of type annotations in Dart, including how to declare variables with explicit types and how to handle null safety. It covers the different data types in Dart, including strings, integers, booleans, and doubles.

Key Takeaways
  1. Declare a variable with an explicit type annotation
  2. Understand the difference between nullable and non-nullable variables
  3. Use the question mark to allow null values for a variable
  4. Declare variables with different data types, such as strings, integers, booleans, and doubles
💡 Null safety is a key feature in Dart that prevents unintentionally accessing null variables. By default, variables declared with type annotations are non-nullable, but you can allow null values by adding a question mark after the type annotation.

Related Reads

📰
Inside the Wayfair Frontend SDE-2 Interview: A Complete Breakdown
Learn how to prepare for a Frontend SDE-2 interview at Wayfair, including online assessments, machine coding, and system design.
Medium · Programming
📰
I Spent Two Years Maintaining a React SPA. HTMX Rebuilt It in a Week
Learn how HTMX rebuilt a React SPA in a week, replacing 2 years of maintenance work, and discover the benefits of this alternative approach
Medium · Programming
📰
The 5 Levels of Front End Engineering (And Where Most Developers Get Stuck)
Learn the 5 levels of front end engineering to improve your skills and avoid getting stuck in a career rut
Medium · Programming
📰
Browser-Based PDF Editing with Vue 3 and pdf-lib
Learn to build a browser-based PDF editor using Vue 3 and pdf-lib, enabling users to edit PDFs directly in the browser
Dev.to · sunshey
Up next
How to Use Semrush Keyword Magic Tool with ChatGPT to Make Money
Grow with Will - SEO, Sales & Entrepreneurship
Watch →