Building Your First Android App Using Flutter

Flutter has revolutionized the way developers build cross-platform apps. In this tutorial, we’ll walk through building a simple yet fully functional Android app using Flutter, from installation to implementation.

We’ll also explore core Flutter concepts like hot reload, widgets, states, and API integration.

Overview

A week ago, Flutter released its first beta version at the Mobile World Congress (MWC) in Barcelona.
This guide will help you:

Set up Flutter and the required tools
Understand how Flutter works
Build a sample application that displays a list of posts retrieved from a public API (JSONPlaceholder)

What Is Flutter?

Flutter is an open-source SDK developed by Google for building natively compiled applications for:

Android
iOS
Web
Desktop
(and even Google’s upcoming OS, Fuchsia!)

It uses Dart as its primary programming language and provides a fast, reactive development model with a modern UI framework.

Installing the Required Tools

To start developing with Flutter, you’ll need a few tools installed on your system.

🔹 1. Git, Android Studio, and Xcode

Git: Needed to clone the Flutter SDK repository.
Android Studio: Required for Android app development.
Xcode (macOS only): Required for building iOS applications.

🔹 2. IntelliJ IDEA (Optional but Recommended)

While not mandatory, IntelliJ IDEA offers excellent support for Flutter with features like debugging, refactoring, and intelligent code completion.

After installation:

Add the Flutter and Dart plugins from the IntelliJ plugin marketplace.

🔹 3. Retrieve Flutter SDK

Clone the official Flutter repository:

git clone -b beta https://github.com/flutter/flutter.git

Then, add Flutter’s bin folder to your system PATH environment variable.
You’re now ready to start developing apps using Flutter 🎉

Creating Your First Flutter Project

Open IntelliJ IDEA
Create a new project and choose Flutter from the left panel
(If unavailable, make sure you’ve installed the Flutter and Dart plugins)

Project Settings

Setting	Value
Project Name	feedme
Description	A sample JSON API project
Organization	net.gahfy
Android Language	Kotlin
iOS Language	Swift

Running the First Project

Your IDE opens main.dart, the entry point of your app.

Connect an Android or iOS device (or start an emulator)
Click Run ▶ to launch the app

You’ll see the default Flutter counter app. Tap the floating + button to increment the counter.

Flutter Hot Reload

One of Flutter’s best features is Hot Reload — allowing you to update code instantly without restarting the app.

Try this:

In main.dart, find and replace Colors.blue with Colors.red
Click the Hot Reload (⚡) button in IntelliJ IDEA

The app’s primary color changes instantly while keeping the counter’s state intact.

Building the Final Application

Let’s now build a real application — one that retrieves and displays posts from the JSONPlaceholder API.

Step 1: Create a Minimal Flutter App

We’ll start from scratch by creating a simple Material Design app.

Import the Material package:

import 'package:flutter/material.dart';

Create a root widget that extends StatelessWidget:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(),
    );
  }
}

Define the entry point:

void main() => runApp(MyApp());

Run it — you’ll see a blank white screen. Now, let’s build the UI.

Designing the User Interface

Flutter uses widgets to define UI components.
There are two main types of widgets:

StatelessWidget: Static UI components that don’t depend on app state.
StatefulWidget: Dynamic UI that updates when data or user input changes.

We’ll use StatefulWidget to manage the app state — fetching posts, showing loading states, and handling errors.

Step 2: Creating a Stateful Widget

class PostPage extends StatefulWidget {
  @override
  _PostPageState createState() => _PostPageState();
}

class _PostPageState extends State<PostPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('FeedMe')),
      body: Center(child: CircularProgressIndicator()),
    );
  }
}

This displays a centered progress bar.

Fetching Data from an API

We’ll now fetch data from JSONPlaceholder, a free fake REST API for testing.

Step 3: Define a Post Model

Create a new file post.dart:

class Post {
  final int id;
  final String title;
  final String body;

  Post({required this.id, required this.title, required this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

Step 4: Fetch Posts from API

In your _PostPageState, import the http package and fetch data asynchronously:

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<Post>> fetchPosts() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
  
  if (response.statusCode == 200) {
    final List<dynamic> data = json.decode(response.body);
    return data.map((json) => Post.fromJson(json)).toList();
  } else {
    throw Exception('Failed to load posts');
  }
}

Step 5: Display the List of Posts

Widget _buildPostList(List<Post> posts) {
  return ListView.builder(
    itemCount: posts.length,
    itemBuilder: (context, index) {
      final post = posts[index];
      return ListTile(
        title: Text(post.title),
        subtitle: Text(post.body),
      );
    },
  );
}

Call fetchPosts() in initState() and update the UI accordingly.

Handling Errors Gracefully

If an error occurs (like no internet), show a Snackbar with a retry button:

void _showError(BuildContext context) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('Failed to load posts'),
      action: SnackBarAction(
        label: 'RETRY',
        onPressed: _loadPosts,
      ),
    ),
  );
}

This gives users feedback and an option to retry the request.

Summary

Congratulations! 🎉l
You’ve just built a fully functional Flutter application that:

Fetches data from an API
Displays it in a Material Design layout
Handles loading and error states
Runs seamlessly on both Android and iOS

Flutter’s Hot Reload, widget system, and Dart language make app development faster, cleaner, and cross-platform by design.

Useful Resources

Final Note

Developing with Flutter is fun, fast, and powerful.
If you found this guide useful, consider following the author on Twitter for more Flutter tips and tutorials!

Building Your First Android App Using Flutter — A Step-by-Step Guide