Creating Simple Application in Android Studio

Creating a Simple Flutter Application

This chapter guides you through creating a basic Flutter application using Android Studio (though the process is similar in VS Code with the Flutter extension).

Prerequisites:

• Flutter SDK installed and configured.
• Android Studio (or VS Code) installed.
• Flutter and Dart plugins installed in your IDE.
• An emulator running or a physical device connected.

Steps:

1. Open Android Studio: Launch your IDE.
2. Create a New Flutter Project:
3. • Go to File > New > New Flutter Project....
4. • Ensure the Flutter SDK path points to your Flutter installation.
5. • Select Flutter Application as the project type.
6. • Click Next.

(IDE Tip: The exact menu names or dialog appearance might vary slightly between IDE versions, but the core flow remains the same.)

1. Configure Project Details:
2. • Project name: Enter a valid Dart package name (e.g., hello_flutter_app). Use lowercase letters and underscores.
3. • Project location: Choose where to save your project.
4. • Description: (Optional) Add a brief description.
5. • Organization: Enter a reverse domain name identifier (e.g., com.example, dev.yourname). This is used for package IDs on Android/iOS.
6. • Platforms: Select the target platforms (Android, iOS, Web, etc.).
7. • Click Create (or Finish).

Android Studio (or VS Code) will generate a starter Flutter project with sample code.

Project Structure Overview

The generated project contains several key directories and files:

• android/: Contains the native Android project wrapper. You’ll edit files here for Android-specific configurations (e.g., permissions, build settings).
• ios/: Contains the native iOS project wrapper (Xcode project). Edit files here for iOS-specific configurations.
• lib/: The heart of your Flutter application. All your Dart code resides here.
• • lib/main.dart: The entry point of your Flutter application. Execution starts here.
• test/: Contains unit and widget tests for your application.
• pubspec.yaml: The project’s metadata file. Manages dependencies (packages), assets (images, fonts), app version, and other configurations. This is a crucial file.
• pubspec.lock: Automatically generated by Flutter’s package manager (pub). Tracks the exact versions of dependencies being used.
• .gitignore: Standard Git file specifying intentionally untracked files.
• README.md: A Markdown file to describe your project.
• (Other files like .metadata, .packages, .dart_tool/, IDE-specific files (.idea/, .iml, .vscode/) are usually auto-generated and managed by the tools.)

Understanding the Starter Code (lib/main.dart)

Let’s replace the default counter app code with a simpler ‘Hello World’ example and understand it:

// Import the Flutter Material library, which provides Material Design widgets.
import 'package:flutter/material.dart';

// The main function is the entry point for all Flutter apps.
void main() {
  // runApp inflates the given widget and attaches it to the screen.
  runApp(const MyApp()); // Use 'const' for performance if the widget is immutable.
}

// MyApp is the root widget of the application.
// It extends StatelessWidget because its state doesn't change over time.
class MyApp extends StatelessWidget {
  // Constructor with an optional Key parameter.
  const MyApp({Key? key}) : super(key: key);

  // The build method describes how to display the widget.
  // It's called by the framework when the widget needs to be rendered.
  @override
  Widget build(BuildContext context) {
    // MaterialApp wraps several widgets commonly required for Material Design apps.
    return MaterialApp(
      title: 'Hello Flutter App', // Used by the OS task switcher
      theme: ThemeData(
        // Defines the visual theme of the application.
        primarySwatch: Colors.teal, // Sets the primary color swatch
        visualDensity: VisualDensity.adaptivePlatformDensity, // Adapts density
      ),
      // The widget displayed for the default route ('/')
      home: const MyHomePage(title: 'Hello Flutter'),
    );
  }
}

// MyHomePage represents the home screen of the app.
// Also a StatelessWidget in this simple example.
class MyHomePage extends StatelessWidget {
  // Constructor requiring a title.
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // 'final' means this variable won't change after the object is created.
  final String title;

  @override
  Widget build(BuildContext context) {
    // Scaffold implements the basic Material Design visual layout structure.
    return Scaffold(
      // AppBar displays the bar at the top of the screen.
      appBar: AppBar(
        // Text widget displays the title passed to MyHomePage.
        title: Text(title),
      ),
      // The main content of the Scaffold.
      body: const Center(
        // Center widget centers its child widget.
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 24), // Basic text styling
        ),
      ),
    );
  }
}

Explanation:

• import 'package:flutter/material.dart';: Imports the necessary Flutter widgets for Material Design.
• void main() => runApp(const MyApp());: The app’s entry point. runApp takes the root widget (MyApp) and makes it the root of the widget tree.
• MyApp extends StatelessWidget: Defines the main application widget. It’s Stateless because it doesn’t hold any mutable state itself.
• build(BuildContext context): This method must be implemented by all widgets. It returns the widget tree that defines the UI for this part of the app. BuildContext provides information about the widget’s location in the tree.
• MaterialApp: A convenience widget that sets up the application for Material Design, providing features like navigation, theming, etc.
• • title: A one-line description used by the device.
• • theme: Defines the app’s color scheme and typography (ThemeData).
• • home: The widget for the default screen (MyHomePage).
• MyHomePage extends StatelessWidget: Defines the home screen widget.
• • final String title;: Stores the title passed from MyApp.
• Scaffold: Provides a standard app layout structure, including AppBar, body, FloatingActionButton, etc.
• • appBar: The AppBar widget displayed at the top.
• • body: The primary content area of the Scaffold.
• Center: A layout widget that centers its child.
• Text: A widget that displays a string of text.

Running the Application

1. Select a Device: Ensure an emulator is running or a device is connected and selected in the device dropdown in your IDE’s toolbar.
2. Run: Click the ‘Run’ button (green play icon) in the IDE or use the terminal command flutter run from your project’s root directory.
3. Hot Reload/Restart: While the app is running, you can use Hot Reload (Ctrl+\ or Cmd+) to inject code changes quickly without losing app state, or Hot Restart (Ctrl+Shift+\ or Cmd+Shift+) to rebuild the app and reset the state.

You should see the application launch on your selected device/emulator, displaying an app bar with the title ‘Hello Flutter’ and the text ‘Hello, World!’ centered on the screen.