Hello World app in Flutter

 Hello World App in Flutter

In Flutter, everything is a Widget, and by using predefined widgets, one can create user-defined widgets just like using int, float, and double can create user-defined data types. In Flutter there are three types of widgets.

Let's create a "Hello World" app in Flutter step-by-step:

1. Set up your Flutter Environment (If you haven't already):

• Install Flutter SDK:
  • Download the Flutter SDK from the official Flutter website (flutter.dev).
  • Follow the installation instructions for your operating system (Windows, macOS, Linux).
• Install an IDE (Integrated Development Environment):
  • Android Studio (recommended for Android development).
  • VS Code (with the Flutter extension).
• Configure your IDE:
  • Install the Flutter and Dart plugins for your chosen IDE.
  • Run flutter doctor in your terminal to check for any missing dependencies or configuration issues.

2. Create a New Flutter Project:

• Using the Command Line:
  • Open your terminal or command prompt.
  • Navigate to the directory where you want to create your project.  
  • Run the following command:
    Bash

    flutter create hello_world
  • Replace hello_world with your desired project name.
• Using your IDE:
  • In Android Studio or VS Code, use the "New Flutter Project" option.
  • Follow the prompts to configure your project.

3. Open the Project:

• Using the Command Line:
  • Navigate to the project directory:
    Bash

    cd hello_world
    

  • open with your ide.
• Using your IDE:
  • Open the project in Android Studio or VS Code.

4. Modify the main.dart File:

• Navigate to the lib folder and open the main.dart file.
• Replace the existing code with the following:

Dart

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 World'),
        ),
        body: Center(
          child: Text(
            'Hello World!',
            style: TextStyle(fontSize: 24.0),
          ),
        ),
      ),
    );
  }
}

5. Run the App:

• Connect a Device or Emulator:
  • Connect an Android or iOS device to your computer.
  • Or, start an Android emulator or iOS simulator.
• Run the App:
  • Using the Command Line:
    Bash

    flutter run
    

  • Using your IDE:
    • Click the "Run" button in Android Studio or VS Code.

Explanation of the Code:

• import 'package:flutter/material.dart';: Imports the Flutter Material Design library, which provides UI components.
• void main() { runApp(MyApp()); }: The entry point of the app. It calls runApp() to start the application.
• class MyApp extends StatelessWidget: Creates a stateless widget, which is the root of the app.
• MaterialApp: Sets up the app's basic structure and theme.
• Scaffold: Provides a basic layout structure with an app bar and body.
• AppBar: Creates the app bar at the top of the screen.
• Center: Centers the Text widget in the body.
• Text: Displays the "Hello World!" message.
• TextStyle: Defines the style of the text (e.g., font size).

You'll now see "Hello World!" displayed on your device or emulator!