Question #380MediumNative Android

Provide me concept mapping for easy understanding for Flutter to native Android?

#flutter#android#mapping#comparison

Answer

Overview

Mapping Flutter concepts to Android equivalents.


Core Concepts

Flutter/DartAndroid/Kotlin
WidgetView / Composable
StatelessWidgetView (XML) / @Composable
StatefulWidgetActivity/Fragment / @Composable with state
BuildContextContext
MaterialAppApplication + Theme
ScaffoldCoordinatorLayout

State Management

FlutterAndroid
setState()invalidate() / mutableStateOf
ProviderViewModel + LiveData
BLoCViewModel + StateFlow
RiverpodHilt + ViewModel

Navigation

FlutterAndroid
Navigator.push()startActivity() / navController.navigate()
Navigator.pop()finish() / navController.popBackStack()
RoutesIntent filters / Navigation Component

UI Widgets

FlutterAndroid XMLJetpack Compose
TextTextViewText()
ButtonButtonButton()
TextFieldEditTextTextField()
ImageImageViewImage()
ColumnLinearLayout (vertical)Column()
RowLinearLayout (horizontal)Row()
StackFrameLayoutBox()
ListViewRecyclerViewLazyColumn()
GridViewRecyclerView (Grid)LazyVerticalGrid()

Async

FlutterAndroid
FutureDeferred / LiveData
async/awaitCoroutines
StreamFlow / LiveData
FutureBuilderLiveData.observe()

Lifecycle

FlutterAndroid
initState()onCreate() / LaunchedEffect
build()onCreateView() / @Composable
dispose()onDestroy() / DisposableEffect

Example Mapping

Flutter Counter

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

class _CounterState extends State<Counter> {
  int count = 0;
  
  
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('$count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: Text('Increment'),
        ),
      ],
    );
  }
}

Android Compose

kotlin
@Composable
fun Counter() {
    var count by remember { mutableStateOf(0) }
    
    Column {
        Text("$count")
        Button(onClick = { count++ }) {
            Text("Increment")
        }
    }
}

Key Insight: Flutter and Jetpack Compose are very similar. XML Android is different.