Create First App: Flutter

In this blog we are going to learn how to create first app: flutter using android studio.

To create First App: flutter application, follow the steps:

  • Open the Android Studio in your system.
  • On opening Android Studio, you have to choose “Start new Flutter Project”.
  • Then select Flutter Application from below screen:
Create New Flutter Project
Create New Flutter Project
  • Further you need to fill following inputs:
  1. Project Name: Write your desired Application name.
  2. Flutter SDK Path: The flutter path where your flutter SDK folder exists
  3. Project Location: The folder location where you want to store the created Application
  4. Descriptions: Any description that shows a summary of your Application
Create New Flutter Application
Create New Flutter Application
  • In the next screen choose the company domain name for example techchia.com or for local projects you can give any domain name for example xyz.com
Add domain name
Add domain name
  • After that click finish. It will take some time to load the screen. On the other hand you will see the Application with minimum resources loaded on your screen
main.dart file of project
main.dart file of project

.idea: This folder contain all the configuration related to Android Studio.

.android: This folder contains the Android project information. It means when the flutter code is compiled into the native code, it will be included into the Android project. Therefore, the result will be native Android application. For example, when you create flutter project you need android Emulator to run the project. As a result, the code is deployed into Android Virtual Device that is AVD.

.ios: This is the same folder as the above folder but the difference is, this folder consists the iOS related information. In short if you are creating a flutter app for iOS you need macOS to run the project.

.lib: This is an important folder. lib is the short form of library. In this folder you can create, store and update files of your project. Folder consists the Dart extension files which are used for flutter application. It contains main.dart file which is important and must not be deleted. In conclusion main.dart is an entry point of your project. So whenever you create a project this folder will have main.dart by default in it.   

.test: This folder contains the Dart code. This code helps the flutter application to execute the test code while building the app.

.gitignore: This file contains the list of other files, file extensions, and also it inform to Git that which files must be ignored into a project. During software development Git this file maintain the version changes and related information.   

.metadata: This file is auto-generated by the flutter tools. On other hand it is used to track the attributes of the flutter project. This file also does the internal tasks, so that developer need not to update manually every time.

.packages: Similarly, this file is also auto-generated by the flutter tools. This file list of dependencies created in you project.

.flutter_demoapp.iml: When we create project this file is auto-generated with the similar name that we have given to our project, but it also holds the extra settings of the project. In the same vein the .metadata contains the internal task, this file also does the same process.

pubspec.yaml: This file holds the project’s configuration. Importantly this file we are going to use many times while working on the project. It gives the permission for how you project should work. In addition, it contains project usual settings like name, version and the description of your project. Moreover, it also contains the dependencies and assets of your project

pubspec.lock: It is also a auto-generated file which has a .yaml extension. But it contains more deep information regarding all the dependencies in the project.

README.md: It is simply auto-generated file which can be edited, if we want to share data with the developers.

If you want to have a look to flutter with the layer approach you can see: Flutter architecture and libraries.

Further, we shall see code in the main.dart file create First App : Flutter.

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'),
      ),
    );
  }
}

Explanation of Above Code:

  • Above all the code the first line of the file must be import statement of flutter package.
  • In other programming languages we use main method as an entry point. Similarly, in second row of the above code is an entry point of Flutter application. In addition, it calls runApp function and contains an object of MyApp. Importantly this function attaches the given widget to the app screen.
  • Line number 15 to 18 code is a widget code that helps to create UI in flutter framework. In above example StatelessWidget is used. This widget is state less, it means it does not maintain the state of used widget. On the other hand, MyApp extends StatelessWidget that overrides its build method. The build method helps for creating the part of the UI of the application. In this part of code, the build method applies MaterialApp. It’s a widget that create a base level UI of the application and consists three main attributes:
  1. Title: It contains the title name of the flutter application
  2. Theme: It is the theme that is applied to the widget. By default, it is set to blue for whole application
  3. Home: This is an inner UI that sets another widget (MyHomePage) for our application.
  • Line number 19 to 35 contains MyHomePage. It is same as MyApp, but it has a return value and in return value it will return Scaffold. Scaffold is a top-most widget next to the MaterialApp widget for creating UI. Scaffold contains two attributes firstly appBar and secondly body
  1. appBar: It shows the heading of the app
  2. body: It shows the content of the application

Other than this it contains Centre widget and Text widget

  1. Centre: It structures the child widgets in the centre of screen.
  2. Text: It is to show the content of text in the middle of screen.

All above code is now set and the now we have to run the code for our desire output. To
do this go to Run->Run main.dart. As the below screen shows:

Run menu
Run menu

After that you will see the out as the below screen as output:

create First App: flutter
local_offerevent_note December 17, 2020

account_box Aishwarya

Leave a Reply

Your email address will not be published.