I have 7+ years of experience building mobile apps. Before Flutter, I worked as a Native Android developer. Now I use Flutter to build apps for many platforms at once. In this guide, I’ll show you how to get started with Flutter.

What is Flutter?

Flutter is a free tool from Google that lets you build apps using one set of code. You can make apps for phones, web, and computers all at once. I started using Flutter in 2021 and found it much better than other tools I had tried before.

With Flutter, you write code once and deploy it to multiple platforms:

  • iOS
  • Android
  • Web
  • Desktop (Windows, macOS, Linux)

Why I Choose Flutter

After writing native Android code for 4 years, here’s why I switched to Flutter:

  1. One Codebase: Write once, use everywhere - saves 30-50% development time
  2. Fast Updates: See changes right away while coding - no more waiting
  3. Nice Looking UI: Make good-looking apps that feel natural on any device
  4. Fast Apps: Flutter makes apps that run as fast as native apps
  5. Helpful Community: Get help from other developers and use 30,000+ ready-made packages
  6. Many Ready Widgets: Use pre-made buttons, screens, and other parts
  7. Custom Designs: Create your own unique look for your apps

Setting Up Your Development Environment

There are two ways to install Flutter: using FVM (recommended) or direct installation. I’ll show you both methods.

FVM (Flutter Version Management) is a tool that helps you:

  • Manage multiple Flutter versions
  • Switch between versions easily
  • Keep consistent Flutter versions across your team
  • Install Flutter versions per project

Here’s how to set up FVM:

  1. Install FVM using Homebrew (Mac):
brew tap leoafarias/fvm
brew install fvm

Or using pub (all platforms):

dart pub global activate fvm
  1. Install Flutter using FVM:
# Install latest a specific version

fvm install 3.29.0
  1. Set up an existing project with FVM:
# Go to project directory
cd my_flutter_app

# Use a specific Flutter version
fvm use 3.29.0

# Verify configuration for this project

fvm flutter --version

Fvm will create .fvmrc configuration file. Do include this file in version control. For more detailed uses, have a look at FVM Docs

Alternative: Direct Flutter Installation

If you prefer installing Flutter directly:

  1. Go to Flutter’s download page
  2. Download Flutter for your OS
  3. Extract to a folder with a simple path

For Mac users:

# Make a folder for Flutter

mkdir ~/development
cd ~/development

# Unzip Flutter

unzip ~/Downloads/flutter_macos_arm64_3.29.0-stable.zip

2. Add Flutter to Your Path

If using FVM, it handles the PATH automatically.

For direct installation, add Flutter to your path:

For Mac/Linux, add to ~/.zshrc or ~/.bashrc:

export PATH="$PATH:$HOME/development/flutter/bin"

For Windows, add Flutter’s bin folder to your Path in System Properties.

3. Set Up Your IDE

Choose an editor for coding Flutter:

  • Android Studio
    • Go to Plugins → Browse
    • Install “Flutter” plugin
    • Install “Dart” plugin
    • Restart
  • VS Code
    • Install “Flutter” extension
    • Install “Dart” extension
    • Reload VS Code

4. Check Your Setup

Run this command to see if everything works:

flutter doctor

If you see X marks, here’s what to do:

  • ❌ Android toolchain: Install Android Studio
  • ❌ Xcode (Mac only): Install from App Store
  • ❌ Chrome: Install Chrome browser
  • ❌ VS Code/Android Studio: Install missing plugins

Just follow what flutter doctor tells you to fix these issues.

Creating Your First Flutter App

Make your first app with these simple commands:

flutter create my_first_app  # Makes a new app
cd my_first_app             # Go to app folder
flutter run                 # Start the app

This is what the main code looks like:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());  // App starts here
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First Flutter App',    // App name
      theme: ThemeData(
        primarySwatch: Colors.blue,     // Main color
        useMaterial3: true,             // Modern look
      ),
      home: const MyHomePage(title: 'My First Flutter App'),  // First screen
    );
  }
}

Hot Reload and Hot Restart

Flutter has two great features that make coding faster:

