1. Flutter
  2. Flutter Basics
  3. Building Your First Flutter App

Now that you have Flutter installed and your development environment set up, it's time to build your very first Flutter app! In this guide, we'll walk through the steps to create a simple, functional Flutter app that displays "Hello, World!" on the screen. Along the way, you’ll get familiar with the key Flutter concepts, such as widgets, the app structure, and how to run your app on an emulator or physical device.

Step 1: Create a New Flutter Project

To get started, you need to create a new Flutter project. Open your terminal or command prompt and follow these steps:

  1. Open your terminal or command prompt and navigate to the directory where you want to store your Flutter projects.

  2. Run the following command to create a new Flutter app:

    bash

    Copy code

    flutter create hello_world

    This will generate a project folder called hello_world, containing all the necessary files and directories for your Flutter app.

  3. Navigate into the newly created project folder:

    bash

    Copy code

    cd hello_world

Step 2: Understand the Flutter Project Structure

Once your project is created, take a moment to look at the structure of your Flutter project. Here are the important parts:

  • lib/main.dart: This is the main entry point for your Flutter app. The majority of your code will go here.
  • pubspec.yaml: The configuration file for your Flutter app. This is where you manage dependencies, assets, and project metadata.
  • android/ and ios/: These directories contain platform-specific code for Android and iOS.

For now, focus on lib/main.dart, where you will write the code for your first app.

Step 3: Open the Project in Your IDE

Open the hello_world folder in your preferred IDE. If you're using Visual Studio Code (VS Code) or Android Studio, make sure you have the Flutter and Dart plugins installed to enable syntax highlighting, code completion, and debugging.

Step 4: Modify main.dart

  1. Open the lib/main.dart file in your IDE. This file contains a default Flutter app template.

  2. Replace the existing code with the following simple code for your "Hello, World!" app:

    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, Flutter!'),
        ),
        body: Center(
          child: Text(
            'Hello, World!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Explanation:

  • runApp: This function initializes the Flutter framework and runs the app. It takes the root widget of the app as an argument, which in this case is MyApp.
  • MaterialApp: This widget is the root of the app and provides several material design elements, including navigation, themes, and scaffolding.
  • Scaffold: This widget creates the basic structure of the app, including an AppBar and body. It’s one of the most commonly used layout widgets in Flutter.
  • Center: The Center widget centers its child widget within the available space.
  • Text: Displays a string of text on the screen. In this case, it’s the text "Hello, World!" styled with a font size of 24.

Step 5: Run the App

  1. Select a Device: Before running the app, make sure you have an Android emulator or iOS simulator set up, or you can use a physical device connected to your computer.
    • To check if your device is ready, run flutter devices in your terminal.
    • If you don’t have a device set up, you can open Android Studio and use the AVD Manager to create an Android Emulator.

  2. Run the app:

    • In VS Code: Press F5 or go to the Run menu and select Start Debugging.
    • In Android Studio: Click the Run button in the toolbar or press Shift + F10.

    Your app will build and launch, displaying a screen with "Hello, World!" centered on it.

Step 6: Explore the App

Now that your first app is up and running, let’s make a few simple adjustments and explore how Flutter works:

Change the Text:

Change the text inside the Text widget to something else, like "Welcome to Flutter!" and save the file. The app will automatically update (thanks to Flutter’s hot reload) and show the new text.

Customize the Text Style:

You can also modify the style of the text by changing the properties of the TextStyle. For example:

Text(
  'Hello, World!',
  style: TextStyle(
    fontSize: 30,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

This will make the text larger, bold, and change its color to blue.

Step 7: Experiment with Layout Widgets

Flutter uses a wide range of widgets to arrange elements on the screen. To try this out, replace the Center widget with a Column or Row to position multiple widgets vertically or horizontally.

Example: Using Column to stack widgets vertically:

body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Text('Hello, World!', style: TextStyle(fontSize: 24)),
    SizedBox(height: 20),
    Text('Welcome to Flutter!', style: TextStyle(fontSize: 24)),
  ],
)

In this example:

  • The Column widget arranges the text widgets vertically.
  • SizedBox(height: 20) adds space between the two Text widgets.

Step 8: Final Touches

Once you’ve made your changes, test your app again on different devices or emulators to ensure it looks good across various screen sizes.

 

Congratulations on building your first Flutter app! You’ve learned how to create a simple app with Flutter, how to work with basic widgets like Text, Column, and Scaffold, and how to run your app on a device or emulator. This foundational knowledge will allow you to start exploring more complex concepts in Flutter, such as state management, navigation, and custom widgets.

The power of Flutter lies in its ability to build beautiful, high-performance apps for iOS and Android from a single codebase. With more practice, you’ll be able to create more advanced and feature-rich applications. Keep experimenting, and happy coding!

Previous
Next