1.Installing Required Software
a. Installing Flutter SDK
Download Flutter SDK:
Go to Flutter's official website: Flutter SDK.
Download the Flutter SDK appropriate for your operating system.
Installation:
Windows: Extract the downloaded ZIP file to a directory of your choice (e.g., C:\src\flutter).
macOS: Use the terminal to extract the ZIP file and add flutter/bin to your PATH.
Linux: Extract the ZIP file and add the flutter/bin directory to your PATH.
Setting PATH:
After setting the PATH, check if Flutter SDK is installed by typing flutter in the terminal/command prompt.
b. Installing Android Studio and Android SDK
Flutter supports development for both Android and iOS platforms, so you’ll also need to install Android Studio.
Download and install Android Studio from here.
Complete Android SDK and Android Emulator installations from Android Studio’s "SDK Manager" section.
c. Xcode for iOS Development (macOS Only)
If you’re on macOS, download and install Xcode from the App Store for iOS development.
Once Xcode is installed, configure it by running the following command in the terminal: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer.
iOS simulators can also be installed within Xcode.
d. Development Environment with VS Code or Android Studio
Optionally, you can use VS Code. Download and install VS Code.
Install the Flutter and Dart extensions.
Alternatively, you can use Android Studio, which also works with the Dart and Flutter plugins.
e. Checking with Flutter Doctor
Type flutter doctor in the terminal or command prompt to check if the Flutter setup is complete. Flutter Doctor will notify you of any missing components.
2.Creating a New Flutter Project
Creating a New Project in Terminal:
Open a terminal or command prompt and run the following command:
flutter create hello_world
This command will create a new Flutter project named hello_world.
Navigating to the Project Directory:
Navigate to the project directory:
cd hello_world
Opening the Project in a Code Editor:
You can open the project in VS Code or Android Studio. If using VS Code:
code .
Running Your First Flutter App
a. Default Flutter "Counter" Demo Application
Flutter automatically creates a "Counter" demo application, a simple app that increments a counter each time you press a button.
b. Running the Application
Starting an Android Emulator or iOS Simulator:
Start a virtual device (emulator) in Android Studio or Xcode. To see a list of devices in the terminal, type:
flutter devices
Running the Application:
Run the Flutter application with the following command:
flutter run
Your app will run on the selected device.
4.Creating Your First "Hello World" Application
To quickly create a "Hello World" app in Flutter, follow these steps:
Editing the Code:
Open lib/main.dart and replace its contents with the following code:
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 App'),
),
body: Center(
child: Text('Hello, World!'),
),
),
);
}
}
This code creates a simple app displaying "Hello, World!" at the center of the screen.
Running the Application Again:
Run the app in the terminal with:
flutter run