Get started with Flutter in Android Studio (Android / iOS)

 

Get started with Flutter in Android Studio (Android / iOS)

By: Luis A. Sierra

Creating the Hello World Android App Project

Hello, World! It is the first basic program in any programming language. Let's write the first program in the Android Studio with Flutter Framework and Dart programming language.

Before we begin, we need to prepare Android Studio for flutter framework by following these steps:

1. Download and install Android Studio: https://developer.android.com/studio

2. After you installed open and install flutter and dart plugin like i show you below:

3. Download the Flutter SDK: https://docs.flutter.dev/install/manual and put in your desired directory

Now to create and run a hello world program follow the following steps:

Step 1: Open Android Studio in your system and Create a new Flutter Project.

Step 2: Configure the Flutter SDK as below and click on the Next button.

Step 3: Give a name to your project like here we give "helloworld_flutter" and then select the native languages and click on next button.

Step 4: Now open lib > main.dart file in the project navigator.

Step 5: Now in the main.dart add the code below:

Complete Code: 👇👇👇👇

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//Created by Luis A. Sierra
//https://interesting-homemade-projects.blogspot.com

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HelloWorld App',
      theme: ThemeData(
        // This is the theme of your application.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'HelloWorld Android / iOS'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  // This widget is the home page of your application.
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically.
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello World from: https://interesting-homemade-projects.blogspot.com',
              style: TextStyle(
                  color: Colors.blue,
                  fontSize: 24,
                  ),
            ),
          ],
        ),
      ),
    );
  }
}

Step 6: Now let run our app Android / iOS with Flutter:

For iOS:

For Android:

Step 7: Now wait to the simulators started 

Tutorial's Files:

https://gitlab.com/luisalbertosierraalcantara/android-ios-tutorial