Flutter apps are built using the Dart programming language and revolve around the concept of Widgets, which compose the user interface. Below is a full basic Flutter app structure with detailed explanation of each part, why it exists, and how it works.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo App',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pressed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Breaking down the code:
import 'package:flutter/material.dart'; imports Flutter's material design widgets and tools. This package provides a rich set of pre-built UI components.void main() { runApp(MyApp()); } is the entry point of every Flutter app. runApp() attaches the widget tree to the screen. Here, MyApp is the root widget.MyApp extends StatelessWidget because this widget itself does not hold any mutable state. It builds a MaterialApp, which sets up basic app-level configurations:title is the app title used in task switchers.theme sets global app styling like colors.home specifies the default screen widget, here HomePage.HomePage is a StatefulWidget because it holds mutable state: the counter value._HomePageState class holds the state for HomePage:_counter initialized to 0._incrementCounter() updates the counter and calls setState() to tell Flutter to redraw UI reflecting the new state.build() method returns the UI for this screen:Scaffold provides a default app layout with an AppBar, body, and FloatingActionButton.body contains a Center widget with a vertical Column that shows descriptive text and the current counter._incrementCounter when pressed to increase the counter.StatelessWidget vs StatefulWidget: StatelessWidgets are immutable and used when UI doesn't change dynamically. StatefulWidgets can rebuild with updated data or user interaction.
MaterialApp: Provides fundamental app structure, theming, navigation support, localization, and more out of the box.
Scaffold: Gives you basic app visual structure with app bars, drawers, floating buttons, and body content, saving time to build these common parts manually.
setState: Notifies Flutter that the internal state changed so the framework knows to rebuild widgets with new data, refreshing the UI.
Flutter uses a reactive programming model. When setState() is called, Flutter schedules a rebuild of widgets below that widget in the tree, updating what is rendered on screen. Widgets themselves are lightweight and immutable; the framework efficiently manages rendering differences.
main(), which calls runApp().MaterialApp, sets theme, routes, and the initial screen.setState() to update UI reactively.