Mobile App Development — Beginner Guide

When you open Instagram, the feed, stories, and camera are all separate screens. The app logic fetches new posts, the UI displays them, and the camera hardware is accessed directly — this is mobile app development in action.

A startup building a minimum viable product often chooses Flutter to ship on both stores with one team. A large company with a huge budget may keep separate native teams for the smoothest possible experience.

flutter create my_app creates a complete project. You edit lib/main.dart, press 'r' for hot reload, and changes appear on the emulator in under a second.

On Windows, you install Android Studio, create an Android Virtual Device (AVD), then run 'flutter emulators' and 'flutter run' to launch your first app.

A new project's lib/main.dart contains the default counter app — a complete, runnable Flutter app in about 90 lines that you will gradually replace with your own code.

import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('My First App')), body: const Center(child: Text('Hello, Flutter!')), ), ); } }

void greet(String name) { print('Hello, $name!'); } void main() { greet('Flutter'); }

int a = 10; int b = 3; int sum = a + b; // 13 double result = a / b; // 3.333... bool isGreater = a > b; // true String label = 'Sum is $sum';

for (var i = 1; i <= 5; i++) { if (i % 2 == 0) { print('$i is even'); } else { print('$i is odd'); } }

String describe({required String name, int age = 20}) { return '$name is $age years old'; } // Call it: describe(name: 'Ali'); // 'Ali is 20 years old' describe(name: 'Sara', age: 25); // 'Sara is 25 years old'

Column( children: [ Text('Hello'), Text('World'), Icon(Icons.star), ], )

StatelessWidget: class Greeting extends StatelessWidget { const Greeting({super.key}); @override Widget build(BuildContext context) => const Text('Hello'); }

Column( children: [ Text('Welcome', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)), const Icon(Icons.favorite, color: Colors.red), ElevatedButton( onPressed: () => print('Pressed!'), child: const Text('Tap me'), ), ], )

Container( padding: const EdgeInsets.all(16), color: Colors.blue[100], child: Column( children: [ Text('First'), SizedBox(height: 10), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [Text('A'), Text('B')], ), ], ), )

Container( margin: const EdgeInsets.all(20), padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12), child: const Align( alignment: Alignment.topRight, child: Text('Top right'), ), )

final names = ['Ali', 'Sara', 'Omar']; ListView.builder( itemCount: names.length, itemBuilder: (context, index) { return ListTile(title: Text(names[index])); }, )

final controller = TextEditingController(); TextField( controller: controller, decoration: const InputDecoration( hintText: 'Enter your name', border: OutlineInputBorder(), ), ), ElevatedButton( onPressed: () => print(controller.text), child: const Text('Submit'), ),

// From first screen Navigator.push( context, MaterialPageRoute(builder: (context) => const SecondScreen(name: 'Ali')), ); // SecondScreen constructor class SecondScreen extends StatelessWidget { final String name; const SecondScreen({super.key, required this.name}); @override Widget build(BuildContext context) => Scaffold( appBar: AppBar(title: Text('Hello, $name')), ); }

int _count = 0; ElevatedButton( onPressed: () { setState(() { _count = _count + 1; }); }, child: Text('Count: $_count'), )

final _tasks = <String>[]; final _controller = TextEditingController(); void _addTask() { final text = _controller.text.trim(); if (text.isEmpty) return; setState(() => _tasks.add(text)); _controller.clear(); } // UI: Column with TextField, button, and Expanded(ListView.builder(...))