$devvkit learn --librarie flutter-guide

Flutter Guide

[flutter][dart][mobile][ui]

Cross-platform

Install

flutter create my_app
cd my_app
flutter run

Flutter uses the Dart language and renders its own widgets using Skia/Impeller, bypassing platform UI components. This means consistent behavior and appearance across iOS, Android, Web, Windows, macOS, and Linux.

Widgets are the building blocks. Everything is a widget (padding, alignment, text, buttons, gestures). The composition model means complex UIs are built by nesting simple, focused widgets.

Flutter's state management ecosystem includes Provider, Riverpod, BLoC, and GetX. Hot reload provides sub-second iteration. Platform channels bridge to native Swift/Kotlin/Java code.

Setup

Create project— New Flutter app.

flutter create my_app --org com.example
cd my_app
flutter run              # run on connected device
flutter run -d chrome    # run in browser
flutter run -d windows   # run on desktop

Widgets

Basic widget— Stateless widget.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hello')),
        body: const Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

Stateful widget— Mutable state.

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

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('$_count'),
        ElevatedButton(
          onPressed: () => setState(() => _count++),
          child: const Text('Increment'),
        ),
      ],
    );
  }
}

Layout

Flex layout— Row and Column.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text('Header'),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        Icon(Icons.star),
        Icon(Icons.favorite),
        Icon(Icons.settings),
      ],
    ),
  ],
)

List view— Scrollable list.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      leading: const Icon(Icons.person),
      title: Text(items[index].name),
      onTap: () => _showDetail(items[index]),
    );
  },
)

State Management

Riverpod — provider— State management.

final counterProvider = StateProvider<int>((ref) => 0);

class CounterWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);
    return ElevatedButton(
      onPressed: () => ref.read(counterProvider.notifier).state++,
      child: Text('$count'),
    );
  }
}

Navigation

Navigation— Named routes.

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const HomeScreen(),
    '/settings': (context) => const SettingsScreen(),
    '/profile': (context) => const ProfileScreen(),
  },
)

// Navigate:
Navigator.pushNamed(context, '/profile');
Navigator.pop(context);

Platform

Platform channel— Call native code.

// Dart side:
import 'package:flutter/services.dart';

static const platform = MethodChannel('com.example/battery');
final batteryLevel = await platform.invokeMethod<int>('getBatteryLevel');

// Android (Kotlin):
channel.setMethodCallHandler { call, result ->
  if (call.method == "getBatteryLevel") {
    result.success(batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY))
  }
}