Hello Flutter

This first lesson will teach us how to get started with the Flutter framework.

Projects

1. Hello Flutter

Head over to Dartpad and create a New Pad and choose Flutter. Clear everything in the editor and paste the following code.

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, Flutter!',
        style: TextStyle(color: Color(0xffffffff)),
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

2. Install Flutter

Head over to Flutter Installation guide, choose your operating system, and follow the instructions to install Flutter on your machine. Use flutter doctor command to verify that everything is setup correctly.

3. Install Visual Studio Code and Flutter Extension

Head over to Visual Studio Code and download the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, install the Flutter extension from the Visual Studio Marketplace.

4. Hello Again Flutter

Create new Flutter project in Visual Studio Code. Open the main.dart file and replace the code with the following code. Now run the code in web and desktop (also on mobile if you have Android or iOS setup)

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'Hello, Flutter!',
        style: TextStyle(color: Color(0xffffffff)),
        textDirection: TextDirection.ltr,
      ),
    ),
  );
}

Resources