Hello World in Dart Programming Language

Read here if you haven’t yet install Dart in your system. Install Dart SDK on Mac, Windows and Linux.

Download Visual Studio code for your OS.

Install Dart plugin in your Visual Studio Editor. Just search Dart on your extensions page.

Hello World in Dart Programming Language

Now run this command on Mac ⌘ + Shift + P and type dart it will show this option to create a new project. Choose Console Application when it shows the Choose a Dart Template option.

After creating the project your file explorer will look like this on Visual Studio Code.

Under the bin directory, we are importing a library from lib directory which is being used as alias hello_world.

and then main function has a print function that has a text ‘Hello world’ and called calculate() function from hellow_world library.

The project can be found on github.

Read CSV file by Dart

Read CSV file by Dart language is easy. Make sure you have already installed Dart SDK, follow this tutorial if you haven’t Install Dart SDK on Mac, Windows and Linux

For this tutorial we are going to use Dart plugin on PHPStorm by JetBrains.  To install the plugin on Mac go to PHPStorm -> Preferences -> Plugins and search for ‘Dart’. See my screenshot.

Read CSV file by Dart

Few more plugins for Dart

Dart for Visual Studio Code   and Dart Plugin from JetBrains

After successfully install the plugin open PHPStorm and go to File -> New Project and choose Dart -> Console Application. See the screenshot.

Read CSV file by Dart

PHPStorm will give you a project structure like this. We won’t use the dummy dart library file from lib folder. We will use only main.dart file from bin folder.

Read CSV file by Dart

Delete all lines from main.dart file and paste this code. Run the code (bottom of the page) from PHPStorm it will print id, symbol and open column from each row of CSV file.

Download the CSV file for testing

import 'dart:io';
import 'dart:async';
import 'dart:convert';

main(List arguments) {
  final File file = new File("~/Downloads/C_stock_data.csv");

  Stream<List> inputStream = file.openRead();

  inputStream
      .transform(utf8.decoder)       // Decode bytes to UTF-8.
      .transform(new LineSplitter()) // Convert stream to individual lines.
      .listen((String line) {        // Process results.

       List row = line.split(','); // split by comma

        String id = row[0];
        String symbol = row[1];
        String open = row[2];
        String low = row[3];
        String high = row[4];
        String close = row[5];
        String volume = row[6];
        String exchange = row[7];
        String timestamp = row[8];
        String date = row[9];

        print('$id, $symbol, $open');

      },
      onDone: () { print('File is now closed.'); },
      onError: (e) { print(e.toString()); });
}

Download project from github

Install Dart SDK on Mac, Windows and Linux

To install Dart SDK is easy by package manager on Mac, Windows or Linux.  Package manger is very convenient way to maintain your packages.

Install Dart SDK on Mac, Windows and Linux

Install Dart on Mac

Install Homebrew if not installed on your Mac.

Run commands

brew doctor
brew update
brew tap dart-lang/dart 
brew install dart

To upgrade

brew upgrade dart

Check what you have installed

brew info dart

Install Dart on Windows

Install Chocolatey on Windows

Run commands


choco install dart-sdk

To upgrade


choco upgrade dart-sdk

Install Dart on Linux

Install using apt-get


sudo apt-get update
sudo apt-get install apt-transport-https
sudo sh -c 'curl https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
sudo sh -c 'curl https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'

What’s in the Dart SDK

  • dart – The standalone VM
  • dart2js – The Dart-to-JavaScript compiler (used only for web development)
  • dartanalyzer – The static analyzer
  • dartdevc – The Dart development compiler (used only for web development)
  • dartdoc – The API documentation generator
  • dartfmt – The Dart code formatter
  • pub – The Dart package manager

More information about the Dart SDK see the official README file

Dart SDK on Github

Create your first Flutter Layout

In this article, we are going to create a Flutter Layout from existing source code which gets generated by fluter create command. If you have not created your Flutter project read this Create your first Flutter project

Our final goal is to create a layout which looks like this. Showing person name, picture, and bio. Download the sketch file.

Flutter Layout

We are going to cut MyHomePage and _MyHomePageState classes from ‘main.dart’ file and paste the clipboard content into a new file ‘bio_detail_widget.dart‘ in widgets folder under lib folder.

