Flutter Basic Template | Flutter basic program | Flutter default program

Flutter Basic Program

To run basic flutter template or run simple flutter app

Step 1. Create a Flutter Project:

   – Open your terminal or command prompt.

   – Navigate to the directory where you want to create your Flutter project.

   – Run the following command to create a new Flutter project:

   flutter create my_first_flutter_app

   – Replace “my_first_flutter_app” with the desired name for your project.

Step 2. Open Project in VSCode/Android Studio:

   – Open VSCode/Android studio.

   – Click on “Open Folder” and select the folder where you created your Flutter project.

Step 3: Explore Project Structure:

   – In the VSCode/Android studio Explorer, you’ll see the structure of your Flutter project. Key directories include:

     – `lib`: Contains your Dart code.

     – `test`: Contains your test files.

     – `android` and `ios`: Contain native code for Android and iOS platforms.

Step 4: Explore `lib/main.dart`:

   – Open the `lib/main.dart` file. This is the entry point for your Flutter app.

   – By default, it contains a simple “Increment” Flutter app.

Step 5.: Run the App:

   – Connect a device or start an emulator.

   – In VSCode/Android studio, press `F5` or click on the “Run” button in the top menu to build and run your app.

   – Alternatively, you can run the following command in the terminal:

flutter run

Step 6. Observe the Output:

   – Your app should launch on the connected device or emulator.

   – Observe the “Hello World” message in the app.

Step 7. Experiment with Hot Reload:

   – Make changes to the text in `lib/main.dart`.

   – Save the file (`Ctrl + S` or `Cmd + S`).

Flutter Basic Program

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('My First Flutter App'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}


Explanation:-

import 'package:flutter/material.dart';

Imports the necessary Flutter packages. material.dart contains the Material Design widgets used to build the UI.

void main() { 

runApp(MyApp());

 }

The main() function is the entry point of the Dart program. It calls the runApp() function, which takes an instance of the MyApp widget and starts the Flutter app.

class MyApp extends StatelessWidget {

Defines a new class named MyApp that extends StatelessWidget. In Flutter, the user interface is constructed using widgets, and StatelessWidget is a widget that does not depend on any mutable state.

@override
Widget build(BuildContext context) {

The build method is a required method in any widget. It describes the part of the user interface represented by this widget. It returns a tree of widgets that Flutter will then build in the UI.

return MaterialApp(

The MaterialApp widget is a top-level widget that configures the MaterialApp for the app. It provides several core features of Material Design.

home: Scaffold(

The Scaffold widget is a basic skeletal structure for a page. It provides the structure of the visual interface, including an app bar, body, and other elements.

appBar: AppBar(
  title: Text('My First Flutter App'),
),

The AppBar widget represents the top app bar. It typically contains the app’s title and other action items.

body: Center(
  child: Text('Hello, Flutter!'),
),

The body property of the Scaffold widget represents the main content of the screen. In this case, it contains a centered text widget displaying “Hello, Flutter!“

The app is run with flutter run, and you will see a simple Flutter app with an app bar and a centered text message.