In this video tutorial I’ll help you learn Dart in one video. In this video I cover Windows Installation, Mac Installation, Click Listeners, querySelector, Casting, Variables, Math, If, Switch, While, Do While, For Loop, Continue, Break, Strings, Functions, Single Line Functions, Passing Functions as Parameters, Recursive Functions, Optional Parameters, Lists, For Each, For In, Map, Manipulating HTML, Change Listener, Classes, Constructors, Static Fields / Methods, Inheritance, Abstract Classes, Interfaces, Mixins, Operator Overloading, Exception Handling and more.
All of the code used can be found after the video below.
If you liked this video it helps me if you tell Google with a click here [googleplusone]
Code From the Video
Dart Plugin Settings.sublime-settings MAC
1 2 3 |
{ "dart_sdk_path": "/usr/local/opt/dart/libexec" } |
Preferences.sublime-settings MAC (Include in File)
1 |
"dart_sdk_path": "/usr/local/opt/dart/libexec", |
pubspec.yaml
1 2 3 |
name: my_project version: 0.0.1 description: My project. |
darttut.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html> <style> body {font-size: 2em;} input[type="text"]{font-size: .9em;} input[type=submit] { border: 2px solid black; background: #E5E4E2; font-size: .5em; font-weight: bold; color: black; padding: .8em 2em; margin-top: .4em; } #output {font-size: .9em; margin-top: .4em;} .titleStyle {font-size: 2.3em;} </style> <body> <span id ="sum">Calculation</span><br> <input type ="text" id ="num1"><br> <input type ="text" id ="num2"><br> <input type ="submit" value ="Add" id ="button"> <br> <textarea rows="20" cols="50" id="output">Program Output</textarea> <div id="divBox"></div> <script type="application/dart" src="darttut.dart"> </script> <script src="darttut.js"></script> </body> </html> |
darttut.dart
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 |
/* Install on Mac 1. Install HomeBrew 2. In terminal a. brew tap dart-lang/dart b. brew install dart c. brew tap dart-lang/dart d. brew install dart --with-content-shell --with-dartium 3. Set up Package Control by typing the code on this site https://packagecontrol.io/installation into your console 4. In Sublime Tools - Command Palette and type install 5. Click Install Package and type Dart and click on Dart 6. Get SDK location by typing in terminal brew --prefix 7. In Sublime Preferences - Settings User and in Sublime Preferences - Package Settings -Dart put this line "dart_sdk_path": "/usr/local/opt/dart/libexec", 8. Create file pubspec.yaml and add the following name: my_project version: 0.0.1 description: My project. Save your project 9. Shift - F7 to run the current file */ // Convert Dart to JS : dart2js --out=darttut.js darttut.dart // Library that allows us to interact with an HTML Doc import 'dart:html'; import 'dart:math'; // main is the function called when you execute your app void main() { // How to define a constant // const double piValue = 3.141592653589793; // Says that when the button named add is clicked to call the // function addStuff // querySelector("#button").onClick.listen(getSum); // varTest(); // mathTest(); // condTest(); // loopTest(); // stringTest(); // funcTest(); // dataTest(); // manipulateHTML(); // oopTest(); // overloadingTest(); // exceptionTest(); } // The mouse event info is sent, but not used yet void getSum (MouseEvent event){ // Get the value stored in element with the id num1, convert it from // a string and into an int and save it to a variable int num1 = int.parse((querySelector("#num1") as InputElement).value); int num2 = int.parse((querySelector("#num2") as InputElement).value); // Add 2 ints and convert them into a string var sum = (num1 + num2).toString(); // Get the element with the id sum and assign it the string // String interpolation is used to add variable values querySelector("#sum").text = "${num1} + ${num2} = ${sum}"; } // ---------- VARIABLES ---------- void varTest(){ // There 6 variable types in Dart : Integers, Floats, Booleans, // Strings, Lists and Maps // You declare a variable like this if you want to be able to switch // data types (Every Variable is an Object) var randInt = 10; var myName = "Derek"; // You can also define a static type (Use " or ') String randString = "Random String"; // A boolean holds the value true or false bool canVote = true; // Declare an integer (JavaScript numbers are all floats) int maxInt = 9007199254740992; // Min Val = -9007199254740992 // Declare a double with 15 digit precision double piVal = 3.141592653589793; querySelector("#output").text = "Max Int : ${maxInt + 1}\nPI : ${piVal + 0.0000000000000001}"; // Declare a random list List randList = [1,2,3,4]; // Declare a random Map made up from key value pairs Map randMap = {1: "Tom Smith", 2: "Betty Bryant"}; } // ---------- MATH ---------- void mathTest(){ // Used to generate random number // random.nextInt(100) returns a random int from 0 to 100 // nextBool() and nextDouble() = 0.0 - 1.0 var random = new Random(); var number = 6.45; querySelector("#output").text = "5.0 + 4.0 = ${5.0 + 4.0}\n5.0 - 4.0 = ${5.0 - 4.0}\n5.0 * 4.0 = ${5.0 * 4.0}\n5.0 / 4.0 = ${5.0 / 4.0}\n5.0 % 4.0 = ${5.0 % 4.0}\ne^3 = ${exp(3)}\nlog(1000) = ${log(1000)}\nmax(10,5) = ${max(10,5)}\nmin(10,5) = ${min(10,5)}\n10^5 = ${pow(10,5)}\nsqrt(81) = ${sqrt(81)}\nround(6.45) = ${number.round()}\nRandom Numbers : ${random.nextInt(100)}, ${random.nextInt(100)}, ${random.nextInt(100)}\n"; // Other math functions : acos, asin, atan, atan2, cos, sin, tan // Shortcuts : +=, -=, *=, /= } // ---------- CONDITIONALS ---------- void condTest(){ // Relational Operators : ==, !=, >, <, >=, <= // Logical Operators : &&, ||, ! String output = ""; var age = 13; if((age >= 5) && (age <= 6)){ output = "Go to Kindergarten\n"; } else if (age > 18){ output = "Go to College\n"; } else { output = "Go to Grade ${age - 5}\n"; } output += "!(true) = ${!(true)}\n"; output += "true || false = ${(true || false)}\n"; // Use switch when you have a limited number of possibilities String superhero = "Superman"; switch(superhero){ case "Batman": output += "Batman is Bruce Wayne\n"; break; // Leave switch statement case "Superman": output += "Superman is Clark Kent\n"; break; // If nothing else matches default: output += "Hero isn't in database\n"; } querySelector("#output").text = output; } // ---------- LOOPS ---------- void loopTest(){ String output = ""; int i = 0; while(i <= 10){ output += "${i}, "; // Add 1 shortcut i++; } output += "\n"; // do while is used when you have to go through the loop once do { output += "${i}, "; i--; }while(i > 0); output += "\n"; // for is a self contained loop structure // Variables like j are not available outside of the for loop for(int j = 1; j <= 30; j++){ // If j is a multiple of 4 skip the rest of the loop if((j % 4) == 0){ continue; } // If j = 25 jump out of the loop completely if(j == 25){ break; } // If j is even print it if((j % 2) == 0){ output += "${j}, "; } } output += "\n"; // Create a multiplication table with 2 fors for(int k = 0; k <= 10; k++){ for(int l = 0; l <= 10; l++){ output += "${k} * ${l} = ${k*l}\n"; } } querySelector("#output").text = output; } // ---------- STRINGS ---------- // Strings are surrounded by " or ' void stringTest(){ String output = ""; // Concatenate strings String randString = "I " + "am a long " + "string"; String randString2 = "Other random string"; output += "0 Index : ${randString[0]}\n"; // comapreTo returns a 0 if strings are equal output += "Strings equal ${randString.compareTo(randString2)}\n"; // Check if string conatins word starting at index 0 output += "Word long in string : ${randString.contains("long", 0)}\n"; // Get the index of the match or -1 output += "Index of long : ${randString.indexOf("long")}\n"; // Replace all of 1 with another output += "Replace spaces : ${randString.replaceAll(" ", ", ")}\n"; // Split string into a list List listWords = randString.split(" "); // Length of string output += "String Length : ${randString.length}\n"; // Get substring at starting index to defined length output += "Index 0 - 4 : ${randString.substring(0,4)}\n"; // To lower and uppercase output += "Uppercase : ${randString.toUpperCase()}\n"; output += "Lowercase : ${randString.toLowerCase()}\n"; // trim leading and trailing whitespace randString = randString.trim(); // trim leading or trailing whitespace randString = randString.trimLeft(); randString = randString.trimRight(); // Check if string is empty output += "Is Empty : ${randString.isEmpty}\n"; querySelector("#output").text = output; } // ---------- FUNCTIONS ---------- void funcTest(){ String output = ""; // You call a function by name followed by parameters output += "3 * 34 = ${getMult(3,34)}\n"; // You can define single line functions times2(num) => num * 2; output += "56 * 2 = ${times2(56)}\n"; output += addList(1, 10); // Passing functions as parameters times3(num) => num * 3; output += "67 * 2 = ${multiply(67, times2)}\n"; output += "67 * 3 = ${multiply(67, times3)}\n"; // Recursive Function output += "Factorial of 4 = ${factorial(4)}\n"; querySelector("#output").text = output; } // You have to define the data types of parameters int getMult(int num1, int num2){ // Variable val is only available in this function (Local Var) int val = num1 * num2; // return a value to the statement that called this function return val; } // To make parameters optional surround with [ ] separated by commas // You can, but don't have to add a default value String addList(int start, [int quantity = 1]){ String strList = ""; for(int i = 1; i <= quantity; i++){ strList += "${i}, "; } return strList + "\n"; } // We can pass functions as parameters int multiply(int num, func){ return func(num); } // Recursive functions call themselves int factorial(int num){ if(num <= 1){ return 1; } else { return num * factorial(num - 1); } } // 1st: num = 4 * factorial(3) = 4 * 6 = 24 // 2nd: num = 3 * factorial(2) = 3 * 2 = 6 // 3rd: num = 2 * factorial(1) = 2 * 1 = 2 // ---------- LISTS & MAPS ---------- void dataTest(){ String output = ""; // Lists are used to store lists of items which each have an index List emptyList = []; // You can store multiple data types in a list List randList = ["Derek", 40, 175.5]; // Cycle through list items for(int i = 0; i < randList.length; i++){ output += randList[i].toString() + ", "; } output += "\n"; // Add an item to the end randList.add("Pittsburgh"); // Remove an item randList.remove(175.5); // Cycle through a list item with forEach randList.forEach((val) => output += "List Item : ${val}\n"); // You can also use for in for(String val in randList){ output += val.toString() + ", "; } output += "\n"; // You can force a list to only hold one data type List<String> friends = ["Bob", "Tom"]; // A Map stores key / valued pairs that are not ordered, can hold // any type, but must have unique keys Map emptyMap = {}; Map stateCapitals = {"Alabama" : "Montgomery", "Alaska" : "Juneau"}; Map customers = {100 : {"name" : "Paul Smith", "Balance" : 120.25}}; output += "The capital of Alabama is ${stateCapitals["Alabama"]}\n"; output += "Paul Smiths balance is ${customers[100]["Balance"]}\n"; // Change a value in a map customers[100]["Balance"] = 0.00; output += "Paul Smiths balance is ${customers[100]["Balance"]}\n"; // Remove map item stateCapitals.remove("Alaska"); // Add item to a map stateCapitals.addAll({"Arizona" : "Phoenix"}); // Use foreach to output a map stateCapitals.forEach((k, v) => output += "${k} : ${v}\n"); querySelector("#output").text = output; } // ---------- MANIPULATING HTML ELEMENTS ---------- void manipulateHTML(){ String output = ""; // querySelector returns a Element object that can be used to // manipulate the element with the provided id Element title = querySelector("#sum"); // You can change element text title.setInnerHtml("Take me to your leader"); // You can style attributes directly title.style.color = "Blue"; // You can define a class with many styles (Best Choice) title.classes.add("titleStyle"); // You can get an elements text output += title.innerHtml + "\n"; // Get the div named divBox Element divBox = querySelector("#divBox"); // Add a div to the divBox DivElement sampDiv = new DivElement(); sampDiv.text = "I'm a DIV"; divBox.children.add(sampDiv); // Add an anchor element AnchorElement sampAnchor = new AnchorElement(); sampAnchor.text = "Google"; // Change an attribute sampAnchor.setAttribute("href", "http://google.com"); // Add text to the end of a child sampAnchor.appendText("is here"); // Get value of an attribute output += "href of link ${sampAnchor.getAttribute("href")}\n"; divBox.children.add(sampAnchor); // Insert a break statement or any tag divBox.children.add(new Element.tag('br')); Element inputElement = new InputElement(); // Change the id for an element inputElement.attributes['id'] = "inputElement"; divBox.children.add(inputElement); // Function called when the input changes inputElementChange(MouseEvent event) => querySelector("#output").text = output + "Input Changed\n"; // Add a change listener to the input element querySelector("#inputElement").onChange.listen(inputElementChange); // Other Elements : AreaElement, BRElement, ButtomElement, // ButtonInputElement, CheckboxInputElement, ContentElement, // DListElement, DetailsElement, DialogElement, EmailInputElement, // EmbedElement, FileUploadInputElement, FormElement, HeadingElement, // ImageElement, InputElement, LIElement, LabelElement, LinkElement, // MapElement, MediaElement, MenuElement, MenuItemElement, // OListElement, OptionElement, ParagraphElement, ParamElement, // PreElement, RadioButtonInputElement, ResetButtonInputElement, // SpanElement, SubmitButtonInputElement, TableElement, // TextAreaElement, TitleElement, UListElement, VideoElement // https://api.dartlang.org/apidocs/channels/be/dartdoc-viewer/dart:html querySelector("#output").text = output; } // ---------- OOP ---------- void oopTest(){ String output = ""; // Create an Animal object and assign values Animal bear = new Animal(); bear.name = "Buddy"; bear.sound = "Grrrr"; bear._weight = 600; // Output bear values output += "${bear.name} said ${bear.sound} and weighs ${bear.weight}lbs\n"; output += "${bear.run()}\n"; // Call the named constructor Animal tiger = new Animal.three("Saber", "Rowr", 550); output += "${tiger.name} said ${tiger.sound} and weighs ${tiger.weight}lbs\n"; // Objects can't access static methods or fields output += "Number of Animals : ${Animal.getNumberOfAnimals()}\n"; // Dog which inherits from Animal Dog rover = new Dog.three("Rover", "Woof", 85); output += "${rover.name} said ${rover.sound} and weighs ${rover.weight}lbs\n"; // Override method info output += rover.info() + "\n"; // Demonstrate inherited abstract classes Rectangle rect = new Rectangle(5.0,10.0); Circle circle = new Circle(5.0); output += "Rectangle Area : ${rect.area}\nCircle Area : ${circle.area}\n"; // You can instantiate using a super class and then cast to the subclass Shape rect2 = new Rectangle(5.0, 25.0); output += "Rect2 Area ${(rect2 as Rectangle).area}\n"; Superhero superman = new Superhero(); superman.flyingDesc = "flies faster then a speeding bullet"; superman.bulletproofDesc = "bullets bounce off"; output += "Superman ${superman.fly()}\n"; // Demonstrate a mixin Car fordTruck = new Car("Ford Truck"); output += "Ford Truck has the ID : ${fordTruck.id}\n"; querySelector("#output").text = output; } // A class defines the attributes and capabilities of real world objects class Animal { String name = "No Name"; String sound = "No Sound"; // A variable that starts with a _ is private and can't be accessed // by code outside of your program int _weight = 0; int get weight => _weight; // We can protect from bad values being set with a setter set weight(int w){ if(w <= 0){ _weight = 0; } else { _weight = w; } } // Constructors are used to initialize an object when created Animal(){numberOfAnimals++;} // Methods can't have the same name so if you have multiple // constructors you must use named constructors Animal.three(String name, String sound, int weight){ this.name = name; this.sound = sound; this._weight = weight; numberOfAnimals++; } // You can create methods (functions) and can access object values // with this String run(){ return "${this.name} runs"; } // A static method is used when it doesn't make sense for an object // to be able to perform an action. Static fields share the same // value with all objects static int numberOfAnimals = 0; static String getNumberOfAnimals(){ return numberOfAnimals.toString(); } String info(){ // You can also access variables directly without {} return "$name, $sound, $weight"; } } // Inheritance // When you inherit from a class you get all its methods and fields class Dog extends Animal{ String bite(){ return "${this.name} bit you"; } // You'll have to define your constructors Dog(){Animal.numberOfAnimals++;} Dog.three(String name, String sound, int weight){ this.name = name; this.sound = sound; this._weight = weight; Animal.numberOfAnimals++; } // Nothing special is required to override a method String info(){ // You can execute the superclass method with super return super .info() + " and bites"; } } // Abstract Classes // An abstract class can't be instantiated, but it can be inherited abstract class Shape{ // Every class that inherits must include a method named area double get area; } class Rectangle extends Shape{ double height; double width; // Shortcut constructor Rectangle(this .height, this .width); double get area => height * width; } class Circle extends Shape{ double radius; Circle(this .radius); double get area => PI * (radius * radius); } // Interfaces // A class can inherit from multiple classes with implements class Flyable { String fly(){ return "flies"; } } class Bulletproof { String hitByBullet(){ return "bullet bounces off"; } } class Superhero implements Flyable, Bulletproof{ String flyingDesc = "flies"; String bulletproofDesc = "bullet bounces off"; String fly(){ return this.flyingDesc; } String hitByBullet(){ return this.bulletproofDesc; } } // Mixins // Classes that inherit a mixin don't have to override methods, but must // extend another class class IdMaker { int get id => new DateTime.now().millisecondsSinceEpoch; } class Vehicle { int wheels = 4; } class Car extends Vehicle with IdMaker{ String name = "No Name"; Car(String name){ this.name = name;} } // ---------- OPERATOR OVERLOADING ---------- void overloadingTest(){ String output = ""; Point p1 = new Point(10,50); Point p2 = new Point(5,40); output += "Are Points Equal : ${p1 == p2}\n"; Point p3 = p1 + p2; output += "P3 X : ${p3.x} Y : ${p3.y}\n"; querySelector("#output").text = output; } class Point { int x, y; Point(this.x, this.y); operator == (Point p) => this.x == p.x && this.y == p.y; operator + (Point p) => new Point(this.x + p.x, this.y + p.y); operator - (Point p) => new Point(this.x - p.x, this.y - p.y); } // ---------- EXCEPTION HANDLING ---------- // We use exceptions to catch errors that would otherwise crash our programs void exceptionTest(){ divideNums(4, 5); } void divideNums(int num1, int num2){ String output = ""; try { if(num2 == 0){ throw new DivideByZeroError("Error"); } else { output += "$num1 / $num2 = ${num1/num2}\n"; } } on DivideByZeroError { output += "Can't Divide by Zero\n"; } querySelector("#output").text = output; } class DivideByZeroError implements Exception { String cause = "Can't Divide by Zero"; DivideByZeroError(this.cause); } |
Leave a Reply