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.