Meet Flutter & Dart

Real-world analogy

What is it?

Flutter is Google's free toolkit for building beautiful, fast apps for mobile, web, and desktop from a single codebase. Dart is the programming language Flutter uses. Together, they let you write code once and deploy it everywhere -- Android, iOS, web, Windows, Mac, and Linux.

Real-world relevance

Companies like Google, BMW, Alibaba, eBay, and Toyota use Flutter for their apps. Flutter developers are in high demand because companies love that one team can build for ALL platforms. Learning Flutter opens doors to mobile, web, and desktop development all at once.

Key points

• What is Dart? — Dart is a programming language created by Google. It is modern, fast, and easy to learn. Dart is the language you write your code in -- it handles all the logic, data, and rules of your app. Think of Dart as the brain of your app.
• What is Flutter? — Flutter is a toolkit (framework) created by Google for building beautiful apps. It gives you ready-made building blocks called 'widgets' -- buttons, text, images, layouts. You snap them together like LEGO blocks to build your app's user interface.
• Cross-Platform Magic — Write your code ONCE in Flutter, and it runs on Android, iOS, Web, Windows, Mac, and Linux. Before Flutter, you had to write separate code for each platform. That is like writing the same book 6 times in 6 languages -- Flutter lets you write it once!
• Widgets - Everything is a Widget — In Flutter, EVERYTHING you see on screen is a widget. A button is a widget. A text is a widget. A list is a widget. Even the whole app is a widget! Widgets are like LEGO blocks -- small pieces that snap together to build amazing things.
• Hot Reload - Instant Changes — Hot Reload is Flutter's superpower. When you change your code, you see the result on your phone or emulator INSTANTLY -- in less than a second! No waiting, no restarting. It is like magic. This makes building apps super fast and fun.
• Dart vs Other Languages — Dart is similar to Java, JavaScript, and C#, so if you know any of those, Dart feels familiar. But Dart is simpler and more modern. It was designed specifically to build fast user interfaces, which is why Flutter chose it.
• The Flutter Community — Flutter has millions of developers worldwide. There are thousands of free packages (pre-built code) you can use, a huge community on Discord, Reddit, and YouTube, and Google actively maintains it. You are never alone when learning Flutter!
• What You Will Build — In this course, you will go from zero to building professional Flutter apps. You will learn Dart, widgets, navigation, state management with BLoC, clean architecture, API calls, local storage, Firebase, and more. By the end, you can build any app you imagine!
• DartPad - Try Without Installing — DartPad is a free online editor where you can write and run Dart code right in your browser -- no installation needed! It is perfect for practicing while you learn. Just go to dartpad.dev and start coding.

Code example

// Your first look at a Flutter app structure
import 'package:flutter/material.dart';

void main() {
  // runApp starts your Flutter application
  runApp(const MyApp());
}

// Every Flutter app is built from widgets
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Hello Flutter!'),
        ),
        body: const Center(
          child: Text(
            'Welcome to Flutter!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Line-by-line walkthrough

1. 1. We import Flutter's material design library -- this gives us all the widgets
2. 2.
3. 3. The main() function is where EVERY Dart and Flutter app starts
4. 4. runApp() tells Flutter to start displaying our app on screen
5. 5.
6. 6. A comment explaining Flutter apps are made of widgets
7. 7. MyApp is a widget class that extends StatelessWidget (does not change)
8. 8. The constructor with super.key (required boilerplate)
9. 9.
10. 10. The @override annotation says we are providing our own version of build
11. 11. The build method returns what this widget looks like on screen
12. 12. Opening the return statement
13. 13. MaterialApp is the root widget -- sets up Material Design styling
14. 14. Setting the app title to 'My First App'
15. 15. Scaffold provides the basic visual structure (app bar + body)
16. 16. AppBar creates the top navigation bar
17. 17. Setting the AppBar title to 'Hello Flutter!'
18. 18. Closing the AppBar
19. 19. The body is the main content area of the screen
20. 20. Center widget places its child in the middle of the screen
21. 21. Text widget displays 'Welcome to Flutter!'
22. 22. TextStyle sets the font size to 24
23. 23. Closing the Center, body, Scaffold, MaterialApp, and return

Spot the bug

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Text('Hello');
  }
}

Explain like I'm 5

Fun fact

Hands-on challenge

More resources

• Flutter Official Website (Flutter Official)
• Dart Language Overview (Dart Official)
• DartPad Online Editor (Dart Official)