Make Apps: from Zero to Hero

9 min readMay 24, 2024

Flutter is an open-source UI software development toolkit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, and the web from a single codebase.

Flutter offers a modern, reactive framework for building beautiful and natively compiled applications.

We will help you in getting started with Flutter from scratch, covering everything from setup to building and deploying your first app.

1. Introduction to Flutter
2. Setting Up Your Development Environment
3. Understanding Dart
4. Flutter Basics
5. Building Your First Flutter App
6. Exploring Flutter Widgets
7. State Management
8. Navigation and Routing
9. Networking in Flutter
10. Testing Your Flutter App
11. Deploying Your Flutter App
12. Conclusion

1. Introduction to Flutter

What is Flutter?

Flutter is a UI toolkit that allows developers to create natively compiled applications for mobile, web, and desktop from a single codebase.

It uses the Dart programming language and provides a rich set of pre-designed widgets to create beautiful, fast, and responsive user interfaces.

Why Use Flutter?

1. Single Codebase

Write once, run anywhere.

2. Fast Development

Hot reload feature allows for quick iterations.

3. Expressive and Flexible UI

Built-in widgets and rich motion APIs.

4. Performance

Natively compiled code ensures high performance.

5. Strong Community

Active community and extensive documentation.

2. Setting Up Your Development Environment

System Requirements

Ensure your system meets the following requirements:

Operating System: Windows, macOS, or Linux.
Disk Space: At least 2.8 GB (does not include disk space for IDE/tools).
Tools: Git for version control.

Installing Flutter

1. Download Flutter SDK

Visit the flutter.dev and download the appropriate SDK for your operating system.

2. Extract the SDK

tar xf flutter_linux_vX.X.X-stable.tar.xz

3. Add Flutter to Path

export PATH="$PATH:`pwd`/flutter/bin"

Installing Dart

Dart is the programming language used by Flutter.

1. Download Dart SDK

Visit the dart.dev/get-dart and follow the installation instructions for your OS.

Setting Up an IDE

Choose an IDE that supports Flutter. Popular choices include:

Visual Studio Code

Lightweight and extensible.

Android Studio

Comprehensive IDE with built-in tools for Android development.

1. Install Flutter and Dart Plugins

For VS Code

go to Extensions and install the Flutter and Dart plugins

For Android Studio

go to Preferences > Plugins and install the Flutter plugin, which will also install Dart

Verifying Installation

Run the following command to check if everything is set up correctly

flutter doctor

This command checks your environment and displays a report of the status of your installation.

3. Understanding Dart

Dart is a client-optimized language for fast apps on any platform. It is designed for building UI-centric applications and is the language behind Flutter.

Basic Dart Syntax

Variables

void main() {
var name = 'Flutter';
print(name);
}

Functions

int add(int a, int b) {
return a + b;
}
void main() {
print(add(2, 3));
}

Classes

class Person {
String name;
int age;
Person(this.name, this.age);
void display() {
print('Name: $name, Age: $age');}}
void main() {
var person = Person('John', 30);
person.display();}

Dart Packages

Dart has a rich ecosystem of packages that you can use to extend your applications. Visit pub.dev to explore available packages.

4. Flutter Basics

Flutter Project Structure

A typical Flutter project contains the following structure:

my_app/
android/
ios/
lib/
main.dart
test/
pubspec.yaml

android: Android-specific files.
ios: iOS-specific files.
lib: Main directory for Dart files.
test: Directory for unit tests.
pubspec.yaml: Configuration file for dependencies.

Creating a New Flutter Project

Run the following command to create a new Flutter project:

flutter create my_app

Navigate to the project directory:

cd my_app

Running Your Flutter App

To run your app, use:

flutter run

This command launches the app in the connected device or emulator.

5. Building Your First Flutter App

main.dart

The entry point for a Flutter app is the main.dart file. Let’s create a simple app that displays “Hello, Flutter!”.

Basic App Structure

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('My First Flutter App'),),
body: Center(
child: Text('Hello, Flutter!'),
),),);}}

Running the App

1. Save the file
2. Run the app using flutter run

You should see a screen with an App Bar and the text “Hello, Flutter!” centered in the body.

6. Exploring Flutter Widgets

Widgets are the building blocks of a Flutter app. Flutter provides a rich set of widgets to build UIs.

Common Widgets

Text

Displays a string of text.

Text('Hello, Flutter!', style: TextStyle(fontSize: 24));

Container

A convenience widget that combines common painting, positioning, and sizing widgets.

Container(
padding: EdgeInsets.all(16.0),
color: Colors.blue,
child: Text('Hello, Flutter!'),);

Column and Row

Layout widgets for arranging child widgets vertically and horizontally.

Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('First'),
Text('Second'),
],);
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('First'),
Text('Second'),
],);

ListView

Scrollable list of widgets.

ListView(
children: <Widget>[
ListTile(title: Text('Item 1')),
ListTile(title: Text('Item 2')),
ListTile(title: Text('Item 3')),
],);

