Installation of Flutter

System Requirements

• Operating System: Windows, macOS, or Linux.
• Disk Space: ~2 GB (not including space for IDEs).
• Tools: Git must be installed on your system.

Installation Steps

Windows

>Download Flutter SDK:

• Go to the Flutter website.
• Download the latest flutter_windows_<version>-stable.zip.

Extract the ZIP File:

• Extract the file to a directory, e.g., C:\src\flutter.

Add Flutter to Path:

• Open System Properties.
• Go to Environment Variables and edit the "Path".
• Add C:\src\flutter\bin.

Install Git:

• If Git is not installed, download it from Git SCM.

Run Flutter Doctor:

• Open a terminal and run flutter doctor.

macOS

1. Download Flutter SDK:
   • Go to the Flutter website.
   • Download the latest flutter_macos_<version>-stable.zip.
2. Extract the ZIP File:
   • Extract it to a directory, e.g.,~/development/flutter.
3. Update Path:
   • Open or create the ~/.zshrc or ~/.bash_profile file.
   • Add this line:

     
     export PATH="$PATH:`pwd`/flutter/bin"
     

   • Save the file and run:

     
     source ~/.zshrc
     

Install Flutter SDK on Linux

1. Download Flutter SDK:

   Go to the >Flutter website and download the latest flutter_linux_<version>-stable.tar.xz.

2. Extract the Tar File:

   Run the following command in your terminal:

   Move it to a desired location, e.g., ~/development/flutter.

3. Update Path:

   Open or create the ~/.bashrc or ~/.zshrc file and add this line:

   export PATH="$PATH:`pwd`/flutter/bin"

   Save the file and run:

   source ~/.bashrc

4. Install Required Packages:

   Run the following command to install necessary dependencies:

   
   sudo apt-get install 
   curl git unzip 
   xz-utils libglu1-mesa
   

5. Run Flutter Doctor:

   Verify your setup by running:

   flutter doctor

Set Up an IDE for Flutter Development

1. Install an Editor for Flutter Development:
   • Android Studio:
     1. Install Android Studio from its official website: Download Android Studio.
     2. Open Android Studio, go to File → Settings → Plugins.
     3. Search for and install the Flutter and Dart plugins.
   • VS Code:
     1. Install Visual Studio Code from its official website: Download VS Code.
     2. Open VS Code and navigate to the Extensions Marketplace.
     3. Search for and install the Flutter and Dart extensions.

Flutter Setup Instructions

1. Install Flutter and Dart Plugins

1. Open Android Studio.
2. Navigate to File → Settings → Plugins (on macOS: Android Studio → Preferences → Plugins).
3. Search for Flutter in the plugin marketplace and click Install.
4. It will prompt to install the Dart plugin as well. Confirm and install it.
5. Restart Android Studio.

2. Create a New Flutter Project

1. Open Android Studio.
2. Click on File → New → New Flutter Project.
3. In the "New Flutter Project" window:
   • Project Type: Select Flutter Application.
   • Flutter SDK Path: Provide the path where Flutter SDK is installed.
   • Project Name: Enter your project name (e.g., simple_app).
   • Project Location: Choose your desired directory.
4. Click Finish to create the project.

1. Open Android Studio.
2. Click on File → New → New Flutter Project.
3. In the "New Flutter Project" window:
   • Project Type: Select Flutter Application.
   • Flutter SDK Path: Provide the path where Flutter SDK is installed.
   • Project Name: Enter your project name (e.g., simple_app).
   • Project Location: Choose your desired directory.
4. Click Finish to create the project.
5. Replace the default code in lib/main.dart with the following code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Flutter App'),
        centerTitle: true,
      ),
      body: Center(
        child: Text(
          'Hello, Flutter!',
          style: TextStyle(
            fontSize: screenWidth * 0.06, 
            fontWeight: FontWeight.bold,
          ),
          textAlign: TextAlign.center,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('Button Pressed!');
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

  

6. Save the file and run the project using flutter run or the run button in Android Studio.
7. When the app runs, you will see the text "Hello, Flutter!" displayed in the center of the screen with a floating action button below.