Flutter Beginner Tutorial Build iOS & Android Apps

If you’re looking to create beautiful, cross-platform mobile apps that run on both iOS and Android, Flutter is the perfect framework to start with! Developed by Google, Flutter uses the Dart programming language to build fast, responsive apps with a single codebase. In this tutorial, we’ll guide you step by step to learn Flutter, from installation to building your first mobile app.

What is Flutter and Why Learn It? ​

Flutter is a UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

Benefits of learning Flutter:​

• Cross-platform development: Write once, run on iOS & Android.
• Fast development: Hot reload speeds up testing and design changes.
• Beautiful UI: Rich widgets and customizable designs.
• Strong community: Tons of plugins and packages available.

For beginners, Flutter is an excellent choice because it combines ease of learning with powerful features. It’s perfect for developers, designers, and even tech enthusiasts interested in app development.

---

Setting Up Flutter on Your System ​

Step 1: Install Flutter SDK​

1. Go to the official Flutter website.
2. Download the SDK for your operating system (Windows, macOS, Linux).
3. Extract the files to a desired location.
4. Add the Flutter bin directory to your system PATH.

# Example for Windows PowerShell
setx PATH "%PATH%;C:\flutter\bin"

Step 2: Install Android Studio (for Android development)​

• Download and install Android Studio.
• Install Android SDK & Emulator for testing apps.

Step 3: Install Xcode (for iOS development)​

• Required only if you’re on macOS.
• Download Xcode from the Mac App Store.
• Ensure Command Line Tools are installed.

Step 4: Verify Installation​

Run the following command in your terminal:

flutter doctor

This checks if your setup is ready for Flutter development. Fix any issues before proceeding.

---

Flutter Basics for Beginners ​

Dart Programming Language​

Flutter uses Dart, an easy-to-learn, object-oriented language. Here’s a simple Dart example:

void main() {
  String greeting = "Hello, Flutter!";
  print(greeting);
}

---

Flutter Project Structure​

When you create a Flutter project:

flutter create my_app
cd my_app
flutter run

You’ll see this structure:

• lib/ → Contains main Dart files.
• pubspec.yaml → Manages dependencies and assets.
• android/ → Android-specific code.
• ios/ → iOS-specific code.

---

Building Your First Flutter App ​

Here’s a simple “Hello World” Flutter app:

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 Flutter!'),
        ),
        body: Center(
          child: Text(
            'Welcome to Flutter!',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

Key Points:​

• MaterialApp: Root of your app with default design.
• Scaffold: Provides structure like AppBar and Body.
• Widgets: Everything in Flutter is a widget (buttons, text, images).

---

Understanding Flutter Widgets ​

Widgets are the building blocks of Flutter apps.

Common Widgets:​

• Text → Displays text.
• Container → Layout and styling.
• Column & Row → Arrange widgets vertically or horizontally.
• ListView → Scrollable list of items.
• Button → Interact with users.

Example of a Column widget:

Column(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Click Me'),
    ),
  ],
)

---

Stateful vs Stateless Widgets ​

• StatelessWidget → Static UI, doesn’t change dynamically.
• StatefulWidget → Can update its UI based on user actions or data.

Example of StatefulWidget:

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 Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: increment,
          child: Text('Increase'),
        ),
      ],
    );
  }
}

---

Flutter Hot Reload ​

One of Flutter’s most powerful features is hot reload. Make changes in your code, save, and see the updates instantly without restarting the app. This is a huge time-saver for UI development.

Connecting Flutter with APIs ​

Flutter can fetch data from REST APIs using the http package:

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

void fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
  if (response.statusCode == 200) {
    var data = jsonDecode(response.body);
    print(data['title']);
  }
}

Fetching API data is essential for creating dynamic apps that interact with servers.

---

Deploying Your Flutter App ​

• Android: Build an APK or App Bundle using: flutter build apk
• iOS: Build using Xcode and upload to the App Store.

Flutter’s single codebase makes deployment on both platforms fast and easy.

---

Lynda Flutter Tutorial for Beginners ​

You can follow a full Flutter beginner course on YouTube to see the step-by-step process:
Flutter Tutorial - Build iOS & Android Apps

This course covers:

• Installing Flutter & Dart
• Building first apps
• Working with widgets
• Stateful vs Stateless concepts
• Fetching data from APIs
• Deploying apps to iOS & Android

Perfect for beginners who want a hands-on Flutter learning experience.

Conclusion ​

Flutter is a game-changer for mobile app development. With Dart, cross-platform capabilities, and an active community, you can build amazing apps faster than ever. Start with the Lynda Flutter course, practice the examples, and create your own apps today!