Discover what Flutter and Dart are, install the tools, create your first project, and experience the magic of hot reload.
Open this lesson in KodokonFlutter is a framework: a big toolbox of ready-to-use code, created by Google to build mobile applications, meaning the programs you install on a phone. Its great strength: you write your code only once, and it works on iPhone, Android, the web, and even desktop. That code is written in Dart, a programming language: a set of words and rules that let you give instructions to a machine. To install Flutter, follow the official guide at docs.flutter.dev (the Get started section): there you'll download the SDK (Software Development Kit, the kit that contains all the tools) and install a code editor such as Visual Studio Code with its Flutter extension. You then verify everything in the terminal: a window in which you type text commands to control your computer.
flutter doctorThe flutter doctor command acts like a doctor: it examines your machine and displays a checklist, with a green check for what's ready and a cross for what's missing, along with instructions to fix it. Once the essentials are green, you can create your first project: the folder that will hold all the code of your app. A Flutter project name is written in lowercase, without spaces or accents, using underscores (_) to separate words.
flutter create my_first_app
cd my_first_app
flutter runflutter create builds a my_first_app folder containing a complete demo app. cd (change directory) moves into that folder, and flutter run compiles then launches the app on a phone connected via USB, on an emulator (a virtual phone shown on your screen), or in the Chrome browser. All the code you write lives in the lib/main.dart file. Replace its contents with this minimal program:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const Scaffold(
body: Center(
child: Text("Hello Flutter!"),
),
),
);
}
}Let's read the broad strokes, without trying to master everything: import loads Flutter's graphical toolbox, void main() is the entry point (the very first function that runs), and runApp starts the app by displaying the text "Hello Flutter!" in the center of the screen. Each piece will be detailed in the coming lessons. Now for the magic of hot reload: change the message text, save the file... and the displayed app updates instantly, without restarting. This ultra-short cycle is one of Flutter's great strengths.