Learn Dart in One Video

Posted by Derek Banas on Sep 6, 2015 in Web Design | 0 comments

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

{
  "dart_sdk_path": "/usr/local/opt/dart/libexec"
}

{

"dart_sdk_path": "/usr/local/opt/dart/libexec"

}

Preferences.sublime-settings MAC (Include in File)

"dart_sdk_path": "/usr/local/opt/dart/libexec",

1	"dart_sdk_path": "/usr/local/opt/dart/libexec",

pubspec.yaml

name: my_project
version: 0.0.1
description: My project.

name: my_project

version: 0.0.1

description: My project.

darttut.html

<!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>

<!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>

<br>

<textarea rows="20" cols="50" id="output">Program Output</textarea>

</script>

</body>

</html>

darttut.dart

/* 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);
}

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

}

	Facebook
	YouTube
	Twitter
	LinkedIn

Learn Dart in One Video

Leave a Reply Cancel reply