Lesson 1: Introducing Flutter & Dart

Flutter & Dart: From Basics to Advanced

Part 1: Dart & Flutter Fundamentals

xdev.asia

1. What is Flutter?

Flutter is Google's UI toolkit, allowing you to build natively compiled applications on mobile, web and desktop from a single codebase. Flutter uses Skia engines to render directly to the canvas, without relying on native widgets.

Framework	Engine	Language	Advantages
Flutter	Skia/Impeller	Dart	60fps, pixel-perfect UI
React Native	Native Bridge	JavaScript	Large JS ecosystem
Kotlin Multiplatform	Native	Kotlin	Shared business logic

2. Install Flutter

# macOS
brew install --cask flutter

# Kiểm tra
flutter doctor
flutter --version

# Tạo project mới
flutter create my_app
cd my_app
flutter run

3. First application

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(
      title: 'My App',
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Xin chào Flutter!')),
      body: const Center(
        child: Text('Hello World', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

4. Project structure

my_app/
├── lib/
│   └── main.dart
├── test/
├── android/
├── ios/
├── web/
├── pubspec.yaml      # Dependencies
└── analysis_options.yaml

Next article: Dart Language Deep Dive.