Flutter 101

For React Developers

Language Differences – Dart vs JavaScript/TypeScript

Type System

  • JavaScript: Dynamic typing
  • TypeScript: Optional static typing
  • Dart: Strong static typing, sound null safety
// Dart
String name = "John";
int? age; // Nullable int

// TypeScript
let name: string = "John";
let age: number | null = null;

Variable Declarations

  • JavaScript: var, let, const
  • Dart: var, final, const 
// Dart
var name = "John";        // Type inferred
final userId = getUserId(); // Runtime constant
const apiUrl = "https://..."; // Compile-time constant

// JavaScript
let name = "John";
const userId = getUserId();
const apiUrl = "https://...";

Functions

  • JavaScript: Arrow functions, this binding
  • Dart: First-class functions, no this issues
// Dart
void greet(String name) => print('Hello $name');
Function callback = () => print('Done');

// JavaScript
const greet = (name) => console.log(`Hello ${name}`);
const callback = () => console.log('Done');

Classes and OOP

  • JavaScript: Prototype-based, ES6 classes
  • Dart: True class-based OOP, mixins, interfaces
// Dart
abstract class Shape {
  double area();
}

class Rectangle extends Shape with Printable {
  final double width, height;
  
  Rectangle(this.width, this.height);
  
  @override
  double area() => width * height;
}

// TypeScript
abstract class Shape {
  abstract area(): number;
}

class Rectangle extends Shape {
  constructor(private width: number, private height: number) {}
  
  area(): number {
    return this.width * this.height;
  }
}

Async Programming

  • JavaScript: Promises, async/await
  • Dart: Futures, async/await, Isolates
// Dart
Future<String> fetchData() async {
  final response = await http.get(Uri.parse(url));
  return response.body;
}

// JavaScript
async function fetchData() {
  const response = await fetch(url);
  return response.text();
}

Collections and Data Structures

  • JavaScript: Arrays, Objects, Sets
  • Dart: Lists, Maps, Sets with generics
// Dart
List<String> names = ['Alice', 'Bob'];
Map<String, int> ages = {'Alice': 30, 'Bob': 25};
Set<String> uniqueNames = {'Alice', 'Bob'};

// JavaScript
const names = ['Alice', 'Bob'];
const ages = {'Alice': 30, 'Bob': 25};
const uniqueNames = new Set(['Alice', 'Bob']);

String Interpolation

  • JavaScript: Template literals
  • Dart: $ and ${} syntax
// Dart
String name = "John";
String message = 'Hello $name, you have ${messages.length} messages';

// JavaScript
const name = "John";
const message = `Hello ${name}, you have ${messages.length} messages`;

Error Handling

  • JavaScript: try/catch
  • Dart: try/catch/finally, exception classes
// Dart
try {
  final result = await riskyOperation();
} on NetworkException catch (e) {
  print('Network error: ${e.message}');
} catch (e) {
  print('Unknown error: $e');
} finally {
  cleanup();
}

Key Advantages for React Developers

  • Dart benefits: null safety, tooling, hot reload
  • Migration tips: syntax familiarity, package management

Framework Differences – Flutter vs React Native

  • Programming Language & Paradigm
  • Development Experience
  • UI Development Approach
  • State Management
  • Performance
  • Code Sharing
  • Learning Curve

State Management & UI Updates

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _incrementCounter() {
    setState(() {
      _count++;  // Triggers rebuild
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Count: $_count');
  }
}

Stateless Components/Widgets

class WelcomeMessage extends StatelessWidget {
  final String name;
  
  const WelcomeMessage({Key? key, required this.name}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text('Welcome, $name!');
  }
}

Terminology & Mental Models

Concept Flutter React Native 
UI Building Block Widget Component
UI Update Process rebuild render
State Container StatefulWidget Functional Component with hooks

Child Management

Column(
  children: [  // Explicit children array
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Container(
  child: Text('Single child'),  // Explicit single child
)
<View>
  {/* Children are implicit */}
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</View>

Training Resources

  • Official documentation: https://flutter.dev/learn
  • Our course: https://www.udemy.com/share/1013o43@OS6cvYMnVs1k32WnBm0hly3mKy3CB99t6KaYLbQuAn36ia2aBiW7XxmZQ0-oR11a/

Final Project

  • State Management
  • Network Requests / API Integration
  • UI/UX and Responsive Design
  • Form Validations
  • File Structure and Code Organization
  • Usage and Integration of Popular Flutter Packages (related to other items)
  • Error Handling and Loading States
  • Asynchronous Programming and Use of Future/Stream
  • Widget Lifecycle and Performance Optimization
  • Using Flutter DevTools (Debugger, Widget Inspector, Performance Monitoring)
  • Debugging Techniques and Troubleshooting Practices
  • Usage and Management of Flutter Packages & Plugins

??? Q & A ???

Thank you for listening

Flutter 101

By Özgün Bal

Flutter 101

  • 6

More from Özgün Bal