Build Your First Mobile-App in Flutter

Posted on January 13, 2025  •  4 minutes  • 800 words

What is Flutter?

Flutter is a UI toolkit that is open-source and created by Google, enabling developers to build natively compiled applications for various platforms using a single codebase.

It supports building apps for:

1. Mobile: Android and iOS
2. Web: Modern browsers
3. Desktop: Windows, macOS, and Linux
4. Embedded Devices

Key Features of Flutter

1. Single Codebase: Write one codebase for all platforms.
2. Hot Reload: Instantly see changes in your code without restarting the app.
3. Widgets: Everything in Flutter is a widget, allowing for highly customizable UIs.
4. Performance: Flutter apps are compiled into native ARM code, ensuring high performance.
5. Material Design and Cupertino: Support for Google’s Material Design and Apple’s Cupertino design for cross-platform consistency.
6. Open-Source: Free to use and has a vibrant community.

Hello World Application in Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello World App'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

Flutter Widgets

Widgets are the foundation of Flutter’s UI. They are categorized into:

1. Stateless Widgets:

   1. Immutable.
   2. Their state cannot change after being created.
   3. Example: Text, Icon.

2. Stateful Widgets:

   1. Have mutable state.
   2. Use a State object to track changes.
   3. Example: Checkbox, TextField.

In this blog, we’ll walk you through creating a simple Flutter application with a login page and a home page.

The application will include navigation between these two screens and basic user input handling.

Prerequisites

Before you start, ensure the following:

1. Flutter SDK is installed Install Flutter

2. A code editor like Visual Studio Code or Android Studio is set up.

Project Structure

We’ll create a Flutter application with the following files:

1. main.dart: The entry point of the application.

2. login_page.dart: The login screen.

3. home_page.dart: The home screen.

Step 1: Create a New Flutter Project

Run the following command in your terminal to create a new Flutter project:

flutter create login_home_app
cd login_home_app

Step 2: Set Up the Main File

In lib/main.dart, update the code to configure routes for navigation between the login page and home page.

import 'package:flutter/material.dart';
import 'login_page.dart';
import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Login App',
      initialRoute: '/',
      routes: {
        '/': (context) => LoginPage(),
        '/home': (context) => HomePage(),
      },
    );
  }
}

Step 3: Create the Login Page

Create a file named login_page.dart in the lib folder and add the following code:

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login() {
    if (_usernameController.text == 'user' && _passwordController.text == 'password') {
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('Login Failed'),
          content: Text('Invalid username or password'),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text('OK'),
            ),
          ],
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login Page')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _login,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

Step 4: Create the Home Page

Create a file named home_page.dart in the lib folder and add the following code:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
        actions: [
          IconButton(
            icon: Icon(Icons.logout),
            onPressed: () => Navigator.pushReplacementNamed(context, '/'),
          ),
        ],
      ),
      body: Center(
        child: Text(
          'Welcome to the Home Page!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

Step 5: Run the Application

Use the following command to run your app:

flutter run

When you launch the app:

1. You’ll see the Login Page.

2. Enter the username as user and password as password to navigate to the Home Page.

3. You can log out from the Home Page by clicking the logout button in the app bar.

You have successfully built a simple Flutter application with a login page and a home page!

This example introduced navigation, user input handling, and basic state management.

From here, you can expand the app by adding features like user authentication with a backend, form validation, and more.

Happy coding!