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/Dart | Android/Kotlin |
|---|---|
| Widget | View / Composable |
| StatelessWidget | View (XML) / @Composable |
| StatefulWidget | Activity/Fragment / @Composable with state |
| BuildContext | Context |
| MaterialApp | Application + Theme |
| Scaffold | CoordinatorLayout |
State Management
| Flutter | Android |
|---|---|
| setState() | invalidate() / mutableStateOf |
| Provider | ViewModel + LiveData |
| BLoC | ViewModel + StateFlow |
| Riverpod | Hilt + ViewModel |
Navigation
| Flutter | Android |
|---|---|
| Navigator.push() | startActivity() / navController.navigate() |
| Navigator.pop() | finish() / navController.popBackStack() |
| Routes | Intent filters / Navigation Component |
UI Widgets
| Flutter | Android XML | Jetpack Compose |
|---|---|---|
| Text | TextView | Text() |
| Button | Button | Button() |
| TextField | EditText | TextField() |
| Image | ImageView | Image() |
| Column | LinearLayout (vertical) | Column() |
| Row | LinearLayout (horizontal) | Row() |
| Stack | FrameLayout | Box() |
| ListView | RecyclerView | LazyColumn() |
| GridView | RecyclerView (Grid) | LazyVerticalGrid() |
Async
| Flutter | Android |
|---|---|
| Future | Deferred / LiveData |
| async/await | Coroutines |
| Stream | Flow / LiveData |
| FutureBuilder | LiveData.observe() |
Lifecycle
| Flutter | Android |
|---|---|
| initState() | onCreate() / LaunchedEffect |
| build() | onCreateView() / @Composable |
| dispose() | onDestroy() / DisposableEffect |
Example Mapping
Flutter Counter
dartclass 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.