Search

Flutter First Application || Hello World in Flutter || Flutter Tutorial

Updated: Apr 27

In this article, we are going to see flutter first application or hello world program in flutter.

Before continue with our first program, we will recommend you to watch the below video to know, How to set flutter path & environment setup.


So, after the above video, now we are ready to go with our First Program in Flutter... But before that let's have a look on some basic terms used in flutter programming to understand more clearely.


.idea: This folder is at the very top of the project structure, which holds the configuration for Android Studio. It doesn't matter because we are not going to work with Android Studio so that the content of this folder can be ignored.


.android: This folder holds a complete Android project and used when you build the Flutter application for Android. When the Flutter code is compiled into the native code, it will get injected into this Android project, so that the result is a native Android application. For Example: When you are using the Android emulator, this Android project is used to build the Android app, which further deployed to the Android Virtual Device.


.ios: This folder holds a complete Mac project and used when you build the Flutter application for iOS. It is similar to the android folder that is used when developing an app for Android. When the Flutter code is compiled into the native code, it will get injected into this iOS project, so that the result is a native iOS application. Building a Flutter application for iOS is only possible when you are working on macOS.


.lib: It is an essential folder, which stands for the library. It is a folder where we will do our 99 percent of project work. Inside the lib folder, we will find the Dart files which contain the code of our Flutter application. By default, this folder contains the file main.dart, which is the entry file of the Flutter application.


.test: This folder contains a Dart code, which is written for the Flutter application to perform the automated test when building the app. It won't be too important for us here.

We can also have some default files in the Flutter application. In 99.99 percent of cases, we don't touch these files manually. These files are:


.gitignore: It is a text file containing a list of files, file extensions, and folders that tells Git which files should be ignored in a project. Git is a version-control file for tracking changes in source code during software development Git.


.metadata: It is an auto-generated file by the flutter tools, which is used to track the properties of the Flutter project. This file performs the internal tasks, so you do not need to edit the content manually at any time.


.packages: It is an auto-generated file by the Flutter SDK, which is used to contain a list of dependencies for your Flutter project.


flutter_demoapp.iml: It is always named according to the Flutter project's name that contains additional settings of the project. This file performs the internal tasks, which is managed by the Flutter SDK, so you do not need to edit the content manually at any time.


pubspec.yaml: It is the project's configuration file that will use a lot during working with the Flutter project. It allows you how your application works. This file contains:

  • Project general settings such as name, description, and version of the project.

  • Project dependencies.

  • Project assets (e.g., images).

pubspec.lock: It is an auto-generated file based on the .yaml file. It holds more detail setup about all dependencies.


README.md: It is an auto-generated file that holds information about the project. We can edit this file if we want to share information with the developers.



So, now we are all set to write our first program in flutter.

Step 1 : Open the main.dart file and replace the code with the following code snippets.



import 'package:flutter/material.dart';  
 
void main() => runApp(MyApp());  
 
class MyApp extends StatelessWidget {  
 // This widget is the root of your application. 
 @override 
  Widget build(BuildContext context) {  
 return MaterialApp(  
      title: 'Hello World Flutter Application',  
      theme: ThemeData(  
 // This is the theme of your application. 
        primarySwatch: Colors.blue,  
      ),  
      home: MyHomePage(title: 'Home page'),  
    );  
  }  
}  
class MyHomePage extends StatelessWidget {  
  MyHomePage({Key key, this.title}) : super(key: key);  
 // This widget is the home page of your application. 
 final String title;  
 
 @override 
  Widget build(BuildContext context) {  
 return Scaffold(  
      appBar: AppBar(  
        title: Text(this.title),  
      ),  
      body: Center(  
        child: Text('Hello World'),  
      ),  
    );  
  }  
}  

Now, Let's understand the above source code, step by step in detail.


  • To start flutter programming, all you need to import material dart package in our main.dart file. This package allows you to create user interface according to the Material design guidelines specified by Android.

  • The second line is an entry point of the Flutter applications similar to the main method in other programming languages like C, C++, Java. It calls the runApp function and pass it an object of MyApp The primary purpose of this function is to attach the given widget to the screen.

  • Line 5 to 18 is a widget used for creating UI in the Flutter framework. Here, the StatelessWidget does not maintain any state of the widget. MyApp extends StatelessWidget that overrides its build The build method is used for creating a part of the UI of the application. In this block, the build method uses MaterialApp, a widget to create the root level UI of the application and contains three properties - title, theme, and home.

  1. Title: It is the title of the Flutter application.

  2. Theme: It is the theme of the widget. By default, theme of all flutter applications is blue as the overall color of the application.

  3. Home: It is the inner UI of the application, which sets another widget (MyHomePage) for the application.

  • Line 19 to 35, the MyHomePage is similar to MyApp, except it will return the Scaffold Scaffold widget is a top-level widget after the MaterialApp widget for creating the user interface. This widget contains two properties appBar and body. The appBar shows the header of the app, and body property shows the actual content of the application. Here, AppBar render the header of the application, Center widget is used to center the child widget, and Text is the final widget used to show the text content and displays in the center of the screen.

Now Let's run our flutter program in using Android Emulator in Android Studio.

Finally we will get the output as shown in figure below/ image shown of emulator with output.



Hope you enjoy Learning.

Thanks for reading this article.


Next Topic - Flutter Architecture


Disclaimer: This content is proprietary to Fresher Side, this may contain confidential or privileged information. Any dissemination, use, review, distribution, printing or copying of this content is strictly prohibited.




10 views0 comments

Related Posts

See All
  • 1024px-Telegram_logo.svg
  • download
  • YouTube