flutter android studio

Flutter Android Studio Install and Build your First app

In this blog about Flutter Android Studio, you’ll learn how to install Flutter and Dart Plugin in Android Studio and Build and run your first app in Android Studio 3.3.x

Flutter Android Studio Install Process

flutter android studio
Flutter Android Studio

To start, Open Android Studio and close any project (if open) as you’ll have to restart Android Studio after installing the Flutter and Dart required Plugins.

Navigate to the bottom right area and click on Configure in Android Studio welcome screen.

flutter android studio
flutter android studio

In the Plugins window, go to the bottom and click on the ‘Browse Repositories’ button.

flutter android studio

Now, in the Browse Repositories window, search for ‘Flutter’, click on the one by ‘LANGUAGES’ and Install this Repository.

Current version we installed is v34.0, yours could be a higher one. However, the install process is same.

flutter android studio

Now, before the install process begins, Android Studio will prompt you about installing ‘Dart’ plugin, Click OK and Android Studio will install both these plugins.

flutter android studio

Once finished, you’ll be required to restart Android Studio, Click OK and proceed with restart.

Once the restart is finished, Close Android Studio completely.

Now we’ll have to download 2 more important files from the internet:

  1. Flutter SDK v1.2.1_stable (Download latest version from here)
  2. Git for Windows v2.x (Link)

Git installation is user friendly, you can install it easily by clicking next and it’ll require a code editor as well, you can select any which it’ll download automatically.

Flutter SDK once downloaded from the link above, needs to be extracted in some folder where you store system files. (in our case we created a folder named flutter_sdk and our path is: C:/users/user_name/flutter_sdk)

Once extracted, update your system environment using following steps:

  1. In Start search type ‘env’ and select Edit environment variables for your account.
  2. Click on ‘Environment Variables…’ button in the bottom right corner.
  3. Select ‘PATH’ variable and Click on Edit button below in ‘User variables for username’ dialog.
  4. Now, add the path to bin folder in flutter_sdk/flutter folder.
  5. Save and Close.

Flutter Doctor Check Install

Now to check if everything is installed correctly, open command prompt and navigate to flutter folder using ‘cd /flutter_sdk/flutter’

Type following command:

C:\Users\username\flutter_sdk\flutter>flutter doctor
flutter android studio

As you can see in the command window above, flutter is installed properly. Now open android Studio.

Flutter Android Studio Creating first Project

After Installing all Dart and Flutter Plugins and SDK, open Android Studio and you’ll notice a change in your Welcome screen.

Flutter Android Studio

Click on ‘Start a new Flutter Project’

Flutter Android Studio

Select Flutter Application

Flutter Android Studio

Name your project and update your Flutter SDK path if Android Studio is unable to find it. Click Next.

Update your company domain and click on generate a Sample content to start with a predefined template. In the example we have chosen an Appbar.actions template and build our Flutter Android Studio project.

Once the project was built, the main.dart file (main file where dart code goes) had following line of codes already written for us:

// This sample shows adding an action to an [AppBar] that opens a shopping cart.

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 Code Sample for material.AppBar.actions',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            tooltip: 'Open shopping cart',
            onPressed: () {
              // ...
            },
          ),
        ],
      ),
    );
  }
}

Run the app, in case of any issue comment below.

All the best on your journey to Learn Flutter and build great Apps.

Already built your app? Click here to get free tool to promote your app.

Subscribe to our newsletter and once in a week get notified about a new Android app we built using Flutter.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.