Your First Flutter App: "Hello, World!"

Welcome to the exciting world of Flutter! This module will guide you through creating your very first Flutter application, a classic "Hello, World!" program. This foundational step will introduce you to the basic structure of a Flutter app and how to display text on the screen.

Understanding the Flutter App Structure

A typical Flutter app is built using a tree of widgets. Widgets are the building blocks of your UI. Even the simplest app has a root widget that defines the overall structure. For a "Hello, World!" app, we'll focus on a few key widgets.

Every Flutter app needs a `main()` function.

The main() function is the entry point of your Dart application. In Flutter, it typically calls runApp() to start your UI.

The main() function is the starting point for any Dart program. When you run a Flutter app, the Dart runtime executes the code within the main() function first. In Flutter, this function is responsible for initializing the application and telling it which widget to display as the root of the widget tree. This is achieved by calling the runApp() function, passing it the root widget of your application.

`MaterialApp` is a convenience widget that wraps a number of widgets that are commonly required for material design applications.

MaterialApp provides essential features like navigation, theming, and app bar support, making it a great starting point for most Flutter apps.

The MaterialApp widget is a fundamental part of most Flutter applications. It's a convenience widget that wraps several other widgets, providing common functionalities required for Material Design applications. This includes things like navigation (routing), theming (defining the app's color scheme and typography), and the ability to display an AppBar (the bar at the top of the screen). By using MaterialApp, you get a lot of boilerplate code handled for you, allowing you to focus on building your UI.

The

code

Text

widget is one of the most basic and frequently used widgets in Flutter. It's used to display a string of text on the screen. You can customize its appearance with properties like

code

style

The Scaffold widget provides a basic visual structure for your app's screens. It implements the basic Material Design visual layout structure. It includes features like an AppBar, body, FloatingActionButton, and Drawer. The body property is where you place the main content of your screen, such as our Text widget.

📚

Text-based content

Library pages focus on text content

Here's how you combine these widgets to create a "Hello, World!" app:

dart

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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;
  @override
  State createState() => _MyHomePageState();
}
class _MyHomePageState extends State
{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: const Center(
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

What is the primary function of the main() function in a Flutter app?

It's the entry point of the application and calls runApp() to start the UI.

Which widget is commonly used as the root of a Material Design Flutter app?

MaterialApp

What widget is used to display text on the screen in Flutter?

The Text widget.

The Center widget is used here to horizontally and vertically center the 'Hello, World!' text within the screen's body.

Learning Resources

Flutter Docs: Your first Flutter app(documentation)

This official Flutter codelab walks you through building your first Flutter app step-by-step, covering the essential concepts.

Flutter Docs: Widgets 101(documentation)

An introduction to Flutter's widget system, explaining the core concepts of stateless and stateful widgets.

Flutter Docs: The `MaterialApp` widget(documentation)

Detailed documentation for the `MaterialApp` widget, explaining its properties and purpose in Flutter applications.

Flutter Docs: The `Text` widget(documentation)

Comprehensive documentation for the `Text` widget, including how to style and format text.

Flutter Docs: The `Scaffold` widget(documentation)

Learn about the `Scaffold` widget, which provides a standard Material Design visual structure for your app's screens.

Flutter by Example: Hello World(blog)

A clear and concise explanation of how to create a 'Hello, World!' app in Flutter with code examples.

YouTube: Flutter Tutorial for Beginners - 1 - Hello World(video)

A beginner-friendly video tutorial that guides you through creating your first Flutter 'Hello, World!' application.

Udemy: Complete Flutter Development Bootcamp with Dart(tutorial)

A comprehensive course that covers Flutter fundamentals, including building your first app, from beginner to advanced.

DartPad: Online Dart Editor(tutorial)

An online editor where you can experiment with Dart and Flutter code directly in your browser without any setup.

Wikipedia: Flutter (software)(wikipedia)

An overview of Flutter, its history, features, and its role in cross-platform application development.

Your First Flutter App: "Hello, World!"

Your First Flutter App: "Hello, World!"

Understanding the Flutter App Structure

Every Flutter app needs a `main()` function.

`MaterialApp` is a convenience widget that wraps a number of widgets that are commonly required for material design applications.

Displaying Text with `Text` Widget

Learning Resources