Creating First Flutter application in Android studio

In this article, we are going to learn about how to create a Flutter application in Android studio. These are the steps to follow.

  1. Open the Android studio
  2. Select Start a new Flutter project or go to the File → New → New Flutter Project

    Open androd studio

  3. Select Flutter Application as the project type. Then click Next.

    Screenshot 2

  4. Configure the application details as shown below and then click Next
    Project name: Give your application name. It must be in Lower case with underscores. Ex: first_flutter_app
    Flutter SDK path: Verify the Flutter SDK path specifies the SDK’s location (select Install SDK… if the text field is blank).
    Project location: Give your project location
    Description: Here we can add a description of the project

    Screenshot 3

  5. Then give your package name and click on Finish button
    Note: While creating a new project, some Flutter IDE plugins ask for a company domain name in reverse order as a com.flutterant. The domain name and project name used together as the package name (Ex: com.flutterant.firstflutterapp) for Android and Bundle ID for iOS when the app is released. Make sure the package name is Unique because it can’t be changed once the app is released.

    Screenshot 4

  6. Finally, wait for sometime Android studio will create a project with minimal functionality (Counter app) and later we can remove and add our code.

    Screenshot 5

  7. Now, Understand the Futter project structure and its purposes

    Screenshot 7 e1593957657852

    .dart_tool: The .dart_tool directory having package_config.json file which is a JSON formatted text file to declares a number of packages with a root and a package URI root directory for each. The SDK version for the specific packages is added as an extra languageVersion property on the JSON object for the package. This file is generated automatically by the pub tool.

    .idea: This folder is autogenerated which contains project configuration files for dart SDK, packages and so on all are in XML format. Basically, we will never touch this directory.

    android: This folder contains all packages and files which are related to Android. We need to work on this folder when if we get any specific requirement to implement in native(Android). Here, we will use the AndroidManifest.xml file regularly.

    ios: This folder contains all packages and files which are related to iOS. We need to work on this folder when if we get any specific requirement to implement in native (iOS). Here, we will use the Info.plist file regularly.

    lib: This folder is very important which contains the Dart files having our flutter application code. Here, the main.dart is the default and entry file for our flutter application.

    test: This folder will be used for testing our application

    .gitignore:
    It is a Git version control file in the format of Text. Containing a list of files, folders, extensions, and so on and these should be ignored in the project.

    .metadata: This file tracks the properties of our project. This file should be version-controlled and should not be manually edited.

    .packages: This file maintains a complete list of dependencies in our project.

    first_flutter_app.iml: This filename is the same as our project name with an extension of iml and containing additional settings of the project. It should not be edited manually.

    pubspec.lock: It is an auto-generated file based on the .yaml file. It contains more details about all dependencies.

    pubspec.yaml: It is a very essential file in our project. It holds the project name, project details, project SDK version details, dependencies, and assets, and so on.

    README.md: This file describes the information about our project. we can share the information with the developers by editing this file.

  8. Now, Open main.dart file replaces default code with the following code.
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: ' Flutter application Demo',
      theme: ThemeData(
        // This is the theme of your application.
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter App Demo"),
      ),
      body: Center(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          child: Text("My First Flutter app")),
    );
  }
}


9. Now, Run the application by click on the Play button as shown in the below screen.

Screenshot 9 1

10. Finally, we will get the following output as shown below.

flutter 02 framed 1

Here is the complete source code https://github.com/satyamparasa15/first-fluter-app and for more information https://flutter.dev/

2 thoughts on “Creating First Flutter application in Android studio”

Leave a Reply

Your email address will not be published. Required fields are marked *