How to create my first Flutter application with Android Studio

0. Prerequisistes

Install the Flutter and Dart plugins in Android Studio

1. Run Android Studio

We select Projects and then New Flutter Project

2. Select the Flutter installation path and press Next button

3. We input the new project data

We see the folders and files new Flutter project structure

4. How to run the application in Chrome (web)

We select Chrome (web) in the dropdown list:

We can verify the application is running

5. How to run the application in Windows (desktop)

We select Windows (desktop) in the dropdown list:

6. How to run the application in a Mobile Device Simulator

We select the Device Manager button

We create a new Device pressing the button Create Device

After creating the device we select the Launch this AVD in the emulator button

We can see the new Mobile Device Simulator is running

If we want to increase the Device size we first press in the Window button

Then we have separate window for the device

Now for running the application we select the device in the dropdonw list Pixel 7 PRO API 34 (mobile) and then we press the play button

We verify the application in running in the Mobile simulator

We press the + button and we see the counter value is increasing each time we press that button

7. Application Source Code

7.1. Import material library

We first import the material.dart library

import 'package:flutter/material.dart';

7.2. Run the application calling the main() function

We run the application inside the main() function:

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

7.3. We create the application object extending the abstract class StatelessWidget

We create a StatelessWidget object called MyApp:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

As you see inside the MyApp StatelessWidget we set the application title and the application theme

Also inside the MyApp StatelessWidget we create a new MyHomePage StatefulWidget

7.4. We create a new page called "MyHomePage" extending the abstract class StatefulWidget

We create a new State inside the MyHome

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

7.5. We define the code for maniging the page MyHomePage state

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),//
          ],//children: <Widget>
        ),//Column
      ),//body Center
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), //floatingActionButton
    ); //Scaffold
  }//Widget build
}//class _MyHomePageState extends State<MyHomePage>

7.6. Application whole source code:

The application source code is defined in the file lib/main.dart:

lib/main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

luiscoco/Flutter_Create-App-with-Android-Studio_lesson4