Flutter First Application | For Beginners

Nawazish Hussain


In this section, we'll learn how to create a simple application in Android Studio and VS Code so that we may understand the fundamentals of the Flutter application. Here we will discuss simple application in Android Studio and VS Code with the help of snapshots.

VS Code

Step 1: Open the VS Code.

Step 2: Create the Flutter project. Go to View > Command Palette….New Flutter Project. To better understand it, view the screen below.

Step 3: In the next wizard, you need to choose the Flutter Application. For this, select Flutter: New Project  > click, as shown in the below screen.

Step 4: In the next wizard, select Application  > click, as shown in the below screen

Step 5: In the next wizard, select Folder (where you want to save the application/project) > click, as shown in the below screen.


Step 6: Select name for you project (in my case flutter_application_1)  > click Enter.


Step 7: Now you have successfully create your default project which is simple counter.

Step 8: You can run your on different platforms.

1.    Window

2.    Chrome

3.    Emulator

Choose on platform to run your project in my case I choose emulator because I have created emulator if you have not create then you can select chrome.

Step 9: Run your project, select Run>Run without Debugging, click Enter.


OUTPUT




Android Studio

Do the following actions to develop a Flutter application:

Step 1: Open the Android Studio.

Step 2: Create the Flutter project. Go to File  >  New  > New Flutter Project. To better understand it, view the screen below.

Step 3: In the next wizard, you need to choose the Flutter Application. For this, select Flutter Application  >  click Next, as shown in the below screen.

Step 4: Next, configure the application details as shown in the below screen and click on the Next button.

Project Name: Write your Application Name. e.g. Meta Developers.

Flutter SDK Path: <path_to_flutter_sdk>

Project Location: <path_to_project_folder e.g c:\\flutter project\metaDevelopers>

Descriptions: <A new Flutter hello world application>.

Step 5:  After clicking the Finish button, it will take some time to create a project. When the project is created, you will get a fully working Flutter application with minimal functionality. This Demo application by default created for you.

 

Step 6: This step is not important for beginners without know you can develop projects. Let's now examine the Flutter project application's structure and goal. The many folders and parts of the Flutter application structure, which will be covered in this article, are shown in the graphic below.

.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: When you create the Android version of the Flutter application, this folder contains the whole Android project. The Flutter code will be injected into this Android project once it has been converted to native code, resulting in a native Android application. For instance: This Android project is used to create the Android app, which is then deployed to the Android Virtual Device, while using the Android emulator.

.ios: This folder contains a finished Mac project that is used to create the Flutter iOS application. It is comparable to the android folder used when creating an Android app. The Flutter code will be injected into this iOS project once it has been converted to native code, resulting in a native iOS application. Only when working on macOS is it feasible to create a Flutter application for iOS.

.lib: It is a crucial folder that represents the library. We will complete 99 percent of the project work in this folder. The Dart files that comprise the code for our Flutter application are located in the lib folder. The entry file for the Flutter application, main.dart, is by default present in this folder.

.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 a file that the flutter tools automatically create and uses to keep track of the attributes of the Flutter project. You never need to manually modify the content because this file handles all internal tasks.

.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.

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

  1. import 'package:flutter/material.dart';  
  2.   
  3. void main() => runApp(MyApp());  
  4.   
  5. class MyApp extends StatelessWidget {  
  6.   // This widget is the root of your application.  
  7.   @override  
  8.   Widget build(BuildContext context) {  
  9.     return MaterialApp(  
  10.       title: 'Hello World Flutter Application',  
  11.       theme: ThemeData(  
  12.         // This is the theme of your application.  
  13.         primarySwatch: Colors.blue,  
  14.       ),  
  15.       home: MyHomePage(title: 'Home page'),  
  16.     );  
  17.   }  
  18. }  
  19. class MyHomePage extends StatelessWidget {  
  20.   MyHomePage({Key key, this.title}) : super(key: key);  
  21.   // This widget is the home page of your application.  
  22.   final String title;  
  23.   
  24.   @override  
  25.   Widget build(BuildContext context) {  
  26.     return Scaffold(  
  27.       appBar: AppBar(  
  28.         title: Text(this.title),  
  29.       ),  
  30.       body: Center(  
  31.         child: Text('Hello World'),  
  32.       ),  
  33.     );  
  34.   }  
  35. }  

 

Step 8: Let us understand the above code snippet line by line.

  • To start Flutter programming, you need first to import the Flutter package. Here, we have imported a Material package. 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. 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, it set the 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.

Step 9: Now, run the application. To do this, go to Run->Run main.dart, as shown in the below screen.

Step 10: Finally, you will get the output as below screen.



                                                                                


0 Comments