The difference between the main and runapp functions in Flutter
The main() and the runapp() functions are two components a user must be familiarized with while developing a Flutter project. Although used together, these two functions are very different.
Syntax for main()
void main(){//code}
Syntax for runapp()
The runapp() function takes in a parameter, the base widget of all the widgets we need to use in our application. In simpler words, this widget is the foundation block that holds all the widgets together in our application:
runapp(<widget>);
Differences
The following table represents the significant differences between the two functions:
Main() | Runapp() |
Entry point of Dart programs. | Entry point for the Flutter framework. |
Without it, the application will not run. | Without it, Dart programs can still run without Flutter components. |
No imports required for it to work. | `flutter/material.dart` package required for it to work. |
Examples
Let's take a look at how these two functions work to execute a Flutter program:
import 'package:flutter/material.dart';
void main() {
runApp(OurApp());
}
class OurApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Our App',
debugShowCheckedModeBanner: false,
home: Scaffold(
body: ACenterClass(),
),
);
}
}
class ACenterClass extends StatefulWidget {
@override
_ACenterClassState createState() => _ACenterClassState();
}
class _ACenterClassState extends State<ACenterClass> {
var pressRemoteCount = 0;
void pressRemote() {
setState(() {
pressRemoteCount = pressRemoteCount + 1;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Container(
alignment: Alignment.center,
width: 350.00,
height: 100.00,
decoration: BoxDecoration(
color: Colors.green,
border: Border.all(
color: Colors.deepOrange,
width: 2.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(Radius.circular(40.0)),
boxShadow: [
BoxShadow(
color: Colors.black54,
blurRadius: 20.0,
spreadRadius: 20.0,
),
],
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.red,
Colors.white,
],
),
),
child: Column(
children: [
Text(
'$pressRemoteCount',
style: TextStyle(
fontSize: 30.0,
color: Colors.blue,
),
),
SizedBox(
height: 10.0,
),
ElevatedButton(
child: Text(
'Press Button',
style: TextStyle(
fontSize: 30.0,
color: Colors.white,
),
),
onPressed: pressRemote,
),
],
),
),
);
}
}
Explanation
Lines 3–5: The
main()function calls therunapp()function that hasOurApp()widget as a parameter. When we run the application, the entry point will be themain()function, which will run therunapp()function, which in turn provides theMyApp()widget that will contain all the other widgets.Lines 7–18: The definition of
OurApp()widget with its characteristics and information it will display. It contains four fields:title(application display title),debugShowCheckedmodeBanner(flag to set the debug mode option),home(MyHomePagewidget to show what the main page will look like), and abody(what will be included in the body of the program).Lines 20–32: The
ACenterClasswidget will have a state to reflect changes in our application based on user actions. It has a data member namedtitleand a state which calls the_ACenterClassState()method.Lines 35–91: This is the widget that displays the counter button on the page. It has several properties and classes that define the counter button's look.
The
Containerclass can be viewed as a box containing sub-elements/widgets to be displayed on the website. It has properties that define its alignment, width, height along with other properties as well. It also uses other classes as well for design.The
onpressedproperty is used to increment the value displayed on the counter button.
Now, to verify that the main() function still runs without the runapp() function, let's take the following example:
void main() {print('Hello World');}
However, the runapp() function will not run without the main() function:
runapp(MyApp());class MyApp extends StatelessWidget{const MyApp():super();}
Conclusion
The main() function and the runapp() function are two essential components of a Flutter application. They work together in Flutter projects.