Hot Reload:

  • Updates your app in under 1 second
  • Keeps your app’s current state
  • Great for small UI changes
  • Press r in terminal to use it

Hot Restart:

  • Starts your app fresh (takes 3-5 seconds)
  • Resets everything
  • Use when Hot Reload doesn’t work
  • Press R in terminal to use it

I use Hot Reload at least 20 times every hour - it saves so much time!

Essential Flutter Concepts

1. Widgets

Everything in Flutter is a widget. The main types are:

  • StatelessWidget: For parts of the app that don’t change
  • StatefulWidget: For parts that need to change

Here’s a simple example:

class WelcomeMessage extends StatelessWidget {
  final String message;  // Input data
  
  const WelcomeMessage({super.key, required this.message});
  
  @override
  Widget build(BuildContext context) {
    // How it looks
    return Text(
      message,
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}

// How to use it:
WelcomeMessage(message: "Welcome to Flutter!")

2. State Management

I pick different ways to manage state based on app size:

  • setState: For small apps
  // Simple counter
  void _incrementCounter() {
    setState(() {
      _counter++;  // This updates the screen
    });
  }
  • Provider: For medium apps
  • Bloc/Cubit: For large apps

3. Basic Layout Widgets

These are the most important layout widgets I use all the time:

  • Container: For styling (padding, margin, color, etc.)
  • Row: For side-by-side items
  • Column: For top-to-bottom items
  • Stack: For putting things on top of each other
  • ListView: For scrollable lists

Debugging Flutter Apps

Here are the ways to fix problems in Flutter apps:

1. Print Statements

The simplest way to see what’s happening:

print('Got user data: $userData');  // Show data in console

// Or with a logging package:
log.info('Got user data', userData);

2. Flutter DevTools

Flutter’s special debugging tool that lets you:

  • See how widgets are arranged
  • Check app performance
  • Watch network requests
  • Fix layout problems

Start it by running:

flutter run

Then press ‘d’ in the terminal.

3. Breakpoints

Stop your code at certain points to check what’s happening:

  1. Click next to a line of code in your editor
  2. Run in debug mode
  3. When the app stops at that point, check all variables
  4. Step through code line by line

Best Practices

1. Widget Tree Structure

  • Break big screens into smaller parts (under 100 lines)
  • Reuse widgets when you see the same UI more than once

2. Performance Tips

  • Use ListView.builder for long lists
  • Make widgets const when they don’t change
  • Put RepaintBoundary around complex animations

3. Code Organization

  • Keep UI code separate from logic code
  • Organize by feature, not by file type
  • Name things clearly (camelCase for variables, PascalCase for classes)

Common Mistakes To Avoid

  1. Too Many Nested Widgets
    • Bad: Putting 10+ widgets inside each other
    • Good: Break into separate widget classes
    • Example: Split a form into FormHeader, FormFields, and FormButtons
  2. Not Using Keys
    • Bad: Lists that rearrange items without keys
    • Good: Add keys to list items
    • Example: ListView.builder(itemBuilder: (context, index) => MyWidget(key: ValueKey(index)))
  3. Slow Code in Main Thread
    • Bad: Heavy work in build methods
    • Good: Do heavy work outside the UI
    • Example: Use compute(parseJson, jsonString) for parsing
  4. Rebuilding Too Much
    • Bad: Uncessesary rebuild of the widget tree
    • Good: Only update the specific widgets that change
    • Example: Use Provider.of(context, listen: false) to avoid extra rebuilds

Resources For Learning More

  1. Flutter Docs
  2. Flutter YouTube
  3. Flutter Discord
  4. Flutter Packages

What to Try Next

Try building these simple apps:

  1. Todo App: Make a list of tasks (Tutorial)
    • Learn basic state management
    • Practice forms
    • Save data locally
  2. Weather App: Show weather forecasts
    • Learn to use APIs
    • Handle loading states
    • Make multiple screens
  3. Profile Page: Create a user profile
    • Build complex layouts
    • Add animations
    • Load and cache images

P.S. If you found this helpful, don’t forget to check out my other Flutter articles!

Tags: flutter beginner guide development setup cross-platform mobile app development
Share: