flutter_creating_simple_application

Creating a Simple Application

In this chapter, let’s create a basic Flutter application to understand the project structure and the fundamental concepts involved. We’ll use Android Studio (with the Flutter plugin installed), but the process is similar in VS Code.

Step 1: Create a New Flutter Project

1. Open Android Studio.
2. Click on File -> New -> New Flutter Project... (or New Project... and select Flutter if it’s the first time).
3. Select Flutter in the project type list on the left.
4. Ensure the Flutter SDK path points to your installed Flutter SDK directory.
5. Click Next.

Step 2: Configure the Project

Enter the following details:

• Project name: Use a descriptive name, following Dart package naming conventions (lowercase_with_underscores). Let’s use hello_flutter_app.
• Project location: Choose where to save your project.
• Description: A brief description (e.g., A simple Flutter Hello World application).
• Project type: Select Application (the default).
• Organization: Use reverse domain name notation (e.g., com.example, com.yourcompany). This is used for the package name on Android and Bundle ID on iOS. Let’s use com.example.helloflutterapp.
• Platforms: Select the platforms you intend to target (Android, iOS, Web, etc.).

Click Finish (or Create).

Step 3: Project Creation

Android Studio (or VS Code) will now create a Flutter project with a default counter application. This process might take a minute as it fetches dependencies.

Step 4: Understanding the Project Structure

Let’s look at the key files and directories generated:

• android/: Contains Android-specific project files. You’ll edit files here for platform-specific configuration (e.g., AndroidManifest.xml, build.gradle).
• ios/: Contains iOS-specific project files. You’ll edit files here (e.g., Info.plist, Podfile) or open the Runner.xcworkspace in Xcode for iOS configuration.
• lib/: This is where most of your Dart code will live.
• • main.dart: The entry point of your Flutter application. Execution starts here.
• test/: Contains files for writing automated tests (unit, widget, integration tests).
• • widget_test.dart: An example widget test file.
• .gitignore: Specifies intentionally untracked files that Git should ignore.
• pubspec.yaml: Crucial project metadata file. Used by the Pub package manager. Defines project name, description, version, dependencies (packages your app uses), assets (like images, fonts), and more.
• pubspec.lock: Automatically generated file that locks down the specific versions of dependencies being used.
• README.md: A Markdown file to describe your project.

Step 5: Exploring main.dart (Default Counter App)

Open lib/main.dart. The default code creates a simple stateful application with a counter that increments when you tap a button. We’ll replace this, but it’s good to see the structure.

Step 6: Creating a ‘Hello World’ Application

Replace the entire content of lib/main.dart with the following simpler code:

// Import the Flutter framework's Material library.
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 constant.
}

// MyApp is the root widget of the application.
// It extends StatelessWidget because its content doesn't change internally.
class MyApp extends StatelessWidget {
  // Constructor (required for StatelessWidget).
  const MyApp({super.key}); // Use super.key for forwarding the 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 is a convenience widget that wraps a number of widgets
    // commonly required for Material Design applications.
    return MaterialApp(
      // Title used by the device's task switcher.
      title: 'Hello Flutter App',
      // Theme data defines the visual appearance (colors, fonts, etc.).
      theme: ThemeData(
        primarySwatch: Colors.blue, // Sets the primary color swatch.
        // Newer approach using ColorScheme:
        // colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        // useMaterial3: true, // Opt-in to Material 3 design
      ),
      // The widget for the default route of the app (the home screen).
      home: const MyHomePage(title: 'Hello Flutter'), // Pass title to home page.
    );
  }
}

// MyHomePage is the widget for the home screen.
// It's also StatelessWidget here as its content is static.
class MyHomePage extends StatelessWidget {
  // Constructor takes a title and key.
  const MyHomePage({super.key, required this.title});

  // '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 is the top application bar.
      appBar: AppBar(
        // The title displayed in the AppBar.
        title: Text(title), // Use the title passed to the widget.
      ),
      // The body is the primary content of the Scaffold.
      body: const Center( // Center widget centers its child.
        // Text widget displays a string of text.
        child: Text(
          'Hello, World!',
          style: TextStyle(fontSize: 24), // Optional styling.
        ),
      ),
    );
  }
}

Code Explanation

• import 'package:flutter/material.dart';: Imports the Material Design library, providing widgets like MaterialApp, Scaffold, AppBar, Text, etc.
• 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 root widget. It’s stateless because it just builds a MaterialApp and doesn’t manage any changing internal data.
• @override Widget build(BuildContext context): Every widget must implement a build method. It receives the BuildContext (information about the widget’s location in the tree) and returns the widget(s) it renders.
• MaterialApp: Configures the top-level aspects of a Material Design app, including theme, title, and the home screen.
• MyHomePage extends StatelessWidget: Defines the home screen widget. It takes a title parameter.
• Scaffold: Provides a standard mobile app layout structure (AppBar, body, etc.).
• AppBar: The bar at the top of the screen.
• Center: A layout widget that centers its child.
• Text: A widget that displays text.

Step 7: Run the Application

1. Ensure you have a device connected (physical or emulator/simulator) and selected in the device dropdown in Android Studio/VS Code.
2. Click the ‘Run’ button (green play icon) or press Shift+F10 (Android Studio default) or F5 (VS Code default).
3. Flutter will build and install the app on the selected device.

Step 8: View the Output

The device should display the application with an AppBar titled ‘Hello Flutter’ and the text ‘Hello, World!’ centered in the body.

This simple example covers the basic workflow: creating a project, understanding the structure, writing basic widget code, and running the app.