7. State Management

State management is essential for building interactive applications. Flutter provides several ways to manage state.

Stateful Widget

A widget that has mutable state.

class Counter extends StatefulWidget {
@override
_CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
int _count = 0;
void _increment() {
setState(() {
_count++;
});}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),),
body: Center(
child: Text('Count: $_count', style: TextStyle(fontSize: 24)),),
floatingActionButton: FloatingActionButton(
onPressed: _increment,
child: Icon(Icons.add),),);}}
void main() {
runApp(MaterialApp(home: Counter()));}

Provider Package

The Provider package is a popular choice for state management.

1. Add Dependency

Add provider to your pubspec.yaml file.

dependencies:
flutter:
sdk: flutter
provider: ^5.0.0

2. Implement Provider

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),),);}
class Counter with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();}}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Provider Example'),),
body: Center(
child: Consumer<Counter>(
builder: (context, counter, child) => Text(
'Count: ${counter.count}',
style: TextStyle(fontSize: 24),),),),
floatingActionButton: FloatingActionButton(
onPressed: () => context.read<Counter>().increment(),
child: Icon(Icons.add),),),);}

8. Navigation and Routing

Navigation and routing are crucial for creating multi-screen applications.

Basic Navigation

Define Routes

void main() {
runApp(MyApp());}
class MyApp extends StatelessWidget {
@override
Widget build
(BuildContext context) {
return MaterialApp(
routes: {
'/': (context) => HomePage(),
'/second': (context) => SecondPage(),},);}}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: Text('Go to Second Page'),),),);}}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);},
child: Text('Go Back'),),),);}}

Passing Data Between Screens

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(data: 'Hello from Home Page'),),);},
child: Text('Go to Second Page'),),),);}}
class SecondPage extends StatelessWidget {
final String data;
SecondPage({required this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),),
body: Center(
child: Text(data),),);}}

9. Networking in Flutter

Flutter makes it easy to perform network requests using the http package.

Adding Dependencies

Add the http package to your pubspec.yaml file.

dependencies:
flutter:
sdk: flutter
http: ^0.13.3

Fetching Data from an API

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Networking Example'),),
body: Center(
child: FetchData(),),),);}}
class FetchData extends StatefulWidget {
@override
_FetchDataState createState() => _FetchDataState();}
class _FetchDataState extends State<FetchData> {
String data = 'Loading…';
@override
void initState() {
super.initState();
fetchData();}
Future<void> fetchData() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
if (response.statusCode == 200) {
final jsonResponse = json.decode(response.body);
setState(() {
data = jsonResponse['title'];});} else {
setState(() {
data = 'Failed to load data';});}}
@override
Widget build(BuildContext context) {
return Text(data);}}

10. Testing Your Flutter App

Testing is crucial for maintaining code quality. Flutter provides a robust testing framework.

Unit Testing

Unit tests verify the correctness of individual components.

1. Add Test Dependency

dev_dependencies:
flutter_test:
sdk: flutter

2. Write a Unit Test

// test/counter_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/counter.dart';
void main() {
test('Counter increments test', () {
final counter = Counter();
counter.increment();
expect(counter.value, 1);});}

3. Run the Test

flutter test

Widget Testing

Widget test verifies the UI components.

1. Write a Widget Test

// test/widget_test.dart
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/main.dart';
void main() {
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
await tester.pumpWidget(MyApp());
expect(find.text('0'), findsOneWidget);
expect(find.text('1'), findsNothing);
await tester.tap(find.byIcon(Icons.add));
await tester.pump();
expect(find.text('0'), findsNothing);
expect(find.text('1'), findsOneWidget);});}

2. Run the Widget Test

flutter test

11. Deploying Your Flutter App

Building for Android

1. Generate a Release APK

flutter build apk - release

2. Locate the APK

APK file can be found in build/app/outputs/flutter-apk/app-release.apk

Building for iOS

1. Prepare for Release

1. Open ios/Runner.xcworkspace in Xcode.
2. Configure the project settings for release.

2. Build the iOS App

flutter build ios - release

3. Deploy to App Store

Use Xcode to upload the app to the App Store.

Building for Web

1. Build the Web App

flutter build web

2. Deploy to Web Server

1. The web build files can be found in build/web
2. Deploy these files to your web server

12. Conclusion

Learning Flutter from scratch involves understanding the basics of Dart, setting up your development environment, and getting acquainted with Flutter’s widgets and architecture.

We provided a comprehensive overview to help you get started with Flutter, build your first app, manage state, navigate between screens, make network requests, test your app, and finally deploy it.

Flutter’s versatility and strong community support make it an excellent choice for developing cross-platform applications. As you continue to explore Flutter, you’ll discover its powerful features and capabilities that enable you to create beautiful, high-performance apps with ease.

Happy Coding.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — —

Written by Aakash Agarwal for instrik.com, Contact on aakash@instrik.com