Flutter Overview

What is Flutter?

Flutter is Google's UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase using the Dart programming language.

Architecture

Flutter Engine Stack

[Dart App]
    ↓
[Flutter Framework] (Widgets, Rendering, Animation)
    ↓
[Flutter Engine] (Skia, Dart VM)
    ↓
[Platform] (iOS, Android, Web, Desktop)

Key Components

• Framework: Widget library, rendering, animation
• Engine: Skia graphics engine, Dart runtime
• Embedder: Platform-specific embedding

Core Concepts

1. Everything is a Widget

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Column(
            children: [
              Text('Hello Flutter!'),
              ElevatedButton(
                onPressed: () => print('Button pressed'),
                child: Text('Click Me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. Widget Tree

MaterialApp(
  └── Scaffold(
      ├── AppBar(
      │   └── Text('Title')
      │)
      └── Body(
          └── Center(
              └── Column(
                  ├── Text('Hello')
                  └── Button()
              )
          )
      )
  )
)

Dart Programming Language

Syntax Overview

// Variables
String name = 'Flutter';
int version = 3;
double rating = 4.8;
bool isAwesome = true;

// Functions
String greetUser(String name) {
  return 'Hello, $name!';
}

// Classes
class User {
  String name;
  int age;
  
  User({required this.name, required this.age});
  
  void introduce() {
    print('I am $name, $age years old');
  }
}

// Async/Await
Future<String> fetchData() async {
  final response = await http.get(url);
  return response.body;
}

State Management

1. 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('Increment'),
        ),
      ],
    );
  }
}

2. Provider Pattern

// Model
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();
  }
}

// Widget
class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CounterModel>(
      builder: (context, counter, child) {
        return Text('Count: ${counter.count}');
      },
    );
  }
}

Flutter vs Other Frameworks

vs React Native

vs Native Development

Advantages of Flutter

1. High Performance

• Compiled Code: Dart compiles to native ARM code
• No Bridge: Direct communication with platform
• 60fps Animations: Smooth performance

2. Single Codebase

// One codebase for multiple platforms
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cross Platform App',
      // Works on iOS, Android, Web, Desktop
    );
  }
}

3. Rich Widget Library

// Material Design
Material(
  child: InkWell(
    onTap: () {},
    child: Card(
      child: ListTile(
        leading: Icon(Icons.person),
        title: Text('User Name'),
        subtitle: Text('User Email'),
      ),
    ),
  ),
)

// Cupertino (iOS-style)
CupertinoButton(
  child: Text('iOS Style Button'),
  onPressed: () {},
)

Disadvantages of Flutter

1. Large App Size

Minimum Flutter app size: ~20MB
Native empty app size: ~1-2MB

2. Limited Third-Party Libraries

• Smaller ecosystem compared to native
• Some platform-specific libraries missing
• Need to create custom plugins

3. Platform-Specific Features

// Sometimes need platform channels
class PlatformChannel {
  static const platform = MethodChannel('com.example/battery');
  
  static Future<String> getBatteryLevel() async {
    try {
      return await platform.invokeMethod('getBatteryLevel');
    } catch (e) {
      return 'Failed to get battery level';
    }
  }
}

Navigation

Named Routes

MaterialApp(
  routes: {
    '/': (context) => HomeScreen(),
    '/details': (context) => DetailsScreen(),
  },
)

// Navigation
Navigator.pushNamed(context, '/details');
Navigator.pop(context);

Testing

Widget Testing

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);
});

Integration Testing

void main() {
  group('Counter App', () {
    testWidgets('increments counter on button tap', (tester) async {
      await tester.pumpWidget(MyApp());
      
      await tester.tap(find.byType(FloatingActionButton));
      await tester.pumpAndSettle();
      
      expect(find.text('1'), findsOneWidget);
    });
  });
}

Popular Flutter Apps

• Google Ads: Google's advertising platform
• Reflectly: Journaling app
• Hamilton Musical: Official app
• Alibaba: Xianyu app
• BMW: My BMW app
• eBay Motors: eBay's automotive app

When to Choose Flutter

Good For:

• Cross-platform development with single codebase
• Custom UI designs not bound by platform conventions
• High-performance apps with complex animations
• Rapid prototyping and MVP development
• Teams comfortable with object-oriented languages

Consider Alternatives When:

• App size is critical (very lightweight apps)
• Heavy use of platform-specific features
• Large existing native codebase
• Team heavily invested in JavaScript ecosystem