See my screenshot.

Flutter Layout

Name your libraries and source files must follow dart coding guidelines using lowercase_with_underscores. You can read coding guidelines here Effective Dart: Style

Don’t forget to import ‘bio_detail_widget.dart’ file in ‘main.dart’ file.
import 'package:ff_tutorial_2/widgets/bio_detail_widget.dart';
 
Finally, _MyHomePageState class looks like the code on the bottom of the page.
 
Our body has a child which is new Column, it is a Multi-child layout widget. Column widget places its children vertically.
 
We have two Expanded widgets one holding our bio picture, name and age other is holding our bio description. Expanded makes its child expand to fill available space in the main axis.
 
Our first Expanded widget has one child which is a Row, it displays its children in a horizontal array.
 
For Image, we have created a new folder called images in the same level as pubspec.yaml file. Our pubspec.yaml file has image reference then all the project files automatically can use this reference.
 


  assets:
      - images/bio_pic_1.png



  new Expanded(
      child: new Image.asset('images/bio_pic_1.png'),
  ),
 

class _MyHomePageState extends State {
  
  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: new Text(widget.title),
      ),
      body: new Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
          
            children: [
              
              new Expanded(
                flex:0,
                child: new Container(
                  padding: new EdgeInsets.all(10.0), 
                  child: new Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                            new Expanded(
                              child: new Image.asset('images/bio_pic_1.png'),
                            ),

                           new Expanded(
                              child: new Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisSize: MainAxisSize.min,
                                children: [

                                      new Text('Name: John Doe', style: new TextStyle(color: Color.fromRGBO(138, 87, 42, 100.00))),
                                      new Text('Age: 34', style: new TextStyle(color: Color.fromRGBO(138, 87, 42, 100.00))),


                                ],
                              )
                            ),

                    ],
                  ),
                )

              ),
              
               new Expanded(
                  child: new Container(
                    padding: new EdgeInsets.all(10.0),  
                    child: new Text('Bio: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ille, ut dixi, vitiose. Eadem nunc mea adversum te oratio est. Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Duo Reges: constructio interrete.',
                    style: new TextStyle(color: Color.fromRGBO(138, 87, 42, 100.00))),
                  )
               ),
              
            ],
          )
    );
  }
}

Create your first Flutter project

To create your first Flutter project on Mac you just need your terminal and editor, we are going to use Visual Studio Code with Dart Code Plugin.

If you haven’t installed Flutter Framework, please follow this tutorial
How to install Flutter on Mac.

1) Open the terminal on your Mac and cd to the directory you want to create your Flutter project.

Type this flutter create ff_tutorial_2

ff_tutorial_2 is my project name, you can use whatever you want. Your terminal should print something like this.

Create your first Flutter project

2) Open the project with Visual Studio Code, if you have Dart Code plugin you should see running simulator or device name on the right-bottom of the editor.

Create your first Flutter project

 

3) Now open terminal again or use Visual Studio Code terminal and type this

flutter run

Your first Flutter project will run on the simulator.

Create your first Flutter project

How to install Flutter on Mac

Install Flutter by homebrew on Mac

If you are looking for instruction for Windows or Linux, please click here. To install flutter on Mac, please follow these instructions.

1)  Download Flutter Framework .zip from Flutter GitHub, make sure you are downloading beta branch. Take a look at this screenshot.

install flutter

2) Create a directory called flutter in your home directory or wherever you want, I usually put this in my packages directory. So it looks like this ~/packages/flutter.

3) Update your .bash_profile. Open with your text editor or nano ~/.bash_profile on the terminal.  Add this line

export PATH=/Users/YourUserName/packages/flutter/bin:$PATH

Replace YourUserName with your Mac user.

install flutter

Now open the terminal and type flutter, you should see the list of available commands. It means flutter is installed successfully on your Mac.

install flutter

But we are not finished yet, Mac needs few more stuff.

4) Now type flutter doctor on the terminal just like brew doctor. It will check for errors. Install all the required dependencies from Homebrew.

Now you are ready to go.


Newsletter Signup

Subscribe to our weekly newsletter below and never miss the latest product or an exclusive offer.