Creating a Simple Application in Flutter

Flutter is an open-source cross-platform mobile application development SDK created by Google. It is highly user-friendly and builds high-quality mobile applications. The intention behind this article is to guide readers about the process of building an application through flutter by creating a simple Flutter App on Android Studio. To start creating a Flutter application we have to first create a flutter project and many other things, for that follow the steps mentioned below:

Step 1: Open the Android Studio IDE and select Start a new Flutter project.

creating a new project

Step 2: Select the Flutter Application as the project type. Then click Next.

selecting the application builder



Step 3: Verify the Flutter SDK path specifies the SDK’s location (select Install SDK… if the text field is blank).

Step 4: Enter a project name (for example, myapp). Then click Next.

naming the application

Note:
1. Project name: flutter_app
2. Flutter SDK Path: <path-to-flutter-sdk>
3. Project Location: <path-to-project-folder>
4. Description: Flutter based simple application


Step 5: Click Finish and wait till Android Studio creates the project.

naming the flutter package

After successfully creating a file, we can edit the code of the application to show the output we want. Android Studio creates a fully working flutter application with minimal functionality. Let us check the structure of the application and then, change the code to do our task.

The structure of the application and its purpose are as follows?

file structure in flutter

We have to edit code in main.dart as mentioned in the above image. We can see that Android Studio has automatically generated most of the files for our flutter app.

Replace the dart code in the lib/main.dart file with the below code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

// Importing important packages require to connect 
// Flutter and Dart
import 'package:flutter/material.dart';
  
// Main Function
void main(){
  // Giving command to runApp() to run the app.
    
  /* The purpose of the runApp() function is to attach 
  the given widget to the screen. */
  runApp(MyApp());
}
  
// Widget is used to create UI in flutter framework.
  
/* StatelessWidget is a widget, which does not maintain 
any state of the widget. */
  
/* MyApp extends StatelessWidget and overrides its 
build method. */
class MyApp extends StatelessWidget {
   // This widget is the root of your application.
   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         // title of the application
         title: 'Hello World Demo Application',
         // theme of the widget
         theme: ThemeData(
            primarySwatch: Colors.lightGreen,
         ),
         // Inner UI of the application
         home: MyHomePage(title: 'Home page'),
      );
   }
}
  
/* This class is similar to MyApp instead it 
returns Scaffold Widget */
class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key);
   final String title;
  
   @override
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(
            title: Text(this.title),
         ),
         // Sets the content to the 
         // center of the application page
         body: Center(
            // Sets the content of the Application
            child:
            Text(
               'Welcome to GeeksForGeeks!',
            )
         ),
      );
   }
}

chevron_right


Output:

sample application in flutter




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.